Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Diseña un tema empresarial de Drupal en Photoshop 

by
Length:MediumLanguages:

Spanish (Español) translation by Claudia Márquez (you can also view the original English article)

Para marcar el lanzamiento reciente de Drupal 7.7, lo guiaré a través del diseño de un sitio web sencillo que se puede convertir en un tema funcional de Drupal. En esta, la primera parte, cubriremos técnicas básicas de photoshop, como estilos, cortes, guías, estructura de capas y mucho más. 

También discutiré la estructura de Drupal y cómo lo permitimos en nuestro diseño.  ¡Vamos a empezar! 


Paso 1: Configuración

Así es como se verá nuestra estructura básica.  Estas áreas se mencionan en Drupal como regiones, que pueden contener varios bloques de información. 

Comience abriendo el 960_grid_12_col.psd que  puede descargar del enlace de descarga 960 Grid arriba. Vaya a Imagen> Tamaño del lienzo y cambie el ancho a 1240 píxeles y la altura a 1480 píxeles, esto nos dará espacio adicional para trabajar.  Asegúrase de tener las Reglas (Ctrl + R) y las Guías (Ctrl +;) encendidas.


Paso 2: Estructura de la capa

Cree un nuevo grupo (CRT + G) y llámelo 'HOME', luego agregue 6 grupos más dentro de él: 'titulo', 'presentacion', 'bienvenido', 'columna', 'contenido' y 'pie de pagina'.


Paso 3: Fondo

Desbloquee la capa de fondo haciendo clic en el icono de candado en la parte superior de la paleta de capas. 

Haga doble clic en esa capa y dele una superposición de color de # f3f3f3. 


Paso 4: Fondo de encabezado 

Debajo de 'encabezado' agregue dos grupos nuevos llamados 'contenedor de encabezado' y 'encabezado bg'.  Luego, dentro del "contenedor del encabezado", agregue dos grupos más 'logo' y 'nav'.

Para crear una nueva guía, vaya a Ver > Nueva guía. Ahora agrega una guía horizontal a 100 px. 

Ahora crea una nueva capa en 'encabezado bg' name it 'bg'. Dibuje un rectángulo entre las guías horizontales 0 y 100 px y llénelo con #327aa7.

Agregue un trazo: 1px dentro del color: #295f94. 


Paso 5: Logotipo

Crea nuevas guías horizontales a 30px y 70px. 

En el grupo 'logo', escriba algún texto del logotipo con la siguiente configuración: 


Paso 6: Navegación

A partir de la guía vertical 630px, escriba algunos enlaces de navegación: 'inicio', 'servicios', 'cartera', 'sobre' y 'contacto'.  Separarlos por 8 píxeles.  


Paso 7: Fondo recomendado

La sección presentada será una región en nuestro tema de Drupal y configuraremos el bloque deslizante para que solo aparezca en la página de inicio en la Parte dos de este tutorial. 

En 'destacado', crea dos nuevos grupos 'contenedor destacado' y 'destacado bg'. Dentro de 'contenedor destacado' agregue 3 nuevos grupos: 'flechas', 'viñetas' e 'imagen'. 

Cree nuevas guías horizontales a 140px, 460px y 500px.  Dentro del grupo 'featured bg' agrega una nueva capa llamada 'bg' y dibuja un rectángulo de 100px a 500px con un relleno de #338fca 

Agrega un degradado de trazo:


Paso 8: Imagen del control deslizante

Dentro de 'contenedor destacado' > 'imagen' crea una nueva capa y llámala 'marcador de posición'.   A continuación, dibuja un rectángulo de 140px a 460px, rellena con #FFF y colócalo en una imagen grande.

Haga clic derecho en la imagen y seleccione crear máscara de recorte en la capa 'marcador de posición'.


Paso 9: Flechas Deslizadoras

Crea nuevas guías horizontales a 280px y 320px. 

Vaya a su herramienta de forma personalizada y seleccione una forma de flecha. 

Consulte las guías creadas anteriormente y dibuje una flecha entre las guías verticales 172px y 210px.  Coloque la forma en el grupo de flechas y asígnele el nombre 'prev'. 

Luego ve a editar > transformar y selecciona girar 180 grados.

Cambie su opacidad al 50% y agregue una superposición de color #000.

Duplique esa flecha y muévela al otro lado del control deslizante a 1030 px (vertical) y luego vaya a Editar > Transformar > Girar 180 grados.


Paso 10: Control deslizante

Crea nuevas guías horizontales a 470px y 480px.  Ahora dibuja un círculo de 10x10 entre las guías verticales de 610px y 620px, llénalo con #FFF y llama a la forma 'actual'.  Mueva la capa al grupo de viñetas.

Duplica ese círculo dos veces, muévelo 3px a la derecha y nombra ambas capas como "inactivas". 

Agregue una sombra interna con estas configuraciones: 

Agregue una superposición de color con #327ba8. 

Para duplicar esos estilos en el otro botón, mantenga presionado ALT y arrastre el estilo fx a la siguiente capa. 

El resultado final:


Paso 11: Sección de Bienvenida

La región de bienvenida contendrá el título de la página y un bloque para nuestro botón de llamada a la acción.  

Crear a una nueva guía horizontal 600px. Dentro del grupo 'Bienvenido' cree dos grupos nuevos: 'contenedor de bienvenida' y 'bienvenido bg'. 

Crea una nueva capa debajo de 'bienvenida bg', llámala 'bg', dibuja un rectángulo de 500px a 600px y completa con #FFF

Agregue un trazo:

Crea nuevas guías horizontales a 525px y 575px. 

Crea un nuevo grupo dentro de 'contenedor de bienvenida' y llámalo 'page-title h1' 

Agregue texto como "Bienvenido a la plantilla comercial" con la siguiente configuración: 

Cree otro grupo dentro de 'contenedor de bienvenida' y asígnele el nombre 'llamada a la acción'.  Ahora dibuja un rectángulo redondeado con un radio de 5 píxeles desde 790 píxeles a 1090 píxeles. 

Agregue un degradado lineal #38fca a #327ba8

Ahora agregue un poco de texto con la siguiente configuración:  


Paso 12: Columnas

La región de las columnas se configurará para que solo se muestre en la página de inicio como el control deslizante de la imagen. 

Cree nuevas guías horizontales a 640px, 660px, 700px, 810px y 840px.

Configure la estructura de la carpeta de esta manera: 

En la carpeta h2, agrega un título con la siguiente configuración: 

Agregue un icono de los íconos provistos arriba.  Moverlo a la carpeta de iconos y mover el borde izquierdo del icono a las guías 700px (horizontal) y 150px (vertical) 

En la carpeta p, agregue texto ficticio en la guía vertical 230px con la siguiente configuración. 

Entre las guías horizontales 810px y 840px.  Crea un rectángulo redondeado con un radio de 5px y rellena con #338fca. 

Agregue un poco de texto 'lea más' dentro del botón con estas configuraciones: 

Repita este paso dos veces más para crear las otras dos columnas, simplemente cambie los iconos y títulos. 


Paso 13: Contenido

Configure la estructura de la carpeta del contenedor de la siguiente manera: 

Crea nuevas guías horizontales a 880px, 920px y 1180px.  Crea una nueva capa en la carpeta 'bg' y llámala 'contentenido-bg'. Ahora dibuja un rectángulo de 880px a 1180px con un ancho de 620px y un relleno de #FFF

Ponle un Trazo:

En la carpeta 'h2', agregue un título debajo de la guía horizontal de 920px y a 190px verticalmente. 

Cree una nueva guía horizontal a 960px y agregue texto simulado con estas configuraciones: 

Ahora agregue el botón "leer más", simplemente copie uno de la sección de columnas y coloque 20px del texto p. 


Paso 14: Búsqueda en la barra lateral 

Ahora trabajaremos en la barra lateral, que aparecerá en la página de inicio 

Dentro de la carpeta de la barra lateral, configura la estructura de tu carpeta de la siguiente manera: 

Cree una nueva capa: 'buscar bg' y colóquela en la carpeta 'buscar' > 'bg'  Luego dibuja un rectángulo de 880px a 920px con un ancho de 300px, llénalo con #FFF 

Coloque el buscador de búsqueda cerca del final del formulario de búsqueda y complétalo con # 99.


Paso 15: Acceso a la barra lateral 

En la guía horizontal 960px escriba un título: 'Inicio de sesión de usuario' con la siguiente configuración: 

Cree una nueva guía horizontal a 1000px y en la carpeta 'usuario' agregue una etiqueta de grupo.  Ahora agrega texto: 'Nombre de usuario' con estas configuraciones: 

Crea nuevas guías horizontales a 1020px y 1050px. 

Cree un nuevo grupo 'entrada' y una nueva capa 'entrada-bg'. Ahora dibuja un rectángulo entre esas guías con un ancho de 160px y rellena con #FFF.

Crea nuevas guías horizontales a 1070px, 1090px y 1120px. Duplica el grupo de usuarios y muevelo a 1070px. Cambie el nombre de la etiqueta 'nombre de usuario' a 'contraseña'. 

Cree nuevas guías horizontales en la guía horizontal a 1140px y 1170px.  Para crear el botón de inicio de sesión, repita los pasos de la sección del botón 'leer más' arriba. 


Paso 16: Pie de página

Dentro de la carpeta 'pie de página', configure la estructura de su carpeta de la siguiente manera: 

Crea nuevas guías horizontales a 1260px y 1360px. 

Dentro del grupo 'piedepagina-bg', crea una nueva capa 'bg'. Ahora dibuja un rectángulo entre las guías creadas en la última sección y llena con #999.

Crea una nueva guía horizontal a 1290px. 

Dentro del grupo de enlaces, agregue algunos enlaces de texto: 'home', 'services', 'portfolio', 'about' y 'contact' con estas configuraciones en la guía vertical de 150px.

Dentro del grupo de "iconos sociales", agregue los iconos de Facebook, Twitter y rss en la guía vertical de 470px.  Separarlos por 6px. 

Dentro del grupo 'derechos de autor', agregue texto de copyright con la siguiente configuración en la guía vertical de 790px. 


Paso 17: Logotipo de corte

Vamos a cortar el logo como una imagen.  Puede usar el nombre del sitio como su logotipo, pero en la segunda parte de este tutorial le mostraré cómo cargar un logotipo de imagen para Drupal. 

Agarra la herramienta de corte y dibuja un rectángulo alrededor del logotipo.  Haga clic derecho en el rectángulo de corte y seleccione editar opciones de corte. 

Cambie el nombre a 'logo' y déle un ancho de 90px y una altura de 45px. 

Ahora esconde la capa 'piedepagina bg' y la capa 'fondo' para que nuestro logo sea transparente. 

Vaya a archivo > guardar para web y dispositivos y seleccione PNG24 con transparencia marcada.

Asegúrese de hacer clic en la opción de sectores "Segmentos seleccionados" al guardar. 


Paso 17: Botón de búsqueda de corte

A continuación, cortaremos el botón de búsqueda. 

Dibuja un rectángulo de corte alrededor del botón de búsqueda.  Haga clic derecho en el sector y seleccione editar opciones de sector. 

Cambie el nombre a 'buscar-btn' y asígnele un ancho de 16px y una altura de 16px. 

Ahora esconde la capa 'buscar bg' y la capa 'fondo'.

Vaya a archivo > guardar para web y dispositivos y seleccione PNG24 con transparencia marcada.


Paso 18: Imágenes del control deslizante

Crea un nuevo documento con un ancho de 940px y una altura de 320px.  A continuación, agregue algunas imágenes grandes para nuestro deslizador de imagen. 

Para cada imagen, vaya a archivo > guardar para web y dispositivos y seleccione JPEG con calidad 100 y carga progresiva.


Paso 19: Control deslizante

Crea un nuevo documento con dimensiones de 10px por 24px. 

Regrese a nuestro psd de diseño y copie sobre las viñetas del control deslizante que creamos anteriormente.  Crea nuevas guías horizontales a 1px, 11px, 13px, 23px.  Ahora establece las viñetas como a continuación: 

Vaya a archivo > guardar para dispositivos web y seleccione PNG24 con la siguiente configuración. 


Paso 20: Flechas deslizadoras

Cree un nuevo documento con dimensiones de 76px x 40px. 

Regrese a nuestro psd de diseño y copie las flechas deslizadoras que creamos anteriormente.  Establece las flechas como a continuación: 

Crea una nueva guía vertical a 38px 

Vaya a archivo > guardar para dispositivos web y seleccione PNG24 con la siguiente configuración.


Paso 21: Iconos

Ahora, con los íconos generales y sociales que colocamos en nuestro diseño, podrían dividirse pero solo voy a cargarlos desde la carpeta de iconos que se suministró. 


Conclusión 

¡Ese es el final de la sección de diseño de esta corta serie!  ¡Asegúrate de ver la segunda parte donde tomamos este diseño y lo convertimos en un tema de Drupal! 

Espero que hayan disfrutado, ¡gracias por leer! 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.