Share
Este tutorial lo guiará a través del proceso e ideas detrás del diseño de un sitio web profesional con un toque original en Photoshop. El tutorial se leerá como una novela de "elige tu propia aventura" con la esperanza de que fomente la creatividad y la singularidad de tu diseño con un poco de consejos e instrucciones en el camino. Tiempo de Aventura!
Una cosa que notará a medida que avance en este tutorial es la facilidad con que este sitio web se puede transformar en un blog sobre diseño, la página de inicio de una compañía de software o una comunidad de código abierto. Todos los módulos de las barras laterales derecha e izquierda podrían intercambiarse y moverse con facilidad y el contenido está diseñado para ser flexible.
A lo largo de este tutorial, verá un gran énfasis en los principios de diseño y métodos útiles de Photoshop para mejorar su flujo de trabajo y diseño de sitios web. Si bien este sitio tiene su propio estilo, el objetivo principal de este tutorial no es replicar ese estilo exactamente, sino que la esperanza es que obtenga una mejor perspectiva del diseño web en Photoshop que pueda mejorar su enfoque y acelerar su producción..
Echa un vistazo a la imagen que estaremos creando..
Si aún no lo ha hecho, pase a 960.gs y familiarícese con el sistema de grillas 960 y por qué será tan útil para este tutorial. Mientras esté allí asegúrese de descargar la plantilla..
Una vez que haya descargado el archivo, descomprímalo y abra "960_grid_12_col.psd" que se puede encontrar en 960_download> Plantillas> Photoshop. Cuando abra el archivo, será evidente la rapidez con que esto le permitirá crear y mantener la estructura en sus diseños web. Tome nota especial de las líneas de guía, ya que le permitirán crear objetos que se alinean perfectamente con la cuadrícula.
Si sigue las guías hasta la regla, entonces puede ver claramente las dimensiones exactas de los píxeles de la cuadrícula, con columnas de 60 px de ancho y 10 px en cada lado (creando 20 px entre cada columna). Si no ve la regla o no desea deshacerse de ella, puede cambiarla con Comando + R.
Las guías son casi abrumadoras; Una vez que comiences a diseñar, realmente se interpondrán en el camino. Puede alternarlas haciendo clic en Ver> Extras o simplemente usando el atajo Comando + H.
Necesitará más espacio en su lienzo para este tutorial. Expanda el lienzo (Comando + Alt + C) a 1400px por 1340px. Puede eliminar todo excepto la capa de fondo. Haga doble clic en la capa de fondo y presione Aceptar para desbloquearla. Renombrarlo como "BG".
Guarde (Command + S) este archivo como "my_web_tut01.psd" en su propia carpeta llamada "my web tut" Después de cada paso en este tutorial, debe presionar Command + S y cada par de pasos presione Command + Shift + S y guarde una nueva copia "my_web_tut02.psd", "my_web_tut03.psd", etc ... El ahorro parece ser una obviedad para muchos diseñadores, pero he descubierto que todavía no impide que muchos profesionales se desanimen..
OK, has preparado el lienzo, ahora necesitas dibujar en el fondo y en el área superior. Arrastre en la regla superior para crear una nueva guía; bajarlo a 120px. Este será el límite inferior del espacio del encabezado. Derriba dos guías más a 130px y 140px. Ahora hay el mismo ancho de espacio entre el encabezado y el contenido que tenemos entre las columnas. Está empezando a parecer una cuadrícula adecuada!
Use la herramienta Rectángulo (U) para dibujar un rectángulo negro en el área del encabezado. Esto supone que tiene el conjunto de negro predeterminado como color de primer plano, de lo contrario, simplemente puede presionar D para restablecerlo. Comience su rectángulo fuera del lienzo a lo largo de la guía y termínelo también hacia el otro lado. El beneficio de extender este elemento es que no verá ningún efecto aplicado al perímetro que puede aplicar al borde inferior de su rectángulo, como un trazo, brillo interno, etc. Nombre de su rectángulo "Encabezado BG. "
Es hora de empezar a bloquear tu grilla. Este diseño consta de tres columnas de contenido: la barra lateral izquierda abarcará tres columnas, el contenido central / principal abarcará siete columnas y la barra lateral derecha abarcará dos columnas.
Si bien funciona bien para que el encabezado ponga pautas, el resto del diseño será un proceso más fluido, por lo que no estará dibujando guías horizontales entre cada sección. ¡No desesperes! Aún podrá lograr un espaciado perfecto de píxeles presionando Mayús + Teclas de flecha mientras tiene seleccionada la Herramienta de movimiento (V). Cada vez que hagas eso, la capa seleccionada se moverá 10px.
Va a crear esquinas redondeadas para este diseño. Las esquinas redondeadas hacen que su contenido esté muy visible. Mira hacia atrás a la imagen final; ¿nota cómo en el módulo "Feed de Twitter" hay muchas cajas dentro de una caja con esquinas redondeadas? Ahora, considere si las esquinas eran todas nítidas: el "Feed de Twitter" no se sentiría como un solo módulo..
También debe tener en cuenta que los colores, degradados y fuentes ayudan a que esto sea una entidad definida, pero las esquinas redondeadas definitivamente ayudan. Además, tenga en cuenta que solo porque las esquinas redondeadas funcionan para este diseño, hay miles de sitios hermosos que no usan esquinas redondeadas. Echa un vistazo a Psdtuts + - cada rincón está afilado; sin embargo, otras estrategias como el contraste y los trazos se utilizan para mantener el diseño claro. Se puede encontrar más información aquí y aquí.
¡Basta de charla de diseño! Seleccione la herramienta Esquinas redondeadas y establezca el radio de la esquina en 8px. Dibuja un cuadro en la parte superior de las columnas izquierda y derecha; Date un poco de espacio para agregar contenido más tarde.
Primero, cree un área de texto en el área de contenido central / principal y rellénela con un trazador de líneas como en la imagen final. Use la fuente Rockwell u otro slab-serif en 40pt con 48pt adelante (Altura de línea). Rockwell se puede descargar aquí.
A continuación, agregue un poco de texto ficticio a continuación y establezca en Verdana en 12 puntos con 20 puntos iniciales. También agregue un par de subencabezados que sean Verdana Bold en 17 puntos con 30 puntos iniciales.
Ahora que tienes los detalles, hablemos de tipografía. Una regla general que encontrará repetida en toda la comunidad de diseño web es que un sitio web solo debe utilizar dos fuentes. En este diseño he elegido usar las fuentes Rockwell y Verdana. Verdana es una fuente segura para la web, mientras que Rockwell no lo es. Debido a esto, todas las instancias de Rockwell deberán ser imágenes cuando este diseño se convierta a XHTML / CSS.
Esto significa dos cosas para ti. Primero, para mantener el tiempo de carga bajo, debe considerar un uso mínimo de fuentes no seguras para la web. La imagen final contiene menos de diez instancias de Rockwell, la mayoría de ellas se sientan sobre algún elemento gráfico como un botón que ya será una imagen cuando se codifique. En segundo lugar, puede agregar efectos como sombras y degradados al texto. Estas dos razones se combinan con la inclusión de Rockwell, que es la más adecuada para los elementos tradicionalmente más decorados de un diseño como encabezados, títulos y botones..
Hay una última consideración que puede o no aplicarse a su diseño y que tiene en cuenta cualquier trabajo futuro de optimización de motores de búsqueda (SEO). Los bots de Google no rastrean y analizan todo el texto basado en imágenes (cualquier instancia de Rockwell para este diseño web). Esto significa que tendrá que diseñar para que haya un montón de fuentes seguras para la web donde Google pueda recoger palabras clave..
El siguiente punto sobre tipografía y diseño web en general es consistencia! Si usa Rockwell para un botón, ¡utilícelo para todos los botones! Si haces algunos enlaces rosa, haz todos los enlaces rosa! Ser consistente permitirá que su diseño se vea nítido y cohesivo.
Por último, unas palabras sobre usabilidad y tipografía. Tu copia necesita espacio para respirar, dale una altura de línea decente y notarás un mundo de diferencia. El sitio ilovetypography.com sugiere que la altura de su línea debe ser al menos el 140% de su tamaño de fuente. Además, debe tener en cuenta que un área de texto más ancha que 600px es una tensión en los ojos, pero si va a ampliar, sería una buena idea aumentar la altura de la línea proporcionalmente. Siempre hay más que aprender acerca de la tipografía: aquí es un buen comienzo.
Blanco y negro es aburrido, es hora de algo de color! Los colores de este diseño están inspirados en el tema Hash One Wordpress
Podría mostrarle cómo crear una muestra personalizada para cargar con los colores de su sitio, pero no uso esto yo mismo. En su lugar, utilizando la herramienta rectángulo, puede dibujar una cuadrícula de cuadrados grandes en los márgenes de su lienzo y rellenarlos con los colores que usará. Encuentro este método más rápido y más accesible..
Los colores seleccionados proporcionan un gran contraste para dar un poco de profundidad al sitio web. Siéntase libre de usar cualquier combinación que desee, pero, tenga en cuenta el contraste, la legibilidad y las armonías al elegir sus colores. Si tiene problemas con sus colores, intente utilizar el Diseñador de combinaciones de colores.
Los colores de este tutorial son (de izquierda a derecha, de arriba a abajo):
Agregue todos estos rectángulos a una carpeta y asígnele el nombre "SWATCHES". El uso de mayúsculas para los nombres de carpetas hace que sea más fácil encontrar capas de carpetas cuando las capas comienzan a confundirse. Ahora también sería un buen momento para iniciar las carpetas "HEADER", "LEFT SIDEBAR", "MAIN CONTENT" y "RIGHT SIDEBAR". Otra buena práctica es colorear las capas para mejorar el flujo de trabajo. Simplemente haga clic derecho en el ícono del ojo al lado de cada capa para seleccionar un color.
Los gradientes pueden realmente mejorar tu diseño; Sin embargo, si no tienes cuidado, los gradientes pueden deshabilitar tu diseño. Aquí está mi sugerencia: volverse loco con sus gradientes, solo haga que todos sean muy sutiles.
Haga doble clic en la capa "Encabezado BG" y seleccione Superposición de degradado. Haga clic en el degradado que aparece para abrir el Editor de degradado. Elimine todas las muestras, excepto las dos primeras, de primer plano a segundo plano y de primer plano a transparente. Ahora cree un degradado desde el gris más oscuro al gris medio y presione nuevo para agregarlo a los ajustes predeterminados. Repita esto hasta que tenga ocho gradientes nuevos: cuatro oscuras a medias y cuatro medias a oscuras. Haga clic en guardar para guardarlos en una nueva carpeta llamada "Activos". Luego colóquelo en la carpeta raíz de este proyecto. Ahora, cuando vuelva a este proyecto o tendrá todos los gradientes allí mismo.
Para la capa "Encabezados BG", use el degradado medio a claro de las muestras de color gris oscuro.
Para su gradiente en la capa "BG", querrá crear un gradiente un poco más complejo. En realidad, habrá dos gradientes en el gradiente "BG". Cuando llegue el momento del código, serán archivos de imagen separados, pero para nosotros solo necesitamos hacer un degradado complejo.
¿Observa cómo hay una pequeña sección del degradado que va a ser del mismo color? Este será el color de fondo de su archivo HTML y permitirá que la página web crezca, pero el gradiente en la parte superior se mantendrá en la parte superior y el degradado en la parte inferior se mantendrá en la parte inferior..
Photoshop es un programa increíble, pero si descubro que está creando logotipos en Photoshop, le informaré a Adobe. Los logotipos deben crearse en un programa vectorial; para este tutorial usaremos Illustrator.
Abra un nuevo archivo en Illustrator y cree su logotipo (Nota: en proyectos reales, nunca debe comenzar su diseño web antes de tener un logotipo). Si bien el logotipo en este ejemplo utiliza Rockwell, tener una tercera fuente para su logotipo no es una gran preocupación. Guarde su logotipo en la carpeta "Recursos" donde colocó el archivo de gradiente.
Una vez que tenga este logotipo, debemos traerlo de vuelta a Photoshop para darle un toque de estilo. Simplemente coloque Illustrator y Photoshop uno junto al otro y arrastre las piezas de su logotipo a Photoshop. Ya que cada pieza tendrá un estilo único, arrastrarlas individualmente en lugar de en conjunto ayudará cuando empieces el estilo.
Para alinear las piezas separadas, traiga una versión de todo el logotipo, baje la transparencia y úselo como una guía para hacer coincidir. Bórralo cuando hayas terminado. Presione Mayús y haga clic en todas las capas del logotipo y presione Comando + G para agruparlas en una nueva carpeta. Cambie el nombre de esta carpeta "LOGO" y colóquela dentro de la carpeta "HEADERS".
Cada pieza se transformará automáticamente en un objeto inteligente. Esto significa que seguirán actuando como un objeto vectorial como en Illustrator: puede usar la Herramienta de transformación (Comando + T) libremente sin perder calidad.
Después de que hayas dimensionado y colocado tu logotipo, deberás diseñarlo. Use los degradados que creó antes para darle cierta profundidad al logotipo: mezcle los colores, pero mantenga el color más oscuro de los degradados en la parte inferior para las dos palabras..
A continuación agregue una sombra a una de las piezas. Establezca el modo de fusión en Multiplicar al 100%. Asegúrese de tener seleccionada la opción de luz global y ajústela a 120 grados, con una distancia de 1px, 0% de propagación y tamaño de 1px. Al habilitar Global Light, establecerás todos los efectos con sombras para que tengan el mismo grado. - recordar consistencia, consistencia, consistencia!
He leído sobre personas que muestran cómo copiar y pegar el estilo de una capa, aunque es un buen método para las capas que están muy alejadas, aquí hay algunas formas rápidas de mover y duplicar efectos. Al igual que cuando quiere multiplicar una capa en el lienzo y en la Paleta de capas, mantenga presionada la tecla Alt y arrastre una nueva copia de esa capa: puede duplicar los efectos con el mismo método.
Alt-arrastrar en el fx Símbolo en la capa de origen a la nueva capa y reemplazará la nueva capa con todos los efectos de la primera capa. Sin embargo, si solo desea duplicar la sombra paralela, en lugar de la fx y luego presione la tecla Alt y arrastre el efecto individual a una nueva capa y solo reemplazará ese efecto o lo agregará si la nueva capa no lo tiene habilitado. Use este método para asegurarse de que todas las capas del logotipo tengan la misma sombra paralela.
Seleccione la capa "Encabezado BG". Abra los efectos y agregue un borde negro de 1px con la posición establecida en Interior. A continuación, dale un brillo externo que tenga el modo de mezcla: Multiplicar, Opacidad al 40%, Color de negro y Tamaño de 9px.
Vuelva a Illustrator y cree algunas formas interesantes y creativas que se utilizarán como fondo claro para el área del encabezado. Colorea las formas en blanco, arrástralas a Photoshop, configura su modo de fusión en Pantalla y su Opacidad en cantidades variables de 2 a 10%. Eche un vistazo a la imagen final, notará que hay muchos círculos y trazos de círculos utilizados, todos estos fueron creados en Photoshop. Para las formas más complejas, Illustrator es más rápido, pero para los círculos realmente ahorrará tiempo con solo crearlos en Photoshop.
Ahora haremos un círculo con solo el trazo blanco que se muestra en Photoshop. Crea un círculo negro con la herramienta Elipse, luego abre los efectos para esa capa y dale un trazo blanco. Cierra los efectos y luego configura el Modo de fusión en Pantalla, verás que todo, pero el trazo blanco desaparece. La mayor ventaja de esto es la capacidad de cambiar el ancho del trazo simplemente abriendo los efectos y editándolo.
Pasa un poco de tiempo jugando con esto, experimenta con diferentes opacidades y composiciones; crea algunas formas extravagantes que pueden ayudarte a individualizar este diseño. No se preocupe si algunas de sus formas son visibles debajo del encabezado, nos ocuparemos de esto en el siguiente paso..
Seleccione todas las formas y colóquelas en una carpeta sobre la capa "Encabezado BG". Comando-clic en la máscara vectorial (el recuadro gris) de "Encabezado BG" para ver el encabezado completo seleccionado en el lienzo. Ahora, seleccione la carpeta que acaba de crear y haga clic en el pequeño botón en la parte inferior de la ventana de capas llamada "Agregar máscara de capa"
El enmascaramiento es algo que realmente no veo lo suficiente en mi práctica profesional, es muy útil y rápido, y la mejor parte es que es un método no destructivo. Tenga en cuenta que podría haber acortado las formas en una capa y eliminado el área que sobresale. Pero luego quisiste cambiar alguna parte de la composición o el trazo en uno de los círculos: el enmascaramiento hace retroceder y hacer cambios más rápido.
Debajo de la cabecera, verás algunos gráficos que se asemejan al revés. Utilizando sus colores de muestra y jugando con la transparencia, puede lograr este aspecto. Eventualmente, estos deberán ser ajustados para formar un mosaico horizontal..
Consideremos por un segundo estos y el resto de los elementos no funcionales del diseño. Hay una cantidad decente de, bueno, solo algunos gráficos al azar. ¿Qué aporte estos aportan al diseño? Primero, los gráficos como este son una excelente manera de dirigir la sensación y el estado de ánimo de un sitio web, una excelente manera de ayudar a que una marca se propague.
Si bien casi no tengo la experiencia para explicar la marca, intentaré darle un resumen rápido para que pueda poner todo esto en perspectiva. Una marca es todo sobre una empresa que un consumidor siente: las emociones, los recuerdos, los sonidos, los colores, las experiencias, etc. Marty Neumeier, en su libro The Brand Gap explica claramente que "Una marca no es lo que usted dice que es. Es lo que ellos dicen que es ". Entonces, ¿qué tiene todo esto que ver con los gráficos? Bueno, si bien no puede crear una marca, puede ayudarlo a crecer en la mente de un cliente proporcionando continuamente imágenes que evocan la esencia de su empresa..
OK, así que eche un vistazo a la imagen final, ¿qué le dice acerca de esta empresa? Mi objetivo era hacer que los colores y las formas se tradujeran en una sensación de diversión y diversión, pero la estructura y el diseño estricto de la cuadrícula le dan un sentido de profesionalidad y seriedad. ¿Es esta la marca exacta que toda empresa pretende construir? Ciertamente no, cada empresa debe ser única y cada sitio web debe extraer un aura diferenciada..
Esconde todo menos la capa "BG". El fondo de este diseño está enmarcado por un gran rectángulo redondeado. Esto agrega un poco más de estructura y profundidad a su diseño. Ya que no le dará al contenido principal su propia caja como las barras laterales, este es un buen método para eliminar los gráficos de fondo y mejorar la legibilidad. El rectángulo redondeado blanco tiene un radio de 8px, lo mismo que las cajas, otro detalle de consistencia. Encontrarás más detalles de efectos en la imagen de abajo..
Usando el mismo método que con el encabezado, traiga algunas formas de Illustrator y muévalas para hacer pequeños gráficos. A medida que continúes diseñando, probablemente te encuentres moviéndote con ellos para encontrar una composición que funcione bien. Mezcla tus tonos de colores oscuros y transparencias..
Puede notar que el icono del logotipo se usa mucho, una especie de recordatorio subliminal. Tenía un profesor de cine en la universidad que me enseñó que una imagen, color, etc., debía repetirse al menos tres veces en una película para que un usuario la recordara y le diera sentido. Intento usar ese principio con mi diseño: el logotipo se ha repetido varias veces (con buen gusto y dentro de lo razonable) con la esperanza de que el usuario se familiarice con la empresa y recuerde el icono..
La navegación de este diseño está muy influenciada por mi sitio web favorito actual: aviary.com.
La pequeña gráfica casera y la palabra. Casa son un poco más brillantes y hay un fondo gris más claro detrás de esto, esto es para mejorar la facilidad de uso. ¡Piensa como el usuario! Hágales saber fácilmente en qué página están. Las formas comunes de hacerlo son mediante pestañas, colores, subrayados, resaltados y gráficos adicionales. Piense en estas opciones y sea creativo con su enfoque..
Para enlaces y botones, un estado de desplazamiento es una gran mejora para su facilidad de uso. Vuelve a mirar la imagen final y mira algunos de los enlaces. Un diseño bien pensado considerará cómo se verán y cómo funcionarán. Si no codifica sus propios sitios, use una pequeña imagen de un cursor de enlace para indicar a los programadores lo que está sucediendo. Las funciones ocultas, como un menú desplegable (que se muestra a continuación) deben considerarse y diseñarse completamente. Esperar a encontrar tu hermoso diseño se combina con un menú desplegable que te volverá loco. Si usted es el diseñador, depende de usted considerar todos estos.
La imagen del cursor de enlace se puede encontrar como PNG junto con algunos recursos de diseño más gratuitos aquí.
Te diste cuenta que NUEVO! ¿placa? ¡Acabo de romper una de mis primeras reglas! Bueno, haremos una pequeña excepción para las fuentes de píxeles. Las fuentes de píxeles no tienen suavizado, por lo que son muy nítidas. Esta nitidez a menudo puede ser antiestética para una fuente de tamaño regular, pero las fuentes de píxeles funcionan maravillosamente en tamaños pequeños. Eche un vistazo a lo ilegibles que son Verdana y Georgia en 8pt frente a las fuentes de píxeles, una gran diferencia, sí?
Las fuentes de píxeles son populares en Flash, se cargan más rápido y mantienen esa nitidez, ¡pero también funcionan bien en diseño web! De acuerdo, ahora que conoce las alegrías de las fuentes de píxeles, asegúrese de usarlas con moderación. Para aplicaciones como esta pequeña. NUEVO! credencial funciona bien, pero en su mayor parte no debería usarlas para muchas otras aplicaciones; nadie quiere leer más que unas pocas palabras en una fuente de píxeles. La fuente utilizada en este ejemplo se llama Uni 5063 y se puede descargar de forma gratuita desde Miniml.
Ahora, examine las esquinas redondeadas del menú desplegable. El fondo blanco está hecho de tres rectángulos redondeados. El tercero se ha vuelto del revés con la herramienta de selección directa para hacer una esquina interior redondeada..
Convierta sus barras laterales en blanco y cree guías que le den a cada una de sus barras laterales un relleno de diez píxeles. Agregue todo el texto de relleno que usará y duplique las barras laterales según sea necesario. Para extenderlos o contraerlos verticalmente, use la herramienta Selección directa para seleccionar los cuatro puntos de anclaje inferiores y empujarlos hacia abajo o hacia arriba con el teclado. El siguiente paso es afinar el estilo de todo el texto..
Todo el texto se ha organizado en una jerarquía de importancia y enfoque, y esto se señala a través del estilo de ese texto. El tamaño de fuente más grande y el color más oscuro (lectura: contraste más alto) se reservan para el título de contenido principal. El titular secundario es más grande y más oscuro que el cuerpo principal y el cuerpo principal es más grande que el contenido de la barra lateral, y así sucesivamente. Ten en cuenta que todos los colores son de las muestras. - consistencia!
Ahora que ha organizado todos los cuadros de la barra lateral y el texto está coloreado de manera adecuada, puede comenzar a diseñar los cuadros. Dar a cada uno entrada un degradado de fondo muy claro y use la herramienta Línea para dibujar una línea horizontal en la parte superior del degradado. Estos se separarán visualmente cada entrada. Dale a la caja de la barra lateral una sombra ligera..
Para el fondo del área de título de las secciones de la barra lateral, dibuje un rectángulo debajo del otro estilo / formas y agregue una Superposición de degradado de rosas y un trazo de 1px con un degradado reflejado horizontalmente de rosa a blanco. Luego, asigne a la capa de fondo del título una Máscara de capa con la forma del cuadro de la barra lateral.
Repita estos pasos para todas las cajas de barra lateral que tiene su diseño. Si está interesado en crear el cuadro de registro del boletín, deje espacio para ello y lo cubriremos en los próximos pasos..
Para crear ese pequeño gráfico en la parte inferior de cada caja de la barra lateral, será mucho más rápido si trabajas con Illustrator solo un poco más. Illustrator se configura a menudo para estar en el modo de color CMYK; sin embargo, ya que está diseñando para la pantalla, el modo de color deberá cambiarse a RGB. Cambie a Illustrator y vaya a Archivo> Modo de color de documento> Color RGB. A continuación, tendrá que dibujar el gráfico de pie de página deseado.
Ahora vuelva a Photoshop, seleccione las tres muestras centrales de gris oscuro, rosa y cian, arrástrelas a Illustrator. Utilice la herramienta Cuentagotas (I) en Illustrator para colorear el gráfico como desee. Arrastre el gráfico en Photoshop, tamaño y lugar en consecuencia. También puede agregar algunos efectos, fui con una sombra ligera y una superposición de degradado sutil (negro a blanco, con un modo de mezcla de multiplicación y opacidad del 10%)
La ventaja de este procedimiento es tener un objeto inteligente que ya está coloreado. Si tuviera que arrastrar esto a Photoshop y el intento de colorear las piezas individuales, sería un proceso más largo que requeriría rasterizar el objeto inteligente y crear más de una capa..
No me volveré loco con las ideas detrás de los gráficos y la marca como antes, pero quiero tocar algunos de los gráficos de primer plano en el sitio. En la imagen final hay varios gráficos similares a los del Paso 18, pero son un poco más complejos. Una vez que haya dibujado las formas de su gráfico, abra los efectos y agregue una Superposición de degradado.
Puede ver cómo están ordenados los colores en el degradado para dar la apariencia de una brecha entre los tonos más claros y los más oscuros. Tenga en cuenta que hay varias formas de lograr esto, incluido el uso de rectángulos blancos y máscaras de capa.
Estos gráficos son ideales para encerrar y personalizar íconos. Como el signo de interrogación en la sección del cuerpo principal. Sabías… Cualquier icono o símbolo podría ser colocado allí. Los ejemplos a continuación usan iconos del paquete gratuito Simplicio y muchos más paquetes de iconos gratuitos se pueden encontrar en Icon Pot.
Sorprendentemente, para mí, una de las partes más difíciles del diseño web es crear botones personalizados. Estos botones siguen lo que la comunidad de diseño web ha denominado "Diseño Web 2.0".
Primero, examinemos algunos de los botones en la imagen final. Por coherencia, el texto de cada botón es Rockwell negrita, excepto el botón de inicio de sesión debido a su tamaño pequeño. Rockwell no funciona bien en tamaños tan pequeños. Además, todo el estilo del texto y los botones de fondo son los mismos.
Mirando a continuación el botón ampliado, puede ver algunos de los efectos más de cerca. Muchos de los efectos utilizados son muy comunes para crear ese estilo Web 2.0, especialmente un trazo de 1px alrededor del botón, sombras en el texto y el cuadro, iconos, algo para dar la impresión de 3D y degradados. Puedes ver que el botón Síguenos usa todos estos. Para crear el efecto 3D, se aplicó una Sombra de caída interior al cuadro de fondo. Mire detenidamente y verá que el texto tiene una sombra brillante muy marcada, lo que crea la misma impresión que si tuviera que duplicar el texto. Colorea la copia inferior en negro y muévela hacia abajo y hacia la derecha un píxel.
No sientas que hay una forma correcta o incorrecta de crear botones. Eche un vistazo a lo que hay alrededor de la Web, juegue con algunos de los efectos y decídase por algo que crea que parece un botón y es una combinación atractiva para el diseño web en el que está trabajando..
Tan importante como es que su diseño web siga la cuadrícula, de vez en cuando romper la cuadrícula aquí y allá puede ayudar a darle cierto carácter a su diseño. El lugar principal donde se rompe la cuadrícula en este diseño web es en el área del encabezado cerca del logotipo. Este mashup gráfico facilita la tensión de la estructura de la cuadrícula y le da al sitio una sensación más divertida y diferenciada. Cabe señalar que el diseño y el contenido rompen la cuadrícula visualmente en esta área. La descripción de la compañía se adhiere a la columna, pero se divide en la fila y los gráficos son casi aleatorios en su ubicación. El mashup gráfico se compone de formas, degradados y sombras paralelas; deberías estar muy familiarizado con estos por ahora :)
Otro lugar donde se rompe la cuadrícula es abajo en el registro del boletín con una cinta de cinta pequeña y moderna. La envoltura no hace mucho para romper la cuadrícula visual, pero le da al contenido un poco más de espacio para empujar los márgenes del contenido
Accentsconagua