Photoshop para diseño web: 20 consejos profesionales

Página 1 de 2: Página 1

Para muchos diseñadores web, Adobe Nube creativa suite, y Photoshop en particular, juegan un papel integral en el proceso de creación del sitio web. Ya sea que estés creando sitio web maquetas o diseñar elementos de sitio individuales, Photoshop es una gran opción.

Aquí hay algunos consejos de diseño web que quizás no sabías que Adobe es venerable editor de fotos fue capaz y puede resultar muy útil para su próximo proyecto.

01. Utilice sistemas de red

Sistemas de cuadrícula para Photoshop



Hay una serie de herramientas que le ayudarán a utilizar cuadrículas en Photoshop.

Los sistemas de cuadrícula pueden ahorrar muchos dolores de cabeza en el diseño web. Intenta usar recursos como Guía de Cameron McEfee Extensión de Photoshop para hacer cuadrículas personalizadas fáciles y precisas.

02. Sácalo todo

Una de las mejores prácticas para el diseño web exitoso (y la administración del tiempo) es colocar todos sus elementos en su lienzo de Photoshop antes de comenzar a ensuciarse con el diseño.

Los diseñadores web a menudo saltan directamente a un área en particular sin considerar el resto de la página y el peso del contenido. Poner el marco preliminar en su lugar desde el principio lo ayudará a tomar decisiones más inteligentes y evitará ediciones más grandes más adelante.

03. Explore los ajustes preestablecidos de documentos personalizados

Ajustes preestablecidos web de Photoshop

Photoshop viene cargado con una serie de ajustes preestablecidos centrados en la web. ¡Échales un vistazo!

Pegar cmd + N para abrir la ventana Nuevo documento. El menú de ajustes preestablecidos contiene ajustes preestablecidos básicos web y móviles, pero le faltan muchas dimensiones comunes para una variedad de sistemas de cuadrícula, banners, dispositivos iOS y Android. Tómese unos minutos para llenar las áreas que faltan.

04. Personalizar el tipo predeterminado

Cierre todos los documentos abiertos. Abra la paleta de caracteres para seleccionar su familia de fuentes, peso, espaciado y color preferidos. ¡No más Myriad predeterminado!

05.Haz tus vectores nítidos

Mantenga sus objetos vectoriales nítidos. Con la herramienta Rectángulo ( U ) seleccionado, abra el menú de opciones de Geometría en la barra de opciones. Marque la opción Ajustar a píxeles.

06. Crea líneas de puntos

Líneas punteadas en Photoshop

Crea líneas de puntos en Photoshop. Es una de esas cosas que siempre tendrás que hacer.

Seleccione la herramienta Pincel ( B ), luego abra la paleta Pinceles preestablecidos, seguida del menú desplegable en la esquina superior derecha. Seleccione Pinceles cuadrados y presione Agregar.

Ahora seleccione el pincel Hard Square 1 Pixel. Cambie a la paleta Pinceles y presione Forma de la punta del pincel, ajustando el Espaciado al 300%. En tu lienzo, aguanta Cambio mientras arrastra el pincel horizontal o verticalmente para crear una línea de puntos nítida.

07. Envuelva el texto fácilmente

Con una solución rápida, Photoshop puede aplicar funciones de ajuste de texto similares a las de InDesign. Seleccione la herramienta Rectángulo ( U ). En la barra de opciones, establezca el relleno en Trazados, establezca la forma en la herramienta Rectángulo y seleccione 'Agregar al área de trazado' (o presione + ).

En su lienzo, dibuje un rectángulo grande sobre el área de contenido. De vuelta en la barra de opciones, cambie 'Agregar al área de la ruta' a 'Restar del área de la ruta' (o presione - ). En su lienzo con el contorno del rectángulo original a la vista, dibuje un rectángulo de intersección donde se ajustará el texto.

Seleccione la herramienta Texto ( T ) y haga clic dentro del rectángulo grande para convertir la forma en una ruta de trabajo de texto para rellenar con texto. Puede refinar aún más las dimensiones de la ruta de trabajo de texto con la herramienta Rectángulo ( U ) y la herramienta Selección directa ( A ).

08. Cree rellenos de color rápidos

Relleno rápido de Photoshop

Ciertos comandos de teclado resultan útiles una y otra vez. El llenado rápido es uno de ellos

Pegar alt + Eliminar para rellenar texto, formas y capas con el color de primer plano seleccionado. Prensa cmd + Eliminar para rellenar un área con el color de fondo seleccionado. Pegar D para volver al blanco y negro predeterminado, y presione X para intercambiar los colores de primer plano y de fondo.

09. Mantente organizado

Usar cmd + G para agrupar capas y ayudarlo a mantenerse organizado y concentrado. Agrupar sus áreas de contenido y componentes, como navegación, áreas de contenido destacado, componentes de apoyo y pies de página, por separado, le ahorrará dolores de cabeza durante todo el proceso de diseño y desarrollo de un proyecto.

10. Sea inteligente

Usando objetos inteligentes (vaya a 'Filtro> Convertir para filtros inteligentes', y control o botón derecho del ratón 'Capa> Convertir en objeto inteligente') sabiamente puede impulsar su flujo de trabajo durante todo el proceso de diseño. La conversión de fotografías y objetos vectoriales más grandes en objetos inteligentes conserva la calidad de imagen original después de escalar, rotar e inclinar.

Página siguiente: 10 consejos más de diseño web para Photoshop ...

  • 1
  • 2

Página actual: Página 1

Siguiente página Página 2