Cómo crear un diseño en Photoshop cs6. Detectar posibles problemas a tiempo. Lo que no debes olvidar

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 puede trabajar fácilmente con su 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, formularios, 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. Haga el siguiente corte de la misma manera 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.

Coloca una mancha con un pincel en la esquina superior izquierda:

Luego, usando la herramienta Mover, levante ligeramente la capa con el tinte y establezca la opacidad de la capa al 70%:

En la barra de herramientas seleccionamos la herramienta “Texto”, en la barra de opciones hacemos clic en el ícono para encender el panel de símbolos, donde configuramos los siguientes valores:

• Familia de fuentes: Avanti Regular (descarga de fuentes desde el siguiente enlace)
• Tamaño de fuente: - 59 puntos
• Seguimiento: 5
• Escala horizontal: 115%
• Color: #91d4f5

Para mayor comodidad, active las reglas (Ctrl+R) y coloque las guías, horizontal 92 px, vertical - 104 px, en la mira de las guías y esta será la posición inicial del texto del logotipo del sitio. Escribimos el logo "Cars" o algo así. La figura muestra la escala del documento en tamaño completo:

Para la fuente del eslogan, establezca los siguientes parámetros:

• Familia de fuentes: Avanti Regular
• Tamaño de fuente: - 19 puntos
• Seguimiento: -35
• Escala horizontal - 100%
• Color: #cdcdcd

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 espacio de trabajo de 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 barra:

Paso 8. Agrega un texto de saludo

Escribe un texto de saludo:

Paso 9. Terminar el encabezado del sitio

Ya 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.

Debido a numerosas solicitudes de los lectores, hoy realizaremos un diseño, o mejor dicho, una maquetación de un sitio web en Photoshop. Por supuesto, si nunca te has encontrado con esto, es bastante difícil de hacer; te surgen muchas preguntas que intentaré responder hoy. Resulta que no hay mucho material sobre este tema en Internet. Hay muchos diseñadores, pero nadie te dice cómo diseñar un sitio web. ¿Quizás simplemente me veía mal? :)

Continuación

En general, hagámoslo ya.

Para empezar, he preparado un diseño sencillo que analizaremos en detalle contigo. Así es como se ve:

Como puedes ver, la plantilla no es complicada naturalmente, es una plantilla de blog, que luego diseñaremos en HTML. Bueno, por ahora simplemente dibujaremos. Bueno, ahora vámonos.

Software

Lo primero que necesitas es Photoshop. Si no lo tienes, cómpralo :-)

Creación de documentos y dimensiones.

Para crear un nuevo documento en Photoshop, debe ir a "Archivo" y hacer clic en "Crear", luego aparecerá una ventana en la que deberá configurar las dimensiones apropiadas.

Las dimensiones dependen del ancho que tendrá su futuro sitio. Por ejemplo, decidió que el sitio terminado tendrá un ancho de 1000 px, por lo tanto, el tamaño del documento debe agrandarse un poco, alrededor de 1200 px. Esto se hace principalmente por conveniencia, para que su diseño tenga el mismo aspecto que en el navegador.

En cuanto a la altura, el tamaño se establece en función del tema de la plantilla. Pero es recomendable hacer más, creo que 4000 px es suficiente. Esto se hace para que todos los elementos encajen posteriormente. Porque de alguna manera hice la altura pequeña y luego tuve que transferir todo a un nuevo documento.

En mi caso, el sitio tendrá un ancho de 1200px. Entonces hice un documento de 1300 px de ancho y 4000 px de alto. Deje el resto de la configuración como está.

Fondo de plantilla de sitio web

Una vez que hayamos creado el documento, lo primero que debemos hacer es crear el fondo del sitio. No importa el color o la imagen, simplemente hazlo. En mi caso es solo un fondo blanco. Seleccione la herramienta Relleno en la paleta de colores, seleccione blanco y luego simplemente haga clic en el fondo.

El ancho del futuro sitio es 1200 px.

Ahora necesitamos establecer el tamaño del sitio futuro para que se vea igual que en el navegador. Esto lo haremos usando una regla. Si no está activo para usted, debe ir a "Ver" y marcar la casilla junto a "Regla". Entonces debería aparecer en su ventana de visualización.

Y así es como se ve:

Selecciona nuestra capa, solo necesitas hacer clic en ella una vez:

Ahora necesitamos colocar una regla en el centro de nuestro documento, o mejor dicho, encontrar el centro. Para hacer esto, mueva el cursor sobre la regla, mantenga presionado el botón izquierdo del mouse y arrastre la línea a nuestro documento. Tire aproximadamente hacia el centro, la regla encontrará el centro mismo.

Después de haber encontrado el centro, debemos colocar nuestro sitio con un ancho de 1200 px en el centro de un documento que tiene un tamaño de 1300 px. Para hacer esto, seleccione la herramienta "Área rectangular", establezca el Estilo en la parte superior en Tamaño especificado, donde escribimos los siguientes valores: ancho - 1200 px, alto 400 px. A continuación simplemente pulsamos sobre nuestro fondo blanco y ya tendremos una zona seleccionada del ancho que necesitemos.

Ahora colocamos nuestra área seleccionada en el centro con el mouse, encontrará el centro mismo. Luego debes sacar 2 reglas más y colocarlas a ambos lados del área seleccionada. De esta forma indicamos los límites de nuestro futuro sitio, que tendrá un ancho de 1200 px. Esta regla también facilitará el ajuste de los elementos de diseño. Si no lo entiende, haga lo mismo que en la siguiente figura.

Seguiremos usando la regla en el futuro, ya que aquí no podemos prescindir de ella; nos permite fijar todo de manera uniforme.

Ahora hemos preparado casi por completo nuestro documento. Descubrimos el medio y también identificamos el tamaño exacto más allá del cual no es necesario escalar. Ahora pasemos a la parte más interesante, es decir, la creación de un diseño de sitio web (maquetación).

Crear un diseño o maquetación de un sitio web

¡Importante!

Cree siempre grupos de capas y asígneles nombres. ¡Porque en el futuro definitivamente te confundirás!

Grupos

Creamos un grupo y lo llamamos “Hider” (Sombrero) y en él creamos un grupo “Top Menu”, ya que con él comenzaremos. En el grupo, crea una nueva capa y llámala "fondo". Este será el fondo de nuestro menú superior.

Esto es lo que deberías conseguir:

Menú superior

Nuevamente sacamos la regla y la configuramos como en la figura:

Seleccione la herramienta "Marco rectangular" y seleccione a lo largo de la regla horizontal:

En la paleta de colores, ingrese este color #0dbfe5, seleccione la herramienta “Rellenar” y rellene el área seleccionada, luego debe deseleccionar la selección en la pestaña “Selección”, haga clic en “Deseleccionar”:

Haga clic en la herramienta "Texto horizontal". En el panel superior, seleccione la fuente "Segoe UI". Ahora haz clic en el fondo del menú azul y escribe el nombre de nuestras páginas. Luego podrás mover el texto a donde necesites.

Ahora creamos separadores entre páginas. Y le daremos un ligero efecto de depresión. Crea una nueva capa y selecciona la herramienta Línea. Luego mantén presionada la tecla Mayús y dibuja una línea vertical a lo largo de todo el fondo azul de nuestro menú.

Haga doble clic en la capa con la forma y se abrirá una ventana con el estilo de capa. Marque la casilla junto a "Superposición de colores" y agregue este color #0aaacc allí.

Vaya al elemento "Sombra" y configure los siguientes parámetros:

Esto es lo que deberías obtener:

Después de eso, simplemente copiamos la capa con nuestra línea y la colocamos después de cada palabra. Esto es lo que obtuve:

Iconos de marcadores sociales

Aquí, en el menú solo del lado derecho, agregaremos íconos de marcadores. En mi caso, esto es , pero también puedes instalar iconos descargados normales. Puedes descargarlo aquí.

Primero, usando una regla, debes establecer la altura de nuestros íconos para que queden uniformes. Esto es lo que debe hacer:

Luego creamos un grupo, lo llamamos "Marcadores sociales", creamos una nueva capa en él. Ahora haga clic en la herramienta "Forma personalizada" y seleccione la forma deseada:

Mueva el cursor al lugar donde estará el ícono, mantenga presionada la tecla Mayús (para que el ícono aparezca recto) y estírelo al tamaño deseado. Y repetimos el mismo proceso con las siguientes figuras. Al final, esto es lo que deberías obtener:

Pasemos al logo. Nuevamente, cree un grupo separado para el logotipo y agréguelo a una nueva capa.

Logo

Vaya a este sitio y descargue la fuente. Seleccione la herramienta "Texto horizontal". Buscamos el nombre de nuestra fuente Olivier en el campo de fuente. Haga clic en el lugar donde se ubicará el logo y escriba el nombre en inglés, ya que esta fuente no admite cirílico. Esto es lo que deberías conseguir:

Crea un grupo de "Menú inferior" y una nueva capa.

Menú inferior (Principal)

Colocamos las reglas como en la figura:

Seleccione la herramienta Marco rectangular y haga una selección. Luego rellene el área seleccionada con este color #303030. Esto es lo que deberías conseguir:

Deseleccione la selección en la pestaña "Selección". Ahora vaya a la pestaña Filtros - Ruido y seleccione Agregar ruido. Luego establecemos los siguientes valores:

Añadiendo líneas. Se hacen de la misma forma que en el menú superior, solo se cambia el color de la línea en sí. Creo que puedes manejarlo y esto debería verse así:

Ahora pasamos al panel con información que le indicará al usuario dónde se encuentra en el sitio.

Como de costumbre, en el grupo "Ocultar", cree un grupo "Panel de información" con una nueva capa.

Panel informativo

Primero, agregue rayas de la regla como se muestra en la siguiente figura:

Seleccione la herramienta "Marco rectangular" y seleccione el área directamente debajo del menú y rellénela con color negro #000000

Deselecciona la selección, selecciona “Texto horizontal”, cambia el tamaño de fuente a 48 pt y el color #a4a4a4. Escribimos “Últimas entradas”. Esto es con lo que deberías terminar:

Contenido

Pasemos a marcar la mitad de nuestro futuro sitio. Necesitamos usar una regla para marcar dónde se ubicarán los bloques de publicaciones y el bloque de la barra del sitio (columna derecha).

Inmediatamente necesitas crear 2 grupos separados:

• Etiquetas— agregaremos texto a este grupo con el tamaño de nuestras columnas.
• Contenido— un grupo donde se ubicará todo nuestro sitio.

En el grupo, creamos contenido para el grupo "Izquierda", que contendrá nuestros bloques con publicaciones.

Seleccione la herramienta "área rectangular", asígnele el estilo "establecer tamaño" y establezca el ancho en 800 px y el alto en 100 px. Aquí está el resultado:

Agregue líneas desde la regla como en la figura y anule la selección:

En el grupo “Contenido” creamos un grupo llamado “Derecho” (Barra del sitio). Marcaremos el lugar para la columna derecha del sitio.

Nuevamente tomamos el "área rectangular", pero en el estilo del área establecemos un tamaño un poco más pequeño con un ancho de 350 px y la altura seguirá siendo la misma en 100 px. Y luego hacemos todo como en la figura:

Ahora sabemos exactamente dónde estarán los bloques con publicaciones y la barra del sitio. Y todo irá bien.

¿Recuerdas que creamos un grupo de etiquetas? Allí, simplemente crea una capa con tamaños de bloque etiquetados, como el mío:

Estas marcas serán muy útiles durante el diseño. No necesitarás recordar las tallas.

Bloques con registros

Empecemos por los bloques con registros; en este caso se hacen de forma muy sencilla.

En el grupo "Izquierda", cree un subgrupo de "bloque" y una nueva capa.

Seleccione la herramienta Marco rectangular nuevamente. En el estilo establecemos las dimensiones en 800 x 300. Lo ajustamos a las líneas. Luego rellénalo con este color #d9d9d9. Esta es nuestra miniatura.

En el mismo grupo, agregue una etiqueta usando texto como el que tengo en la imagen de arriba.

Ahora agreguemos un título a la publicación. Tome "Texto horizontal" y establezca el tamaño en 35 pt y el color en negro. Agregue justo debajo de la miniatura:

Agregando información a la publicación. Establezca el tamaño de fuente en 14 pt y el color más cercano al gris:

Y la descripción del post:

Ahora agregue algo de texto y vea lo que tenemos:

Para separar los registros al menos un poco, creemos un separador de círculos simple.

Cree un grupo "Separador", seleccione "Área ovalada" y cree una capa. Y debajo del bloque de entradas, mientras mantiene presionada la tecla Mayús, dibuje un círculo y luego rellénelo con este color #efefef.

Deselecciona la selección y busca el centro del círculo usando una regla.

Seleccione la capa con nuestro círculo, haga clic derecho y seleccione "Crear una capa duplicada". Arrástrelo un poco hacia la izquierda.

En el panel superior, vaya a la pestaña "Edición" - Transformación y seleccione Escalar. Y hacemos un círculo un poco más pequeño que el primero, mientras mantenemos presionado Shift para que el círculo quede parejo.

Esto es lo que deberías conseguir:

Copia la capa de este pequeño círculo y muévela nuevamente hacia la izquierda. También reducimos exactamente su tamaño como está escrito arriba, para que quede así:

Ahora necesitas crear un duplicado del círculo del medio y moverlo hacia la derecha, y hacer lo mismo con el círculo pequeño. Para que quede más claro, hazlo como en la figura:

Pero esto es lo que ocurrió sólo en tamaño normal:

Ahora colocamos el bloque de registros debajo del bloque. Cree un duplicado de nuestro grupo "Bloquear". Seleccione el cursor (arriba) en la barra de herramientas. Y arrastre nuestro bloque de registros hacia abajo. y hacemos esto 5 veces.

Barra lateral (columna derecha)

Encontramos nuestro grupo “Barra lateral” y creamos un subgrupo “Buscar” en él. Usando una línea hacemos esto:

Selecciona la herramienta “Marco rectangular” y selecciona el campo de búsqueda, luego rellénalo con este color #eeeeee

No olvides deseleccionar, haz clic en la herramienta “Texto Horizontal” y escribe la palabra Buscar en el campo gris

A la izquierda, selecciona la herramienta Forma libre y busca una forma de lupa en la parte superior. Está disponible en figuras estándar. Crea una capa en el grupo "Buscar", apúntala al campo y dibuja nuestra figura mientras mantienes presionada la tecla Mayús.

El campo de búsqueda está listo. Ahora pasemos a los widgets.

Cree un grupo de "widgets" y una nueva capa en él. Luego agregue líneas como en la imagen. Este será el fondo de nuestro encabezado, y rellénalo con este color #eeeeee

Ahora necesitamos agregar el título en sí a nuestro título; lo hacemos usando texto. También agregaremos un ícono al título. Para hacer esto, necesitas elegir cualquier forma que te guste y que se ajuste al significado :) No olvides mantener presionada la tecla Mayús cuando agregues una forma. Y rellénalo con este color #0dbfe5

Y, por supuesto, necesitamos agregar entradas a nuestros widgets. Debe seleccionar la herramienta de texto horizontal y luego establecer el tamaño en 16 pt. Y haz ka en la imagen de abajo.

Luego simplemente creamos un duplicado del grupo y arrastramos el widget hacia abajo. Hacemos lo mismo que con las publicaciones.

Ahora podemos ver un diseño casi terminado y sencillo para nuestro futuro sitio web.

Pie de página (parte inferior del sitio)

Bueno, ¿qué haríamos sin él? En esta plantilla tampoco es muy complicado.

Como de costumbre, cree el grupo "Pie de página" y una capa en él. Y márcalo usando una regla, selecciona nuestra ya favorita herramienta de “área rectangular”, selecciónala y rellénala con #0dbfe5

Deseleccione la selección. Tome "Texto horizontal", busque la fuente que descargamos (Olivier) e ingrese nuestro logotipo, solo oscurezca un poco el color del texto.

Y en el lado derecho de nuestro pie de página agregamos un menú igual que arriba solo que sin la línea. Incluso puedes simplemente copiarlo y moverlo hacia abajo.

Eso es todo amigos, tenemos un diseño listo para usar que ya se puede escribir :)

Además, aquí está su archivo PSD. Descárgalo y comprueba si no entiendes algo.

Amigos, si no entienden nada, asegúrese de preguntar en los comentarios.

Nos vemos pronto.

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 en 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.