7 consejos de Photoshop para diseñar sitios web limpios y modernos
El diseño web limpio, elegante y hermoso a menudo es una cuestión de perspectiva personal. Veo cientos de sitios web cada semana, y varios de ellos se destacan para mí, pero no todos son necesariamente efectivos.
Con demasiada frecuencia, los diseñadores reducen demasiado el concepto, produciendo un diseño final que no es más que texto y una grilla. Si bien estos diseños minimalistas tienen su atractivo estético, en particular cuando se combinan con una excelente tipografía, corren el riesgo de no ser conocidos.
Dejando a un lado las opiniones personales, hay ciertas características de un diseño que le permiten ser etiquetado con orgullo como limpio o moderno y mejorar su usabilidad y simpatía a un nivel universal. La simplicidad no es una tendencia de diseño, sino más bien un atributo de buen diseño.
Photoshop nos otorga un conjunto versátil de herramientas para crear profundidad e interés, y nos invita a integrar detalles sutiles donde dejaríamos un espacio en blanco. Solo necesita un puñado de estas herramientas para infundir las cualidades del diseño moderno en un diseño. Al dominarlos, puede crear diseños limpios que expresen la funcionalidad de manera clara y efectiva.
1. Espacio
El espacio en blanco permite la separación visual de los elementos de diseño sin el uso de cajas, líneas o gráficos adicionales y es posiblemente el aspecto más importante del diseño moderno. Es esencial para la presentación de contenido y la legibilidad. Cuando se usa correctamente, el espacio en blanco le da a su diseño una sensación limpia y elegante.
Las guías y grillas están disponibles en Photoshop para ayudarlo a posicionar los elementos con precisión. La cuadrícula se superpone a todo el documento, mientras que las guías se pueden configurar de forma manual. Utilice las pautas al principio para establecer bordes invisibles, márgenes y relleno utilizados para definir su espacio en blanco.
Cree una guía presionando Ctrl + R (Win) o Cmd + R (Mac) para habilitar la regla y luego haga clic en la regla superior o izquierda para arrastrar una línea guía hasta la posición deseada. Aquí hay algunos atajos adicionales para ayudarlo a administrar guías mientras trabaja:
- Para mover una línea guía: Ctrl (Win) o Cmd (Mac) y haga clic en la guía
- Mostrar / Ocultar guías: presiona Ctrl +; (Win) o Cmd +; (Mac)
- Mostrar / Ocultar la grilla: presiona Ctrl + '(Win) o Cmd +' (Mac)
Active sus Smart Guides en Ver> Mostrar> Smart Guides . Las guías inteligentes aparecen automáticamente cuando dibuja una forma, alinea un texto o crea una selección o diapositiva, y le ahorrará el trabajo de establecer pautas para estos elementos con anticipación.
Alinear objetos utilizando guías y cuadrículas hace que su diseño sea más fácil de digerir y le dará al resultado general un aspecto más pulido.
2. Profundidad
La profundidad creada con luz y sombra hace que tus elementos se vean nítidos y reales. Los efectos de sombras se pueden aplicar a cualquier objeto, selección o capa de texto, pero el truco es elegir un color que coincida con el fondo y renunciar al negro predeterminado.
No todas las sombras deben estar oscuras. Combine el efecto Inner Shadow con un Drop Shadow de color blanco o claro para crear una sensación de hundimiento o de "tipografía" con texto o campos de formulario.
3. Detalle
Tanto la herramienta de degradado como los efectos de la capa de degradado juegan un papel importante en el diseño limpio y moderno. Los degradados están presentes en todos los aspectos del estilo moderno, desde sombras y reflejos hasta fondos y botones.
Para acceder a la herramienta de degradado, presiona Shift + G. Para crear un degradado, haga clic en el lienzo, arrastre y suelte. Esta herramienta se usa mejor para áreas grandes como fondos, luces o sombras radiales. Cuando se trabaja con elementos individuales como secciones, botones o íconos, el efecto de la capa Superposición de degradado es un medio más eficiente de establecer estilos de superficies o texturas. Se accede a esta herramienta haciendo doble clic en la capa del elemento y seleccionando la casilla "Superposición de degradado".
Use este efecto para dar una dimensión sutil a sus botones y barras de navegación, o para imitar el estilo y la textura del papel o los metales.
4. Definición
Al sobredefinir bordes y bordes, se asegura que sus elementos tengan el contraste adecuado.
El efecto de la capa Trazo delineará elementos como texto o botones donde se necesita un contorno igualmente ponderado en todos los lados. El uso de este efecto liberará las sombras internas y paralelas para extender tus opciones.
Es tentador dirigirse a la herramienta Pluma para dibujar líneas rectas y reglas horizontales, pero si desea aplicar degradados o sombras a la línea, es más fácil usar la Herramienta de Marcado de una sola fila, que está metida discretamente detrás de la Herramienta Rectangular Marquee . Utilice la herramienta Fila única en una nueva capa y una sombra paralela blanca o de color claro para crear líneas resaltadas a lo largo de los bordes de la sección o separadores donde no podrá aplicar un efecto al elemento mismo.
5. Interés
Limpio y moderno no necesita ser igual a aburrido, blanco o minimalista. El uso inteligente de la textura y el patrón hará que su diseño se destaque, al tiempo que comunica estilo y marca. Utilice técnicas sutiles como agregar ruido (Filtro> Agregar ruido) o el efecto de la capa Superposición de texturas en áreas de fondo o elementos de la interfaz para ayudar a diferenciarlos. Cuanto más real y claro aparece un elemento, más atractivo resulta para el espectador.
6. Perspectiva
La perspectiva es la técnica más subutilizada en el diseño web moderno simplemente porque las tendencias actuales se centran consistentemente en la simetría y las cuadrículas. Al aplicar perspectiva a las imágenes y elementos en su diseño, puede introducir profundidad, dimensión, modernismo e interés en su diseño en un simple paso.
Se puede dar perspectiva a cualquier forma o imagen eligiendo la opción "Ruta de Transformación Libre" en el menú del botón derecho y haciendo clic en el botón "Deformación" ubicado en la barra de opciones de la herramienta.
La ilusión de perspectiva también puede producirse creando formas o marcos asimétricos y utilizando gradientes y sombras de manera apropiada para separar los objetos.
7. Legibilidad
El tipo fuerte es muy querido en la comunidad de diseño, y un componente aún más fuerte del diseño limpio. Puede reemplazar las imágenes y los gráficos que de otro modo podrían complicar demasiado un diseño y transmitir la esencia total de las técnicas anteriores de una manera simple y directa.
Para agregar texturas al texto, primero conviértalo en Objeto Inteligente haciendo clic derecho en la capa y seleccionando "Convertir en Objeto Inteligente". Estás limitado a los efectos de capa por defecto a menos que el texto esté rasterizado, una práctica que quieres evitar. incluso cuando se diseña para la pantalla. Conversión a objetos inteligentes le permite aplicar filtros y otras técnicas al texto mientras conserva sus capacidades de edición en caso de que necesite cambiar lo que dice el texto más adelante.
Recuerde que tiene opciones de seguimiento y kerning disponibles cuando configura elementos de texto. Incluso si el texto está destinado a ser reproducido en CSS, primero debe experimentar con el espaciado entre líneas y letras para visualizar mejor cómo aparecerá su contenido dentro del espacio que le ha asignado. Además, recuerde usar texto "nítido" o "nítido" para conservar la definición y la claridad.
Cómo presentas tu contenido en un diseño limpio es más importante que cualquier otro estilo simplemente porque hay menos actividad visual para distraer al espectador. Al usar los consejos anteriores para espaciar el texto y los objetos de forma adecuada, agregar definición e interés, y establecer el contenido aparte de la interfaz, su diseño logrará una efectividad óptima.
¿Qué piensas de estos consejos y tienes otros que usas con regularidad? Por favor comparta abajo ...