Duplicamos esta capa. Con el Marco Rectangular seleccionamos una porción de esta última capa y suprimimos esta parte. Sleccionamos la capa que habíamos copiado. Invertimos la selección (Selección>Invertir) y suprimimos la parte ahora seleccionada.

Le aplicamos los siguientes estilos a la capa que se encarga de la parte superior (doble click en la capa en la ventana de capas)

Creamos una nueva capa. Hacemos control+click encima de la capa que se encarga de la parte superior – en la ventana de capas. Esto hará que se haga una seleción entorno a esta. Con la herramienta de Degradado en modo radial y de color blanco a transparente clickamos dentro de la selección y sin soltar el click ajustamos el degradado a nuestro gusto. Ajustamos la opacidad de la capa al 25% (en la ventana de capas)

Añadimos una línea de texto de color #21833f. Yo he escogido Delicious como fuente, a 45pt. Podemos hacer más de una línea de texto, pero siempre en capas distintas. Luego a estas capas les damos el siguiente estilo:

Llegados a este punto tenemos algo así:

Ahora vamos a hacer el logo en una nueva capa. Empezamos creando una base con la herramienta Rectángulo redondeado (con un rádio de 8px) de color #b12a17. Con la herramienta Marco rectangular seleccionamos la parte de abajo y la suprimimos.

Ahora le añadimos el siguiente estilo de capa.

Y ahora añadimos el texto del logo, en color blanco, y le añadimos el siguiente estilo a la capa:

En una nueva capa, con la herramienta línea hacemos dos segmentos, el de arriba oscuro y el de abajo blanco. En otra capa (ajustamos su opacidad al 15%) hacemos un degradado lineal de negro a transparente. Por los lados lo suavizamos con la herramienta Borrador.

Con la herramienta Rectángulo redondeado (con un rádio de 8px), marcamos la área donde se mostrarán trabajos que ya hemos hecho (a la derecha del texto que añadimos anteriormente). Clickando encima de la capa donde hemos hecho la forma, se selecciona esta área que suprimimos de la superficie verde con la que hábíamos estado trabajando antes:

Ahora importamos la imagen de alguna página que ya hayamos hecho y la escalamos a un tamaño un poco superior al de la selección. Inverimos la selección (Sleección>Invertir) y suprimimos esta parte de la imagen importada. Luego añadimos el siguiente estilo a la capa:

Debe quedarnos algo así:

El siguiente paso es añadir una barra de navegazión horizontal. En una capa con la opacidad al 5% añadimos un texto de color blanco a 22pt como el siguiente:

Para continuar vamos a trabajar con  la superficie blanca que creamos al principio del tutorial. A la capa que contiene esta superficie le agregamos, en estilo de capa, un trazo de 1px de color negro al 70% de opacidad. En una nueva capa, por encima de la que contiene esta superficie, creamos una línea blanca de 1px y en otra capa un degradado lineal de negro a transparente. La capa del degradado la ajustamos al 10% de opacidad.

Ahora añadimos algo de texto. Para los títulos seguimos utilizando Delicious, para el texto general Trebuchet. Además podemos añadir algunos iconos como los de Function y algunas líneas para separar contenidos.

Para hacer el footer vamos a utilizar una vez más la herramienta Rectángulo redondeado (con un rádio de 8px). Copiamos el estilo que habíamos utilizado para hacer la superficie verde y lo pegamos en esta capa. Creando capas encima y con degradados de blanco a transparente creamos los efectos de luz deseados (opcional).

Ahora podemos añadir algún texto y algún icono en el footer. Podemos utilizar el estilo de capa del texto del header.

Para acabar vamos a añadir algunos brillos y sombras. Con la herramienta Degradado radial (de blanco a transparente), hacemos uno debajo del logo. Otra vez con la herramienta Degradado (esta vez de negro a transparente), hacemos una sombra debajo del footer.

Ajustamos la opacidad de estas capas al 30% o 40% y HEMOS ACABADO!

(click para ampliar)

Descarga el PSD

Esta vez voy a ser un poco malo… No voy a colgar el PSD hasta que haya 5 Tweets sobre esta entrada o esté en Meneame. Lo siento!

El fondo se corta

Lo más común es que al hacer nuestro fondo lo demos un buen ancho, pero siempre hay pantallas más grandes. Además, si la hacemos la imagen muy ancha el peso del archivo también augmenta.

El fondo tarda mucho en cargarse

Al utilizar un fondo grande, lo más común va a ser que tenga un peso considerable, y esto hará que la página tarde en cargarse.

Para solucionar estos problemas, por decirlo de alguna manera, hay dos métodos que podemos usar con el fin de tener un fondo extenso en nuestra web y que se visualice bien en todas las pantallas y con todos los navegadores- o al menos con el máximo posible…

Método 1: Enlazar los bordes con un color de fondo llano

Podemos hacer que una imagen de fondo no quede cortada por los lados y por abajo en pantallas de grande resolución ya sea mediante un degradado o finalizandolo elegantemente. He aquí diferentes ejemplos:

El css sería algo tan sencillo como:

body {
   padding: 0;
   margin: 0;
   background: #111 url(bg.jpg) no-repeat center top;

   /* Para máxima compatiblidad */
   width: 100%;
   display: table;
}

Método 2: El doble fondo

En otros casos puede que no queramos que la imagen finalice por muy grande que sea la pantalla. Esto solo será posible cuando utilicemos un motivo de fondo (un pattern). Este motivo puede que queramos que se repita por toda la página o solo a lo horizontal. Veamos unos ejemplos en los que podemos utlizar este método:

Para conseguir un fondo como el de la primera imagen, tenemos que usar un motivo que se extetienda por todo el body. Luego otra imagen para el brillo. Esta segunda imagen es importante que sea *.png para que funcionen las transparencias. El css quedaría así:

body {
   padding: 0;
   margin: 0;
   background: #666 url(bg.jpg) repeat;

   /* Para máxima compatiblidad */
   width: 100%;
   display: table;
}

#contenedor {
   padding: 0;
   margin: 0;
   background: transparent url(bg.jpg) no-repeat top center;
}

Donde #contenedor será el div donde va a estar contenida toda la información.
Para conseguir un fondo como el de la segunda imagen seguimos el mismo procedimiento que para la primera, pero haremos el fondo del body solo se repita horizontalmente:

background: #9BD1FF url(bg.jpg) repeat-x;

Esto es todo por hoy. Espero que os sea útil. Acordaros de seguir este blog en Twitter o al Feed, porque Tinnta se vuelve a poner las pilas!

Nota: Algunas ideas para el artículo las he sacado de WebDesignerWall

Para empezar debemos insertar el siguiente código HTML donde queramos añadir las últimas actualizaciones de nuestro twitter:

<div id="twitter_update_list"></div>

El siguiente paso es insertar las siguientes líneas justo después del div del paso anterior:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/usuario.json?callback=twitterCallback2&count=1"></script>

En esta segunda línea es en la que tendremos que definir el usuario, que será el de nuestro twitter, y el número de actualizaciones que queremos mostrar (donde pone 5). El máximo de actualizaciones que podremos mostrar es 20.

Lo que obtenemos con todo esto es una lista dentro del div #twitter_update_list con las diferentes actualizaciones con la siguiente estructura html:

<div id="twitter_update_list">
<li><span>Contenido de la entrada</span><a>Hace x días</a></li>
</div>

Con esto ya nos podemos poner a darles estilo con css. Podési ver como ha quedado el mío. Si te gusta el icono, puedes encontrar un pack en este link.

Jepser en su blog nos enseña a crear un buen sitio web mediante tutoriales muy bien redactados – desde como reunir un buen equipo hasta como lanzar la página y conseguir tráfico. También nos habla de temas más técnicos y un poco de su vida ¡Muy recomendado!

2. Wordpress Hacks

WordPress Hacks es un sitio en el que se pretende ayudar y colaborar con tips, hacks, plugins, themes y demás cosas que hacen mejorar un blog creado con WordPress.

3. CSS Blog

Posiblemente casi todos ya lo conoceréis, pero no me lo podía dejar. CSS Blog destaca por su frecuencia de actualización y calidad en contenidos.

4. Area Photoshop

Area Photoshop, aunque el nombre nos pueda confundir un poco, trata el diseño web y de vez en cunado un poco de desarrollo. El joven editor nos deja siempre muchísimos recursos muy útiles. Hace poquísimo ha entrevistado a el fundador de Envato, así que ya sabéis!

5. Pixel y Dixel

Si hay un blog al que me he mantenido fiel desde el principio, ese es Pixel y Dixel. Y esqué alguien a quien se le ocurre usar ese tagline tiene que ser un genio (en este caso dos). Simplemente, un inmenso cúmulo de creatividad.

Un sprite es una imagen imagen grande que contienen a su vez varias imágenes pequeñas. Gracias a la propiedad background-position de CSS podemos utilizar solo una parte de la imagen en el fondo. Así, podemos tener una imagen para todos los iconos del home o una para todas las imagenes de un menú.

¿Por qué molan?

La diferencia entre usar muchas imagenes o una sola que las contenga a todas es el número de peticiones. No se tarda lo mismo en cargar dos archivos de 10kb que uno de 20kb, ya que en el primer caso se hacen dos peticiones y en el segundo solo una. Cada petición augmenta el tiempo de carga y la transferencia.

Por otra parte, con otros sistemas la imagen no se carga hasta que no es requerido, haciendo que haya un intérvalo de tiempo en que no se muestra ninguna imagen. Por ejemplo, hay botones que cambian la imagen al pasar por encima a los que les pasa esto. Con este sistema como son partes de una misma imagen, podríamos decir que se cargan todas a la vez.

¿Como se utilizan los CSS Sprites?

La Imagen

Lo primero que haremos será coger todas las imagines que queremos utilizar y juentarlas en una sola. En nuestoro ejemplo vamos a hacer tres botones que cambirán de imagen cuando pasemos por encima. Por tanto necesitaremos dos imagenes para cada uno de los tres botones – un total de seis imagenes dentro de nuestro sprite.

El HTML

Vamos a centrarnos en el boton de “Suscríbete por Email”, que nos servirá de ejemplo general. Lo único que necistaremos en nuestro HTML será:

<div id="btn_email"><a href=”#”><img class="click" src="transp.gif" /></a></div>

El div será el que tendrá el sprite de fondo. Como queremos que al clickar el botón se abra una página web y sin Java Script no podemos crear un link en un div, insertamos una imagen transparente en el div que enlazará la página deseada. Esta imágen transparente no tiene que medir lo que mida el botón, sino que tiene que ser pequeña.

El CSS

Como hemos dicho, modificaremos el background-position en el css para utilizar la parte de imagen que deseemos. Para empezar vamos a determinar el ancho y la altura del botón, vamos a insertarle el fondo y vamos a posicionarlo:

#btn_email {
width: 155px;
height: 35px;
background: transparent url('sprite.png') no-repeat -170px 0;
}

Ahora lo que hacemos es modificar la posición del fondo para cuando el cursor esté encima del div:

#btn_email:hover {
background-position:-170px -36px;
}

Para acabar vamos a hacer que la imagen transparente que nos permitía clickar ocupe todo el ancho y toda la altura. Es tan fácil como darle las sigueintes propiedades:

.click {
width: 100%;
height: 100%;
}

Como detalle, me gustaría añadir que es posible que salga un borde de puntitos al clickar en la imagen. Podéis hacer que no se muestre añadiendo esto en el CSS:

:focus {
outline: 0;
}

Demo y Descarga

Descargar el PSD

Demo

Bueno Soy de El Salvador y tengo 22 años, me motivan muchas cosas como el deseo de superación y de éxito que la mayoria de jóvenes tenemos, actualmente me motivan mucho mis estudios en la carrera de Diseño Gráfico, la verdad es un mundo que te absorve por completo y te abre la mente y los ojos a muchas cosas de la vida que la mayoria no notan como las técnicas que los diseñadores usan para hacer de un producto un boom!! y eso te lleva a tener una mente mas critica, mas madura ya que no solo empleas esa sensorialidad en el mundo del diseño si no en todo cuanto haces.

Hablando de inspiración debo decir que me gusta mucho el diseño gráfico visto desde el lado profesional, es decir me inspiran trabajos de tipografia, packaging, trabajos minimalistas etc. Me inspira mucho la Identidad Corporativa de la cual aprovecho para decir que no es ningun juego y que la imagen de un empresa debe ser tomada con seriedad y profesionalismo.

¿Cómo te iniciaste con el desarrollo y diseño web?

Fue por necesidad más que por curiosidad que fué lo que me llevó a aprender Photoshop, aunque hoy disfruto diseñando sitios que son meramente ideas ya que aún no he tenido mi primer proyecto de diseño web. Cuando inicie Photodesigners quería algo único eso me llevo a estudiar y aprender XHTML y CSS.

Luego que aprendí esa parte empezé a leer acerca de PHP pero como que no me llevo muy bien con los lenguajes de desarrollo es una de las áreas que debo fortalecer en mi, sin embargo he logrado familiarizarme con las instrucciones PHP que usa wordpress lo que me permite modificar y optimizar muchas cosas en mi blog y así poco a poco perfeccionar mis habilidades.

PhotoDesigners es tu blog: ¿Qué temas trata? ¿Cómo surgió?

Bueno Photodesigners es tan multifacetico como yo, actualmente se centra en Tutoriales para Photoshop en español pero no traducciones si no trabajos originales secundariamente a recursos, inspiración y muy levemente a temas de diseño gráfico. Al principio cuando aún no estudiaba diseño decidí habar de “Diseño Gráfico” pero nada que ver solo hablaba de tutoriales para Photoshop y recursos, luego mi mente se fue abriendo me dí cuenta que no hablaba de diseño si no de Photoshop y que eso era lo que queria, haber.. estaba confundido, es un problema ya que muchos piensan que dominar Photoshop o el paquete de Adobe te hace diseñador y no es verdad hay todo un mundo de temas y habilidades que deben ser aprendidas y/o desarrolladas antes de darte el título de diseñador, Adobe solo nos permite materializarlas.

Photodesigners surgio con el deseo de mostrarle al mundo que en America Latina también hay talento, y que podemos hacer lo que cualquier blog en inglés puede.

¿Recives ingresos suficientes para poder vivir de tublog? ¿Trabajas de algo más?

No, aún no pero si lo suficiente para mantener vivo Photodesigners, básicamente el blog se sustenta solo por medio de la publicidad. En este momento me dedico al 100% a mis estudios los cuales termino en dos años, quizá una de las ventajas de esta carrera que tu portfolio habla por tí y la experiencia queda un poco (pero nada mas un poco) de lado.

¿A quien admiras de este mundillo?¿Que blogs sigues?

Admiro mucho a mis amigos los que estan en mi blogroll son jóvenes que trabajan fuerte en sus blogs y se empeñan es sacarlos a flote siendo generadores de contenido, entre ellos Diego Mattei (diegomattei.com.ar) quien fue la primera persona en reconocer mis trabajos, gracias a él conocí a Dario Pineda (psdcreativo.com) un chavo con que trabaja en su blog con muchas ganas, Teo Atienza (teoatienza.com) con quien estamos trabajando en un proyecto, Enrique Flouret (photoshoproadmap.com, photoshoplatino.com) wow! el a sido una gran ayuda para mi y lo admiro mucho por el trabajo que hace en Photoshop Roadmap donde yo empece a leer tutoriales de Photoshop.

Todos ellos hacen un gran trabajo y aprendido mucho de ellos, de algunos paciencia de otros diplomacia y buen trato, pero mas que todo de sus articulos y publicaciones que son de mucha calidad.

¿Qué consejo le darías a alguien que quiere empezar a desarrollar o diseñar páginas web?

Primero que nada que se de cuenta que no es un juego, muchos piensan que diseñar un sitio es cosas de fácil pero no lo es, cuando ves un sitio web bien diseñado te darás cuenta que hay toda una gama de ideas distribuidas con gran malicia para atraer al cliente. Colores, formas y texturas que no estan allí solo para rellenar un espacio si no con un objetivo: Hacer del sitio un éxito.

Con eso claro, el consejo mas adecuado es ser siempre persevarante y tener deseos de aprender las cosas bien, no con prisa sino con claridad mental, que lea, lea, lea, lea y practique mucho, eso es lo que más te servirá.

El blog de Samuel es Photodesigners. También lo puedes encontrar en twitter.

Es verdad que tenemos font-face en css, pero no funciona en Firefox anteriores a la versión 3.5 ni en Explorer. Hasta hace poco esto solo se podía solucionar con lo que se llamó sIFR, algo complejo y basado en flash – por lo que no lo recomiendo para nada. Afortunadamente ha nacido Cufón, una solución que se basa en javascript y es basatante rápida y sencilla.

Generar un js de la fuente

Ya sé que suena raro, pero no es para tanto. Lo primero que tenemos que hacer es generar un js. a partir de la fuente que hemos de tener (sí, tenemos que tener el archivo ttf o el otf). No hace falta ni que entendamos que es ni como se hace ya que hay un generador que se encarga de hacer esto por nosotros.

Una vez en el generador podemos seleccionar los diferentes opciones. Por una parte podemos subir las diferentes versiones de la fuente que vayamos a utilizar. No subas más de lo necesario, ya que cada añadido hace que el archivo pese más y por consiguiente nuestra página tardará más en cargar. Yo recomiendo:

• Uppercase
• Lowercase
• Numerals
• Punctuation
• and also these single characters: áéíóúñ

Las demás opciones son pan comido para los lectores de tinnta ;)

Añadir el código a nuestra página

Primero descargamos el código javascript que se encarga de hacerlo todo clickando download en esta página.

Ahora, en el header de nuestro html insertamos el siguiente código:

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Delicious_700.font.js" type="text/javascript"></script>

Gracias a estas dos líneas de código podremos trabajar con los archivos que hemos descargado – en nuestro caso estarán en una carpeta llamada “js” que estará en el mismo directorio que nuestro archivo html.

Ahora es el momento de decir que queremos hacer con todo ese código que emos importado. En nuestro caso vamos a usar la fuente para los h1. Insertaremos este código.

<script type="text/javascript">
	Cufon.replace('h1');
</script>

Y esto es todo. Podéis ver el ejemplo aquí.

Características

• Todas las clases han sido borradas
• Todo el html innecesario también ha sido borrado (<hr />, <br />)
• Elementos convertidos cuando ha sido necesario (<small> pasa a ser <p>)
• Páginas obsletas borradas (comments-popup.php)
• Admite widgets
• Mucho más

Instalación y uso

Para instalarlo, descomprímelo e inserta la carpeta que hay dentro – llamada “starkersES” – en el directorio “themes” de tu Wordpress. Luego es el momento de ponerse a estilizar este sencillo theme ¡Proximamente haré un tutorial explicativo!

Descarga StarkersES

Descargar version 1.0

Si quieres estar informado y saber cuando hay nuevos freebies puedes suscribirte al feed y/o al twitter de Tinnta.

Descarga e instalación

Lo primero que vamos a hacer va a ser descargar la versión normal de MAMP – no la pro – de la página oficial. Lo instalamos como cualquier otra aplicación para mac: descomprimimos el zip, abrimos el dmg, trasladamos la aplicación a la carpeta de aplicaciones y abrimos la aplicación.

Iniciar la aplicación

Se abrirá una ventana como la de la imagen. Si no se inician los servidores automáticamente (las luces están rojas), clickamos “Iniciar Servidores”. Cuando las luces estén verdes ya tenemos nuestros servidores funcionando.

Poner una página en el servidor

A partir de ahora tenemos una carpeta que se comportará como la de archivos públicos de un servidor. Eso significa que tenemos que poner en esa carpeta las páginas que queremos que estén en nuestro servidor local. La carpeta en cuestión está en:

Eso significa que, si por ejemplo queremos usar wordpress en nuestro mac lo tendremos que poner en esa carpeta. Un PHP NO funcionará en cualquier carpeta.
Para ver estos archivos en funcionamiento, en el navegador pondrmos la siguiente dirección (si creamos subdirectorios dentro de htdocs, los agregamos después de la última barra):

Crear una base de datos mySQL

Para ir al phpMyAdmin, donde podemos crear y manejar bases de datos mySQL, clickaremos en la ventana de MAMP en el botón “Abrir página de inicio”. En nuestro navegador aparecerá una página con información sobre el servidor. En el menú superior hay un link hacia phpMyAdmin. Una vez ahí, en el formulario indicado con “Crear nueva base de datos” insertamos el nombre i clickamos “Crear”.

Animar la página 404 que hicimos hace poco en este blog. Lo que queremos que ocurra es lo siguiente:

• Que el cuadro de mensaje caiga desde arriba hasta su posición.
• Que el texto de “Página no encontrada” parpadee dos veces.
• Que las nubes del cielo se muevan lentamente.

HTML y CSS

Usaremos los que hicimos en el screencast con una pequeña modificación. Como queremos que las nubes se muevan vamos a tener que separarlas de la imagen de fondo del documento. Por lo tanto tendremos una imagen para el fondo (sin nubes) y otra con las nubes. Las nubes apareceran en un div después de la etiqueta <body>:

<div id="cielo"></div>

Y su estilo en la hoja css será:

#cielo {
width: 100%;
height: 300px;
margin-bottom: -300px;
background: transparent url('img/cielo.jpg') no-repeat center 0;
z-index: 10;
}

jQuery

Empezamos repasando la teoría:
Todo el código, que se ejecutará cuando se haya cargado el documento, irá dentro de estas líneas:

$(document).ready(function (){
// Aquí va todo el código
});

Para dar estilo a un div con css (se modificará el que se le haya dado en la hoja de estilo), se utiliza el código como el siguiente:

$('#id').css({
// Nuevos valores
});

Y para animarlo de una manera personalizada se sigue el siguiente esquema:

$('#id').animate({ Valores finales }, “velocidad”, callback);

Para animar el fondo, por ejemplo, usaremos un código así:

$('#cielo').css({ backgroundPosition: '-1500px 0'})
.animate({backgroundPosition: '1300px 0'},100000);

Primero hemos definido el estilo inicial, en el que el fondo de #cielo está desplazado 1500px hacia la izquierda, y luego hemos dicho que en 100 segundos (100000ms) queremos que el fondo pase a estar 1300px hacia la derecha. Si os fijáis, en el animate se ha suprimido $(‘#cielo’), ya que ya estábamos trabajando con el.

Para el cuadro de mensaje hacemos más de lo mismo. Primero definimos que queremos que tenga un margen superior negativo muy grande para que quede fuera de la pantalla. Luego lo animamos de tal manera que se coloca donde queremos:

$('#mensaje'&&'.imagen').css({ marginTop: '-700px'})
.animate({ marginTop: '75px',}, 1000, function(){});

Si queremos trabajar con más de un div ponemos && entre los dos. Así trabajamos con un grupo formado por los dos. La diferencia respecto al cielo es que vamos a encadenar diferentes animaciones. Para hacerlo se usa el callback, que es una función que se inicia cuando acaba la animación. En este caso la función no contiene nada.

Lo que haremos será hacer que cuando el cuadro esté en su sitio el texto de página no encontrada se desvanezca. Con jQuery esto es tan fácil como usar como esto:

$('.noencontrado').fadeOut('fast')

Encadenando unas cuantas veces fadeIn (aparecer) y fadeOut (desaparecer) junto con la caída del cuadro de mensaje tenemos lo siguiente:

//Condiciones iniciales
$('#mensaje'&&'.imagen').css({ marginTop: '-700px'})
//Animaci—n
.animate({ marginTop: '75px',}, 1000, function(){
$('.noencontrado').fadeOut('fast', function(){
$('.noencontrado').fadeIn('normal', function(){
$('.noencontrado').fadeOut('fast', function(){
$('.noencontrado').fadeIn('normal');
});    });    });    });

Ahora hacer que el código del cielo y este se ejecuten cuando el documento esté cargado. El código resultante son 10 simples líneas de código jQuery:

$(document).ready(function (){
// Animaci—n fondo
$('#cielo').css({ backgroundPosition: '-1500px 0'})
.animate({backgroundPosition: '1300px 0'},100000);

//Condiciones iniciales
$('#mensaje'&&'.imagen').css({ marginTop: '-700px'})
//Animaci—n
.animate({ marginTop: '75px',}, 1000, function(){
$('.noencontrado').fadeOut('fast', function(){
$('.noencontrado').fadeIn('normal', function(){
$('.noencontrado').fadeOut('fast', function(){
$('.noencontrado').fadeIn('normal');
});    });    });    }); });

Demo y Descarga

Descargar

Demo