Crea un diseño psd en photoshop. Errores comunes al crear un diseño de página web. como se hace

Cacoo te permite crear diagramas en línea. Es una herramienta completamente gratuita que le brinda la posibilidad de crear wireframes, diagramas y UML utilizando un navegador web y aplicaciones.

Gliffy admite la creación de wireframes de aplicaciones y sitios web gratuitos. Puede utilizar Gliffy en la web o como complemento para varias aplicaciones de Google y Confluence. También admite la vista previa de estructuras alámbricas HTML5.

MockFlow le permite crear estructuras alámbricas de aplicaciones a través de Internet o utilizando teléfonos inteligentes. La aplicación es capaz de evaluar la usabilidad del diseño.

Tiggzi es una aplicación móvil para desarrollar marcos de aplicaciones y sitios web diseñados para teléfonos móviles. El programa te permite crear aplicaciones para HTML5 y JQuery que se ejecutan en teléfonos móviles. También puedes exportar aplicaciones para Android, IOS y Web Móvil.

Frame Box es una de las formas más sencillas de crear marcos en línea, utilizando herramientas sencillas de arrastrar y soltar. El programa es muy sencillo y no requiere mucho estudio, simplemente puedes sentarte y trabajar.

iPhone Mockup es otra herramienta de estructuración de alambres que te permite crear maquetas para aplicaciones de iPhone. Este programa también es muy fácil de usar; sólo necesitas arrastrar y soltar los elementos necesarios desde la barra de herramientas.

Pencil Project es otra aplicación de gráficos que le permite crear esquemas para sitios web y admite la exportación de esquemas en varios formatos, como HTML, PNG y PDF.

iPlotz es una herramienta gratuita que le permite crear navegación para sitios web y aplicaciones. Se basa en componentes que se pueden utilizar para crear un diseño de proyecto.

Creatly admite la creación de diagramas, diagramas y diseños para varios tipos de proyectos utilizando mapas y estructuras alámbricas. Además, admite la gestión simultánea de múltiples proyectos.

La principal especialización de Naview es la construcción de navegación con estructura alámbrica y la visualización de ideas de navegación, y este programa también admite pruebas del proyecto principal.

Flair Builder es otra herramienta de estructuración de alambres ampliamente utilizada que le permite crear diseños para sitios web y aplicaciones enriquecidas de Internet. Admite varias plataformas como Windows, Mac y Linux. El programa se creó con Adobe AIR, lo que proporcionó una mejor integración y una fácil instalación.

Simple Diagrams es otra herramienta sencilla para crear diagramas y estructuras alámbricas, el programa te permite realizar diseños de forma rápida y sencilla y, lo más importante, es muy fácil de entender. Simplemente puedes abrirlo y comenzar a crear tu diseño.

Esperamos que estas herramientas de diseño de proyectos le resulten útiles. Si conoce otras herramientas similares, no dude en contarnos sobre ellas en los comentarios.

El estudio Layout-Master de Nikolai Saganenko ofrece la creación de diseños muy complejos en el menor tiempo posible. Visita gratuita de un especialista.
Para ordenar, escriba a Esta dirección de correo electrónico está protegida contra spambots. Debe tener JavaScript habilitado para verlo.. Detalles de la empresa: LLC "Architectural Standard". Entrega dentro de la Federación Rusa.

Photoshop es un programa extremadamente popular entre los diseñadores web, incluso un estándar para muchos. Y cuando se trata de diseño de un sitio web, en la mayoría de los casos se trata de un archivo .PSD.

Antes de crear directamente el diseño, debe decidir la estructura del sitio, pensar en la navegación e imaginar dónde se ubicarán qué bloques y elementos.

¿En qué consiste el diseño?

La gran mayoría de páginas web constan de:

• La parte superior (cabecera), en la que se ubica el logo, eslogan, menú de navegación, etc.;
• el bloque principal en el que se ubica el contenido;
• barra lateral (barra lateral);
• la parte inferior (pie de página), que generalmente almacena información de respaldo, información de derechos de autor, enlaces útiles, etc.

¿Cómo crear?

Piense y piense en la estructura. No estaría de más dibujarlo en una hoja de papel o en el propio Photoshop.

Preste atención a la combinación de colores: los tonos deben combinarse y ser coherentes con el tema y la dirección del sitio. El texto debe ser fácil de leer y las páginas deben cargarse rápidamente. No se exceda con decoraciones, elementos interactivos y fuentes elegantes: la conveniencia es más importante que el diseño llamativo, porque los usuarios visitan sitios no para mirarlos boquiabiertos, sino con un propósito predeterminado, y cuanto más rápido su recurso pueda resolverlo, más es valorado.

Decide si tu diseño será extensible o fijo. Una plantilla de tamaño fijo se ve igual en todas las pantallas, mientras que una plantilla de “goma”, que cambia de tamaño, se adapta al dispositivo. Si el diseño es "de goma", entonces debe decidir qué llenará el fondo del sitio.

Sin embargo, creamos el diseño de este recurso web en, que es una parte (lo recomiendo encarecidamente), y puede encontrar un ejemplo complejo en él.

Aquí, para no distraerme con los detalles y el uso de herramientas ya estudiadas, consideraré un ejemplo condicional de diseño, un diagrama de plantilla, pero usando el algoritmo descrito puedes trabajar fácilmente con tu propio diseño.

1. Cree un documento para el diseño futuro. No olvides dimensionar.
2. Delimite el diseño utilizando guías extraídas de las reglas.

Para habilitar las reglas, presione la combinación de teclas Ctrl+R o ejecute el comando Ver -> Reglas del menú principal del programa.

Para arrastrar una guía horizontal, haga clic en la regla superior con el botón del mouse y, sin soltarlo, mueva el puntero hacia abajo hasta que la guía esté en la posición deseada. Para extender una línea vertical, haz lo mismo, simplemente mueve el puntero a la derecha de la regla de la izquierda.

Como resultado, su plantilla debería estar demarcada.

1. Dibuja el diseño. Añade gráficos, líneas, botones y otros elementos. Aquí todo es individual y analizamos las herramientas para trabajar en todo momento.

1. Agrega un poco de color si aún no lo has hecho. Recuerda la armonía y suavidad de los tonos. El conocimiento de la interacción hombre-máquina y la escuela de arte solo serán una ventaja.

como cortar

El diseño terminado debe cortarse "en pedazos" para poder utilizar sus elementos en el diseño del sitio, parte de los cuales se implementará a través de HTML, parte a través de CSS y parte a través de las mismas imágenes en las que se cortará el diseño. Recuerde esto cuando desee dejar varias imágenes con fondo blanco, texto de página o nombres de enlaces: debe dejar solo lo que se tomará de los archivos gráficos y no se implementará por otros medios.

Entonces, el diseño está listo y abierto. Lo cortaremos.

1. Desactive las capas con elementos de diseño innecesarios: texto, botones, formas, etc. Para ocultar una capa, haga clic en el ojo en su línea.

1. Ajuste las guías extraídas de las reglas a los elementos estructurales del sitio. En principio, el diseño se puede cortar a lo largo de ellos, pero en este caso es posible que no quede exactamente como necesitamos, por lo que usaremos otra herramienta.
2. Seleccione la herramienta Anidamiento. Se encuentra en la paleta del grupo Marco.

1. Para cortar una parte de su diseño, mueva el puntero hacia donde desea comenzar y actúe como si estuviera seleccionando un área rectangular. La porción cortada estará numerada. El color azul del número significa que el fragmento está activo y se puede editar. Las piezas que el programa espera que cortes están numeradas sobre un fondo gris. El fragmento cortado está resaltado y tiene marcadores, gracias a los cuales se puede ajustar su tamaño y posición.

1. Realice el siguiente corte de la misma forma y así sucesivamente hasta completar el trabajo.
2. Cuando todo esté hecho, guarda el resultado. Para hacer esto, ejecute el comando Archivo -> Exportar -> Guardar para Web (versión anterior), verifique la configuración (seleccione formato, calidad, etc.), haga clic en Guardar y especifique la carpeta en la que se creará el catálogo de archivos gráficos. .

1. Dentro del directorio seleccionado, apareció una carpeta de imágenes con archivos gráficos, cada uno de los cuales contenía parte del diseño.
2. Ahora podrás guardar botones, iconos y otros elementos previamente ocultos.

El diseño está creado, cortado y completamente listo.

Crear diseños web atractivos y funcionales es una parte integral de la vida de un diseñador web. En este tutorial crearemos un diseño de sitio web profesional desde cero. Durante la lección aprenderás algunos trucos útiles a la hora de crear un diseño.

Recursos de la lección:

1. Conjunto de iconos (wefunction.com)
   Conjunto de iconos alternativos
2. Ícono de Twitter (iconeden.com)
3. Fuente Bebas (dafont.com)

Paso 1. Maqueta

Antes de comenzar a crear el diseño de un sitio web, debemos crear un boceto del diseño futuro, que mostrará su funcionalidad y apariencia aproximada.

Paso 2. Crea un documento.

Crearemos un diseño de sitio web de 960 píxeles de ancho. Para hacer esto, cree un nuevo documento con un tamaño de 1200x1500 píxeles. Resolución 72 píxeles.

Dado que el diseño del sitio tendrá 960 píxeles de ancho, debemos definir esta área agregando guías. Seleccione el documento completo ( Ctrl+A).

Ir al menú Seleccionar - Transformar selección(Seleccione> Transformar selección). En la barra de propiedades en la parte superior de la pantalla, establezca el ancho en 960 píxeles. Esta será el área de trabajo del diseño.

Coloque las guías exactamente a lo largo de los límites de la selección.

Necesitamos crear un margen entre los bordes del área de trabajo del diseño y el área de contenido que agregaremos más adelante. Con el documento seleccionado activamente, vaya al menú nuevamente Selección - Transformar selección(Seleccione> Transformar selección). Reduzca el ancho de la selección a 920 píxeles. Esto significa que habrá 20 píxeles de relleno a cada lado del diseño, para un total de 40 píxeles.

Establecer pautas a lo largo de la nueva selección:

Paso 3. Crea el encabezado del sitio.

Pasemos a crear el encabezado del sitio. Cree una selección de 465 px de alto en la parte superior del diseño.

Rellena la selección con gris y luego usa Estilos de capa para aplicar colores y degradados.

Agregue un relleno degradado al encabezado usando un estilo de capa Superposición de degradado(Superposición de degradado). Crea un degradado de dos colores.

Ahora el encabezado se verá así:

Ahora necesitas agregar iluminación al encabezado. Crea una nueva capa ( Ctrl + Alt + Mayús + N) y seleccione un pincel suave con un tamaño de 600 píxeles. Seleccione el color #19535a y use el pincel para hacer clic una vez en la parte superior central del encabezado.

Crea una selección de 110 px en el encabezado.

Presione la tecla Borrar para eliminar la parte seleccionada.

Reducir la capa resaltada verticalmente (Ctrl+T) .

Debes asegurarte de que el punto de luz de la tapa esté exactamente en el centro. Para hacer esto, active las capas con el encabezado y resaltado y seleccione la herramienta Emocionante(Herramienta Mover) (V). En la barra de propiedades en la parte superior de la pantalla, haga clic en el botón Alinear centros horizontales.

Crea una nueva capa (Mayús + Ctrl + N) y dibujar con la herramienta Lápiz(Herramienta Lápiz) un punto, de 1 píxel de tamaño. Para dibujar use el color #01bfd2.

Suavicemos los bordes de esta capa usando una máscara de degradado. Seleccione una herramienta Gradiente(Herramienta Degradado) y cree un degradado como se muestra a continuación:

Aplica una nueva capa con una máscara y rellénala con el degradado que acabas de crear.

Paso 4. Crea un patrón

Ahora creemos un patrón simple que agregaremos al encabezado. Herramienta Lápiz(Herramienta Lápiz) con un tamaño de 2 píxeles, dibuje dos puntos, como se muestra en la figura. Desactive la visibilidad de la capa de fondo por un tiempo (haga clic en el ícono del ojo al lado de la capa de fondo) y cree un patrón (Edición - Definir patrón)(Edición > Definir patrón):

Crea una nueva capa (Mayús +Ctrl +NORTE) y colóquelo debajo de la capa resaltada. Seleccione el área a la que desea aplicar el patrón y abra la ventana Llenar(Relleno) (Mayús + F5). Haga clic en Aceptar.

Después de agregar la textura, el encabezado se ve así:

Haga una transición suave del patrón al encabezado: agregue una máscara a la capa del patrón y use un pincel blanco suave (#ffffff) con una opacidad del 60% para pintar sobre la máscara.

Resultado:

Paso 5. Agrega un logotipo

Pasemos a agregar un logotipo. Selecciona un pincel suave con el color #19535a y pinta una mancha.

Escribe el texto:

Agregar un estilo de capa a la capa del logotipo Sombra(Sombra paralela).

Paso 6: Navegación

Agregar texto de navegación.

Dibuja un botón de navegación usando la herramienta Marco rectangular. Rellene la selección con cualquier color y reduzca el parámetro Relleno a cero.

Agregar un estilo a la capa del botón Superposición de degradado(Superposición de degradado).

Paso 7: control deslizante de contenido

Crea una selección de 580x295 píxeles.

Rellena la selección con cualquier tono de gris.

Coloca una imagen. Recórtelo con la capa que creó anteriormente.

Ahora agreguemos un efecto al control deslizante. Crea una nueva capa (Mayús + Ctrl + N), seleccionar Cepillar(Herramienta Pincel) con un diámetro de 400 píxeles. Abra la paleta Pincel (F5) y configure los parámetros que se muestran en la captura de pantalla:

Seleccione el color negro (#000000) y dibuje un punto:

Aplicar un filtro para suavizar los bordes. Desenfoque gaussiano(Desenfoque gaussiano).

Seleccione la mitad inferior de la sombra y elimine (Borrar).

Coloque la capa de sombra encima del control deslizante:

Aprieta la capa de sombra por el mango del medio. (Ctrl+T) y luego centre la capa de sombra nuevamente: seleccione ambas capas y haga clic en el botón en el panel de propiedades Alinear centros horizontalmente(Alinear centros horizontales).

Duplicar la capa de sombra (Ctrl +j) y coloque el duplicado en el borde inferior del control deslizante.

Dibujar botones en el control deslizante usando la herramienta Carpa rectangular(Herramienta Marco rectangular ) . Rellena los botones con negro (#000000).

Reduzca la opacidad de la capa del botón al 50%.

Agregue una forma de flecha a sus botones deslizantes:

En la parte inferior del control deslizante, dibuja una franja y rellénala de negro (#000000).

Reduzca la opacidad de la capa de rayas al 50%.

Añade una descripción de tu proyecto a esta página:

Paso 8. Agrega un texto de saludo

Escribe un texto de saludo:

Paso 9. Terminar el encabezado del sitio

Casi hemos terminado de trabajar en el encabezado del sitio. Agrega una sombra sutil usando la herramienta. Cepillar(Herramienta Pincel).

Deja un espacio de 1 píxel entre la sombra y el título.

Crea una nueva capa debajo de la capa del encabezado (Mayús +Ctrl +NORTE) y aplicarle un degradado.

Paso 10. Agregue botones para el control deslizante

Dibujar botones de cambio de diapositiva.

Agregar un estilo de capa a un botón sombra interior(Sombra interior) y luego duplique la capa del botón la cantidad de veces requerida (Ctrl+J).

Paso 12. Crea un separador de contenido

Usa la herramienta Lápiz y dibuja una línea gris claro (#aaaaaa) de 1 píxel de ancho.

Agrega una máscara a la capa de línea y usa un degradado para crear una transición suave en los bordes.

Cualquier diseño se crea teniendo en cuenta ciertos requisitos técnicos. Los diseños de materiales impresos y los diseños de sitios web son completamente diferentes. Muchos diseñadores novatos no tienen esto en cuenta y comienzan a crear lo que sus corazones desean.
En este artículo escribiré cómo hacer todo correctamente (e indicaré errores comunes), lo que aumentará la productividad del diseñador y aliviará los dolores de cabeza del programador frontend.

Resúmenes

Primero, esbozaré los puntos principales. Muchos de ellos afirman ser obra de un conocido personaje llamado K.O., pero sin embargo, no todo el mundo lo sabe.

• Diseño en programas de diseño.
• Crea el documento correctamente
• Usa una grilla
• Utilice la funcionalidad de plantilla
• Considera que los sitios no son estáticos
• Estás trabajando con peces, los textos reales serán diferentes.
• Preparar materiales para el diseño.

Diseño en programas de diseño.

A menudo escucho sobre lo que intentan hacer con el diseño en Photoshop.
Es difícil para mí entender de dónde vino esta tendencia. En todas las universidades especializadas (bueno, que yo sepa) todo está distribuido correctamente:

• Para el diseño existe InDesign (o QuarkXPress).
• Para dibujar existe Illustrator (o CorelDRAW).
• Para la edición de fotografías existe Photoshop. (bueno, Gimp y un millón de programas más). Bueno, solo que en diseño web también se usa para guardar imágenes.

Una de mis teorías al respecto es el desconocimiento del cliente. Creo que todo está dibujado en Photoshop y el cliente dice: "Necesito un diseño en psd, mañana a las 6:34 y olería a diseño real".
No tengas miedo de explicarle al cliente que los diseños no están hechos en Photoshop y mañana exactamente a las 6:34 recibirá el diseño en PDF.

Crea el documento correctamente

Al crear un documento, muchas personas no leen el diálogo e inmediatamente hacen clic en "Aceptar". Pero aquí hay algunos ajustes. Ejemplo de configuración correcta:


Propósito: Web: esto convertirá todas las dimensiones a píxeles. En la web trabajamos con ellos y sólo con ellos, nada de “muévelo 1 centímetro”.
Tamaño de página: 960 es el tamaño estándar. Si no estás seguro y es la primera vez que haces diseño web, no lo dudes. Pero claro, puede ser cualquier cosa. Lo principal es no olvidar que la barra de desplazamiento consumirá el ancho, así que no tomes un ancho absolutamente igual a alguna resolución de pantalla, toma un poco menos.
Ah, y sí, el ancho debe ser múltiplo de dos. Una vez me encontré con un sitio con un ancho de 1227 píxeles.
Te hablaré sobre la cuadrícula en la siguiente sección; siempre puedes cambiarla en Diseño->Márgenes y columnas.

Sugerencia: muchos, incluso los diseñadores experimentados, no saben que la altura (así como el ancho) se puede configurar individualmente para cada página en la parte inferior de la pestaña de páginas, el primer icono. Al presentar un diseño en PDF, no hay necesidad de largas colas blancas en la parte inferior de las páginas.

Usa una grilla

Para que el diseño luzca bien, es necesario sistematizar todos los elementos. Aquí no estamos hablando sólo de sitios web, sino también, en principio, de cualquier diseño.
La cuadrícula es la base de cualquier diseño. Bailan de ella. Por tanto, su elección es muy importante. Pero no describiré aquí sus propiedades “gráficas”. Los requisitos técnicos son importantes para nosotros.

1 - margen, 2 - ancho de columna, 3 - medianil, 4 - sangría estándar

Todos los tamaños de cuadrícula deben ser números enteros y preferiblemente múltiplos de dos.
Aquí está la lista de parámetros:

• Ancho de diseño
• Ancho de los márgenes externos (margen)
• Número de columnas
• Espaciado de columnas (canalón)

Cuando hayamos decidido todos estos parámetros, los sustituimos en la fórmula
Ancho del diseño = margen*2 + x*Número de columnas + medianil*(Número de columnas - 1)
Por ejemplo, para el documento creado anteriormente en el ejemplo será
960 = 10*2 + x*6 + 14*5
x = 145
x (ancho de columna) resultó ser un número entero, lo que significa que todo está en orden, si no, cambie las sangrías.

Y una cosa más, hay diseños donde el margen es cero. Y te dicen “por qué tienen, todo luce genial sin ellos”. Sí, esta afirmación es cierta para las computadoras, donde todavía habrá espacio vacío en la pantalla, pero en los dispositivos móviles el sitio tendrá exactamente el ancho de la pantalla y la fuente pegada al borde se verá terrible.

Además, no olvides indicar lo que yo llamo “sangría estándar”. No habrá necesidad de devanarse los sesos sobre qué sangría hacer. Por supuesto, la sangría puede ser doble. Además, la sangría vertical puede diferir de la horizontal.

Y no olvides utilizar la propia malla; sujetar todos los elementos a lo largo de ella.
En general, al diseñador no le importa dónde está ubicado el elemento, pero el programador adjunta los elementos a la cuadrícula, por lo que es extremadamente importante para él que los elementos no se salgan de ella.

Utilice la funcionalidad de plantilla

Los sitios tienen varios elementos de interfaz y, lo más importante, la plantilla general sigue siendo la misma en todas las páginas.
Por lo tanto, debe almacenarse en páginas maestras. Ya no se harán las preguntas "cuál de estas páginas tiene el diseño correcto".

Lo mismo ocurre con las flores. Usamos todos los colores sólo a través de muestras. Esto le permitirá evitar crear un montón de colores y cambiarlos en todas partes con un solo clic.

Considera que los sitios no son estáticos

A diferencia de los materiales impresos, un sitio web es un objeto dinámico. No olvides crear elementos en diferentes etapas de tus diseños (por ejemplo, solo un enlace, un enlace sobre el que pasaste el cursor, un enlace activo).

Estás trabajando con peces, los textos reales serán diferentes.

Muchos diseñadores que anteriormente trabajaban con materiales impresos todavía tienen la costumbre de prestar atención a los pequeños detalles del formato del texto.
Me refiero a cosas como no tener palabras cortas al final de una línea o usar guiones solo en una palabra larga específica.
Tienes contenido estático, puedes controlar cada letra y cada espacio de forma individual.
Por supuesto, esto es correcto y una clara señal de profesionalidad cuando se trata de una revista, por ejemplo, pero en una web no podrás controlar el contenido de los usuarios.
Así que no olvides establecer la longitud máxima posible para los títulos y cosas así.

Preparar materiales para el diseño.

En primer lugar, pregúntele al programador frontend qué elementos necesita en las imágenes.
Muchos diseñadores experimentados ya saben que el programador dibujará esta ventana con un radio de borde y una sombra de cuadro (no estoy diciendo que necesites saber los nombres de las propiedades, es solo que con el tiempo se pospone, lo que muchos incluso son bastante complejos). las formas y los efectos se dibujan en CSS)
Pero si es nuevo en este asunto, pregunte específicamente "¿qué se necesita?"
Un poco sobre cómo guardar imágenes.
Todo debe guardarse no solo guardando en Photoshop, sino también guardando para la web.
Los elementos pequeños, los elementos que requieren transparencia o contienen fuentes se guardan en png-24.
Gráficos, imágenes y fondos jpeg. Mantenga un registro del tamaño del archivo y hágalo lo más pequeño posible hasta que la diferencia sea visualmente muy notable.

Proporcione una lista de colores utilizados en formato HEX.

No olvide incluir todas las fuentes utilizadas en el diseño.

Y por último comentar todo verbalmente con el programador, esto es útil para todos.

Etiquetas: diseño de sitios web, maquetación de sitios web, frontend, manual, tutorial