Como hacer un diseño de pagina web en photoshop

Inicio » Como hacer un diseño de pagina web en photoshop

De photoshop a la página web

Cuando empiezo a diseñar un sitio web, suelo crear un nuevo documento de Photoshop de 990 píxeles de ancho. Esto se debe a que 990 píxeles es casi lo máximo que se puede hacer en una página web sin que aparezca una desagradable barra de desplazamiento horizontal en un navegador de Microsoft Windows dentro de las limitaciones de una pantalla de 1024 x 768 píxeles (la resolución de pantalla más popular en el momento de escribir este artículo).

Cualquiera que utilice un Mac de Apple sabe que la anchura de la ventana del navegador es mucho más fluida, pero como los usuarios de Mac son una minoría, el diseñador del sitio web debe trabajar pensando (principalmente) en los usuarios de PC, a menos que se sepa que el público es de Mac.

Hay que hacer frente a muchas concesiones de este tipo cuando se diseña para Internet. Uno de estos campos de batalla suele ser el de los expertos en usabilidad web como Jacob Nielsen frente a los diseñadores intransigentes.

Como se puede ver en las capturas de pantalla (figura 2), aunque ampliemos la resolución de la pantalla a 1280 x 800 píxeles, aunque obtengamos mucha más anchura, la altura disponible permanece prácticamente inalterada. Y cuantas más barras de herramientas y funciones se añaden en la parte superior de la ventana del navegador, menos espacio vertical del sitio web obtenemos.

Maqueta del sitio web en photoshop

En este tutorial de diseño web en Photoshop, vamos a diseñar una maqueta de un sitio web impresionante, limpio y profesional en Photoshop. El diseño que estamos haciendo en este tutorial puede ser utilizado como diseño de sitio web personal o corporativo. Este diseño es bastante fácil de usar, por lo que debería ser excelente para la reputación de su sitio.

Presionando “M”, elija la Herramienta Marquesina Rectangular y cree una caja que tenga 120px de ancho desde la esquina izquierda del lienzo. Puedes ajustar el tamaño mirando en el panel de información mientras haces la selección. Ahora haz clic en la regla de la izquierda y arrastra una guía a la derecha de la selección de la marquesina como se muestra en la imagen de abajo.

También puede ajustar estas opciones en la barra de opciones cuando la herramienta Tipo es la herramienta activa. 8 Haga doble clic para abrir el cuadro de diálogo Estilo de capa. Seleccione Superposición de degradado, haga clic en el Editor de degradado y utilice la configuración como se muestra a continuación.

9 Coloque la capa de tipo “SMASHING” a la distancia de 35px de la parte superior y 0px de la guía izquierda. Puede hacer esto con precisión usando la Herramienta de Movimiento (V) y sus teclas de flecha. Duplique esta capa de tipo (Capa > Duplicar capa).

Diseño web adobe

Este año ha habido varias tendencias nuevas en la comunidad del diseño, así como la popularización de algunas técnicas que ya existen desde hace algunos años. Una de esas tendencias ha sido la utilización del diseño plano y casi plano. La técnica más común ha aparecido tanto en el diseño móvil como en el diseño web. Si no estás familiarizado con la tendencia o las diversas posibilidades que puede producir, entonces deberías ver mi escaparate de 20 hermosos diseños planos para web y móviles.

Integrar el diseño plano en tu trabajo es una gran idea, especialmente si buscas hacer algo diferente. El estilo simple puede ayudar a que tu diseño no sólo se vea renovado sino también limpio, lo que siempre es un aspecto importante para el diseño. Si siempre has querido abordar el diseño plano, el tutorial de hoy es para ti. El siguiente tutorial le guiará a través de la creación de su propio sitio web utilizando el diseño plano, así que vamos a empezar.

Abre tu programa Photoshop y crea un nuevo archivo yendo a Archivo > Nuevo o simplemente pulsando Ctrl + N. Cuando se abra el menú de diálogo, deberás darle a tu nuevo lienzo las dimensiones de 1360px x 1979px. Pulsa Ok.

Diseñar un sitio web en photoshop

Si quieres aprender más sobre diseño web o mejorar tus habilidades, seguir tutoriales detallados paso a paso puede ser un gran uso de tu tiempo. Aunque hay muchos recursos y cursos en los que puedes pagar para aprender diseño, también hay muchos tutoriales de calidad disponibles de forma gratuita.

En este post, mostraremos 48 tutoriales diferentes que creemos que son los mejores para mostrarte cómo diseñar sitios web en Photoshop. Encontrarás tutoriales que enseñan a diseñar todo tipo de sitios y en una amplia variedad de estilos de diseño. Encuentra unos cuantos que te gusten, trabaja con ellos y seguro que aprenderás al menos algunas cosas nuevas que podrás poner en práctica en tu propio trabajo de diseño. Muchos de los diseñadores web, codificadores, y otras personas eligen photoshop para obtener sus sitios web diseñados de la manera que quieren.

Los sitios de una sola página son una opción popular para los sitios web de portafolio, y este tutorial le muestra cómo diseñar un excelente diseño de una sola página. Algunas herramientas sencillas de photoshop permiten diseñar una página web maravillosa, limpia y personalizada que se puede personalizar fácilmente según las preferencias del cliente. Los diseños web retro de una página son los más comunes y ampliamente utilizados para mostrar productos o servicios sorprendentes en la página principal de su sitio web.

Ir arriba