Ayer hice este volante para promover mi sitio Web y la creación de páginas sencillas informativas a través del envío de correos masivos, una gran técnica de mercadeo debo decir y me gustaría compartir los archivos fuentes con quien desee descargarlos. Espero les sea muy útil este recurso y no olviden visitar mi sitio Web http://www.yenhowell.com 
Hace dos semanas fue el final de temporada de otra de mis series favoritas "Gossip Girl" y para recordarla hasta la próxima temporada diseñé este wallpaper que espero les guste. La inspiración para este diseño fueron canciones de Lilly Allen.
The Big Bang Theory. La idea la tuve por el último capítulo de esta temporada (la segunda), donde vemos a un Sheldon mucho más humano y cuando vi la foto quise darle un poco de alegría a todo el elenco, en especial a Sheldon "Bazinga". Espero disfruten mi diseño y adorne sus escritorios. 
Y después de varios diseños llegué a un diseño final...
Y bien, ahora que ya tenemos el diseño en photoshop hecho utilizaremos la herramienta SECTORES para extraer las imágenes que necesitaremos para armar todo nuestro diseño en html.
Para este diseño en particular necesitaremos la barra de arriba (donde está la búsqueda), apagamos todos los textos que tiene encima y creamos un sector que contenga la barra completa. También apagamos el logo, pues este lo copiaremos de otra forma, igualmente los íconos de esa barra los copiaremos de una manera diferente.
Para crear el sector luego de hacer clic en esta herramienta arrastramos el mouse y seleccionamos toda el área que necesitamos (en este caso la barra de arriba).
Como podrán ver apareció un número en la esquina superior del área que seleccionamos, este es el número de sector sobre el cual estamos trabajando. Hagamos doble clic sobre esa área y nos aparecerá una ventana. En el campo NOMBRE cambiamos el valor que aparecere allí y ponemos cualquier nombre que podamos recordar, en mi caso yo decidí llamar a ese sector top-bar-bg. Ese es el nombre que tendrá la imagen cuando la guardemos y la vayamos a trabajar en HTML, recuerden que es preferible utilizar guiones medios ( - ) para nombrar las imágenes, es una técnica sencilla de SEO.
Ya tenemos nuestro primer sector hecho, ahora hagamos un sector de cada item del menú. Una buena idea es hacer zoom para poder abarcar el área exacta que necesitamos.
Hacemos doble clic sobre cada uno de los item del menú para nombrarlos con nombres lógicos. Para editar diferentes sectores debemos escojer la otra opción de la herramienta sectores: HERRAMIENTA SELECCIONAR SECTOR.
Con esta herramienta ya podemos ir haciendo doble clic sobre los diferentes sectores que tenemos hechos. En mi casa decidí llamarme a cada item con el nombre de la categoría que representarán: inicio, equipo, servicios, catalogo, pedidos y blog.
Pueden notar que también pueden ponerle los URL y los TEXTOS ALT directamente en Photoshop CS3, pero la verdad yo prefiero hacerlo en Dreamweaver, así que dejaré en blanco los demás campos y sólo me enfocaré en los nombres.
Como pueden ver el diseño tiene dos rayas horizontales debajo del menú, si estas rayas no tuvieran un sombreado podríamos hacerlas con un color sólido en el CSS en vez de con imágenes, pero como les puse sombra utilizaremos las imágenes.
Crearemos un sector que abarque toda el área horizontal de las rayas gris y negra, incluyendo las sombras. Yo escojí llamarle rayas.
Ahora apagamos todo el texto e imágenes que está como contenido y creamos un sector del mismo largo que el anterior que abarque un pedazo del área blanca, este será ahora el fondo de nuestro contenido. Debemos asegurarnos que el área que seleccionamos quede exactamente igual de larga que la de la área anterior. Yo le llamé a este sector content-bg
También necesitaremos la imagen del final del contenido con las esquinas redondeadas, así que crearemos un sector de ese pedazo. Como necesitamos que tenga el mismo ancho el sector anterior, lo que podemos hacer es crear un sector sin nombre que abarque casi toda el área blanca del contenido para poder cuadrar el sector que crearemos abajo.
Y ahora con este sector "guía" podemos crear el sector que contiene la imagen de las esquinas redondeadas de abajo.
Como pueden ver ambos secotres están alineados, debemos quedar que no quede ni siquiera un pixel de más o de menos entre ambos sectores recuerden: "Un píxel hace la diferencia".
Y ahora el último sector, para crear ese footer sólo necesitaremos un pedazo del fondo azul degradado, la raya verde podemos hacerla con CSS, pero prefiero incluirla en el sector y hacer el footer nada más con esa imágen. A este último sector le llamaré footer-bg.
Y de esta forma hemos terminado todos los sectores que necesitamos.
Ahora guardaremos todos esos sectores como imágenes independientes. Lo primero que haremos es apagar la capa fondo, pues todas las imágenes que necesitamos serán png transparentes. Luego vamos a ARCHIVO > GUARDAR PARA WEB Y DISPOSITIVOS
Nos aparecerá una nueva ventana y con la herramienta SELECCIONAR SECTOR que nos aparece allí, vamos haciendo clic sobre cada uno de los sectores que creamos.
Cada vez que hagamos clic en un sector, escojemos en los AJUSTES PREESTABLECIDOS la opción PNG y así veremos cómo cada sector se va tomando un fondo transparente.
Para alcanzar los sectores de abajo podemos movernos con la herramienta DESPLAZAR, que es la que tiene forma de manito. En la imagen también vemos como los sectores se volvieron de fondo transparente.
Una vez hacemos clic en GUARDAR, buscamos un lugar donde alojar nuestras imágenes, no es necesario que creemos una carpeta nueva, Photoshop CS3 lo hará por nosotros. Para los que tienen Phostoshop en inglés la carpeta se llamara images, para los que tiene el Photoshop en español (como yo) la carpeta se llamará imágenes, por lo cual deberán cambiarle el nombre más adelante, pues no es recomendable tener caracteres latinos (como tildes o ñ) como nombres de los directorios y/o archivos de nuestros sitios Web.
Ahora, si revisan la caperta donde guardaron las imágenes verán todos los pedacitos que ha creado photoshop para nosotros trabajar.
Borremos todas las imágenes que no hayamos nombrado, esas imágenes no nos servirán de nada para lo que necesitamos, así que en conclusión nos quedaremos con las siguientes imágenes:
blog.png
catalogo.png
content-bg.png
content-bottom.png
equipo.png
footer-bg.png
inicio.png
pedidos.png
rayas.png
servicios.png
top-bar-bg.png
Las imágenes del logo y los íconos son parte de los sectores, las debemos tener guardadas totalmente aparte.
¡Y listo! Por ahora los dejo con eso... muy pronto viene la parte 3 de este tema: "div-ing", que debo decir es la más interesante y al final la más importante, pues daremos forma a nuestra página Web.
Para descargar el *.psd y las imágenes haz clic en el botón de abajo.
Una recomendación musical: "Lieber gott" - Marlon
Una cita: "Un píxel hace la diferencia." - Yen
Un libro: "Wiccan" - Scott Cunningham
Después de tanto tiempo al fin publico algo nuevo, la verdad he estado bastante ocupada pero haré todo lo posible por bloggear más seguido. Esta vez voy a mostrarles cómo podemos crear el efecto oro con Photoshop CS3 y cómo editarlo para aplicarlo a cualquier forma o texto.
La idea surgió porque ayer estaba trabajando en el encabezado de una página Web y me pidieron que transformara el logo que muestro abajo al oro.
Recuerdo que yo había recreado el efecto oro magistralmente hacía un tiempo, pero cortesía de mi difunto disco duro ya no tengo el *.psd fuente, así que lo primero que hice fue poner en Google “Efecto oro en photoshop”. Me encontré con un par de tutoriales muy buenos debo decir pero, me di cuenta que el logo que tenía que transformar es demasiado delgado – tanto las formas como el texto – y los tutoriales que encontré en su mayoría utilizaban letras bastante gruesas, el único que utilizaba una forma delgada… digamos que el efecto no me convenció, así que me dije a mi misma manos a la obra, vamos a crear un efecto que me sirva de base para cualquier forma y que sólo necesite ajustar pequeños parámetros para que se vea bien a lo que se lo aplique. Mi meta era eliminar el problema que cuando aplicaba un efecto que me encontraba por ahí mi logo se veía arrugado o muy oscuro… o ni se veía pero bueno, ahora mostraré cómo pasé de se logo plano en blanco y negro a esto:
Empecemos por el principio. Efecto para textos delgados y pequeños, el que llamo efecto básico:
Creemos un *.psd nuevo, en este caso yo utilizaré un lienzo de 750x300 pixeles.
Empecemos primero por el texto delgado. Escribamos algo con un tipo de letra Arial Narrow o cualquier tipografía delgada que nos guste.
Le damos un poco de sombra:
Opacidad 37% > Ángulo 120 > Distancia 4px > Extensión 1% > Tamaño 0px > Ruido 0%
Bisel y relieve: Estilo - Relieve > Técnica - Redondeado > Tamaño - 4px > Profundidad - 1000% > Dirección - Arriba > Suavizar - 0 > Ángulo - 120° > Altitud - 30° > Contorno de resplandor - Cono invertido > Modo resaltado - Superexponer color. Color #FFFFFF. Opacidad 60% >Modo de sombra - Multiplicar. Color #625205. Opacidad 75%
Contorno: Contorno - Desniveles redondeados > Rango - 100%
Superposición de colores: Modo defusión - Normal > Color - #fef5c9 > Opacidad - 100%
Trazo: Tamaño - 1px > Posición - Exterior > Modo de fusión - Normal > Opacidad - 100% > Tipo de relleno - Color > Color - #352d00
Y voilá! Tenemos un texto delgado y pequeño con efecto de oro.
AHORA EDITEMOS ESTE EFECTO PARA LETRAS DELGADAS Y GRANDES...
Lo primero, escribimos ahora un texto más grande con el mismo tipo de letra o algún otro que nos guste. Lo importante es que sea una tipografía delgada. Le aplicamos el estilo anterior.
Lo único que tenemos que hacer ahora es cambiar en el Bisel y Relieve el estilo a INGLETE INTERIOR y cambiar el tamaño a 5px. Podemos jugar también con el color superpuesto si deseamos, pero me parece que ese color está bien.
Y el resultado...
Sobre un fondo negro se ve muy bien...
Y AHORA LETRAS GRUESAS Y PEQUEÑAS
Utilicemos un tipo de letra gordito (en este caso estoy utilizando una letra llamada BROAD) en tamaño pequeño y escribamos otra vez nuestro texto y le aplicamos el efecto básico (el de las letras finas y pequeñas).
En el BISEL Y RELIEVEcambiemos el color del MODO DE SOMBRA por #514b2e y volvemos a cambiar el tamaño a 5px.
Y una vez más tenemos un resultado muy bueno...
Y en fondo negro se ve genial...
POR ÚLTIMO VEAMOS LAS LETRAS GRUESAS Y GRANDES
Utilicemos la misma tipografía (en mi caso BROAD) en un tamaño más grande y le aplicamos el efecto básico.
En el BISEL Y RELIEVE cambiamos el color del MODO DE SOMBRA a #a8a079 y el TAMAÑO a 16px.
Y para darle un poco más de delicadeza al asunto ajustemos un poco las sombras.
Distancia - 7px
Extensión - 19%
Tamaño - 10px
Y el resultado es...
Y en negro...
Y por cualquier duda... puedes descargar el *.psd
Bueno, espero que este tutorial les sirva de mucho como me ha servido a mi y espero sus comentarios.
Una recomendación musical: “Fast cars and freedom” – Rascal Flatts.
Un libro: Araica - Yen Howell
Una cita: "La vida es cambiar. La mía es cambiar la de los demás." - Yen Howell
