Bienvenidos a este nuevo tutorial, en este último aprenderemos como hacer un sitio web de la A a la Z, lo haremos usando photoshop y en otro tutorial aprenderemos como transformar el PSD en HTML5 y CSS3 .
En nuestro tutorial, el tema será uno. agencia web
y aquí hay una pequeña vista previa del resultado final
Antes de comenzar, debe descargar el siguiente paquete de recursos que incluye íconos web, imágenes y texturas.
Luego abra un nuevo documento desde 1800 × 4850 píxeles , Resolución de 72 ppp , colores RGB8bits .
Para tener más precisión a la hora de transformar PSD en HTML es imperativo utilizar las marcas para facilitar su trabajo al CSS .
Agregue guías horizontales yendo a Menú> Ver> Nueva guía> Horizontal 59px, 651px, 1431px, 2237px, 2613px, 3154px, 3939px, 4767px.
Comenzaremos con el menú en la parte superior de la encabezamiento.
Tomar la herramienta de texto (T) y escribe tu menú usando la fuente «Abrir sin» y un tamaño de 13pt
Luego importe su logotipo, en nuestro tutorial es un texto simple coloreado con azul # 00b3e3 .
Ahora importe una imagen de gran formato entre la primera y la segunda marca.
A continuación, agregue un rectángulo negro usando la herramienta rectángulo (U).
Luego reduzca su opacidad a 71%.
Luego dibuja otro rectángulo con fondo transparente usando el color de contorno # 617b9b , en photoshop cs6 y cc puedes hacerlo directamente así.
Por otro lado, en versiones anteriores de Photoshop, puede hacer esto dibujando un rectángulo y luego reduciendo el antecedentes a 0% luego agregue un contorno en las opciones de fusión.
Luego crea una nueva capa ( Ctrl + Mayús + N ), tomar la herramienta lápiz (P) con un tamaño de 1px del mismo color que antes y agregue esquinas como esta
( Tener líneas rectas en Photoshop; Establezca un punto con su herramienta donde desea iniciar el segmento.
Mantenga presionada la tecla Mayús mientras señala el punto en el que desea que termine el segmento. Entonces aparecerá una línea entre estos dos puntos. )
Luego dibuja un rectángulo blanco como este.
Luego, aplique un filtro de desenfoque direccional yendo a Menú> Filtro> Desenfocar> Desenfoque direccional.
A continuación, haz lo mismo para dibujar otro rectángulo con los mismos efectos, luego dibuja círculos en el centro usando la herramienta Elipse (U) para conseguir esto.
Ahora agregue su texto (los textos usados en el tutorial es un ejemplo simple, será reemplazado por su contenido en HTML).
Para la tercera parte, importe los siguientes iconos a su documento de trabajo.
De la misma manera que antes, agregue su texto usando la misma fuente «Open Sans», porque en un sitio web no debe usar mucha fuente para evitar ralentizaciones del servidor.
Ahora en la cuarta parte, tome la herramienta rectángulo (U) y dibuja un gran rectángulo azul # 32bcef siguiendo sus puntos de referencia.
Luego, vaya a las opciones de combinación
Luego dibuja un rectángulo redondeado usando la herramienta rectángulo redondeado (U) con un Rayo de 5px y el color azul oscuro # 0c1a2d .
Luego agregue un logotipo o lo que desee, en el tutorial agregamos el logotipo del sitio web seguido del logotipo receptivo.
Luego agregue más texto gris claro y oscuro para los títulos como se muestra en la imagen a continuación.
Ahora vamos a crear un pequeño Portfolio incluido en nuestra página con efectos de rollover con photoshop solo vamos a ilustrarlo el rollover se hará con Css3.
Importa tus imágenes y ajústalas así.
Ponte en una de tus imágenes y dibuja un rectángulo azul #32bcef.
Luego dibuja otro rectángulo blanco del mismo tamaño en tu imagen, muévelo detrás de la capa del rectángulo azul y encoge su opacidad a sesenta y cinco% .
Y para terminar esta parte, agregue su texto.
Pasemos a la siguiente parte, de la misma manera que antes, dibuje un rectángulo blanco con contornos grises #cacaca.
Siempre con la herramienta rectángulo (U) dibuja otro rectángulo azul # 36caf4 y dejarlo.
Luego, ve al fusionar opciones .
Entonces ponlo en recorte yendo en Menú> Capa> Crear máscara de recorte
Luego importa iconos de redes sociales y ajústelos así.
Luego agregue algo de texto, en nuestro ejemplo es un cuadro para el personal
Luego haga lo mismo creando más rectángulo y algo de texto como se muestra en la imagen de abajo.
Ahora importe una imagen y colóquela en la parte inferior de la página, también llamada pie de página, y aplíquela en los mismos pasos que hizo para que el encabezado obtenga una imagen con poca luz.
Luego agregue un poco de texto e importe algunos iconos de redes sociales.
Para el formulario de contacto, dibuje cuatro rectángulos con un fondo transparente y un contorno blanco de 1-2 píxeles.
Luego dibuja un rectángulo redondeado usando la herramienta rectángulo redondeado (U) con un Rayo de 5px y el color azul # 3ec1f1 .
Luego agregue su texto así.
Finalmente, dibuja un rectángulo gris # 1e1e1e y agregue sus derechos de autor.
Lo que te da el siguiente resultado.
