En sixrevisions.com nos muestran varios ejemplos de lo que se puede conseguir con una buena cámara de fotos y buena mano en diseño web y maquetación con varios ejemplos profesionales de web con fotografías en el interior de sus diseños.

Blog de 2kgames

Firefly Photography

Joshhemsley.com

Radimkurka

Wise deepstandard

Como podéis observar, varios de estos ejemplos pertenecen a artistas freelance que consiguen con esta técnica dar a conocer algo más de ellos o de sus propios trabajos, y es esto mismo lo que hace que esta técnica sea tan popular.

Fuente y toda la lista de ejemplos: Sixrevisions

La primera de estas novedades es un excelentísimo tutorial con buenos ejemplos y muy bien explicado por su autor, donde nos enseña a diseñar un fantástico portafolios con grandes efectos y un diseño muy elaborado.

Para todos aquellos que quieran tener el suyo y de paso aprender a hacerse su propio espacio os dejo este tutorial de pvmgarage.com sobre como diseñar y maquetar un portafolios personal.

Descargar los archivos del tutorial : WaterColored Portfolio Archives

Ejemplo del portafolios ya terminado : WaterColored Portfolio

Fuente: pvmgarage.com

El tutorial es corto y aproximadamente de 30 / 40 minutos de duración y se ha realizado en photoshop CS3.

Parte 1 – Preparar el documento en photoshop:

Como siempre lo primero y esencial es preparar el documento para empezar a trabajar sobre él. Para ello creamos un documento nuevo con las medidas 860×1024 píxeles y colocamos las guías en los bordes superiores y laterales:

A continuación vamos identificando las partes del diseño.

Parte 2 – Identificar las partes de las que constará el diseño Web:

Una vez tenemos el documento completamente preparado para diseñas nuestra plantilla Web en photohop, necesitamos identificar las distintas partes de nuestro diseño usando las guías.

Una vez tenemos claro las medidas de todas las partes pasamos a trabajar detalladamente en cada una de ellas.

Parte 3 – Cabecera o header:

La cabecera o header de nuestro diseño Web en photoshop es muy sencillo ya que solo colocaremos el logotipo de la página con algunos detalles más.

Como veis vamos a crear una barra superior en nuestra cabecera de color azul y otro mucho más pequeño sobre esta de color negro:

Tras colocar el logotipo y nuestra barra sobre el fondo blanco pasaremos a diseñar la barra de navegación de nuestro diseño Web en photoshop.

Parte 4 – Barra de navegación:

Para colocar la barra de navegación de nuestro diseño Web nos ayudaremos de las guías en photoshop:

Como veis lo unico que pondremos serán los textos de los distintos apartados en los que estarán dividida nuestra plantilla Web en photoshop:

Una vez colocados todos, pasamos a diseñar la parte más llamativa de la Web:

Parte 5 – Banner o galería de fotos:

Lo primero para diseñar la galería de fotos de la Web es crearle un fondo negro que abarque casi toda la forma:

Una vez creado el fondo pasamos a la estructura básica de la galería de fotos pero haciendo que esta quede un poco más abajo del fondo negro, haciendo que sobresalga:

Para crear el cuerpo principal nos ayudamos de la herramienta de forma personalizada y elegimos la forma de rectángulo redondeado aplicándole 15px de radio y los siguientes efectos de capa (#004caa):

A continuación solo tenemos que crear las formas para pasar a la siguiente diapositiva (lo mejor son unas flechas) y aplicarle los efectos de capa siguientes:

El último paso es buscar una fotografía o diapositiva que queramos poner a dicha Web cuando la maquetemos y colocarla de tal forma que simule que ya está finalizada para poder ver el resultado final del banner en nuestra plantilla Web en photoshop:

Ahora pasamos al diseño y relleno del cuerpo de la plantilla Web en photoshop.

Parte 6 – Cuerpo de la Web:

El cuerpo de la Web estará formado por 3 banner medianos y los textos debajo de ellos, además de ampliar la información sobre nuestra entidad más abajo:

Lo primero será colocar los banner y encuadrarlos mediante las guías de photoshop:

Ahora le aplicamos estos estilos de capa a los banner:

Una vez aplicados quedarían así:

A continuación colocaremos los textos (en este caso usaremos Lorem Ipsum) para rellenar:

Tras todo esto crearemos un separador para el cuerpo:

Tras el separador rellenamos con más texto el cuerpo quedando el diseño del mismo y de la plantilla Web en photoshop casi terminado

Despues insertamos unas fotografías ficticias para ver el resultado final:

Ahora pasamos al footer:

Parte 7 – Footer:

En el footer pondremos un color más llamativo ya que es algo que está demostrado ve todo el visitante de una web. Usaremos el azul que usamos en la cabecera:

Una vez más debemos tener claro lo que queremos añadir a este apartado del diseño web en photoshop. En nuestro caso vamos a poner un formulario de contacto y las últimas actualizaciones de nuestro blog. Eso si, siempre en photoshop:

Para crear el formulario usaremos la herramienta de forma rectangular y aplicaremos los siguientes estilos de capa:

Tras todo esto pasamos al apartado donde colocaremos las distintas redes sociales donde nos podrán seguir aquellos usuarios interesados:

Mediante la herramienta de rectángulo redondeado y ajustando la forma con un sesgado conseguimos:

Ahora colocaremos el texto y los distintos iconos y nos quedaría:

Ya tendríamos nuestra plantilla totalmente diseñada:

Parte 9 – Reflexiones finales:

Como último paso y para que se presente el diseño de mejor forma ajustaremos el tamaño del lienzo a unas medidas mas grandes lo cual nos creará unos bordes a todos los lados:

Ya sabéis que si alguno de vosotros estáis interesados en maquetar esta plantilla, enviarme un email con más información y se os realizará dicho trabajo.

Descargar : Plantilla web sencilla en photoshop CS3

Un saludo a todo!!

El diseño es un diseño sencillo pero actual ya que se han tenido en cuenta que sea facil de maquetar para los desarrolladores web.

A continuación capturas de pantalla y el enlace de descarga:

Descargar grátis: Plantilla web en PSD sencilla

Y para facilitar el trabajo de implementación de estas aplicaciones para web aquí os traigo una recopilación realizada por webdeveloperjuice.com donde nos muestran 14 pases de diapositivas realizadas mediante JavaScript y CSS.

Aquí os dejo las más interesantes:

Pikachoose

Ver demo

Workshop.rs

Ver demo

Gadgetinspiration

Ver demo

Serie3.info

Ver demo

Cssglobe

Ver demo

Fuente: webdeveloperjuice.com

Parte 1: Preparar el documento PSD.

Como siempre, lo primero es preparar el documento PSD en photoshop para empezar a trabajar.

Creamos un nuevo documento en photoshop con las medidas 860 x 1024 píxeles y colocamos las 4 guías en los bordes del documento:

Ahora nos vamos a imagen/tamaño de lienzo y agrandamos el lienzo con las medidas 1100 x 1200 píxeles. Como veréis esto dejará las guías previamente colocadas marcando la posición centrada que deberá llevar nuestro diseño.

Parte 2: Formas básicas de la Web.

Ahora decidiremos las partes de las que va a constar nuestra Web y las iremos pintando y definiendo sin aplicarles ningún tipo de detalles, únicamente el color.

Una vez decididas las formas básicas de la Web, las medidas etc., pasamos a los detalles por secciones.

Parte 3: Barra superior.

Esta barra la colocamos por si en un futuro nos interesa insertar en nuestra Web algún tipo de información, varios idiomas u otro tipo de información.

A continuación os muestro los efectos de capa que se le han aplicado:

Y nos quedaría una resultado como este:

Pasamos entonces a los botones de navegación.

Parte 4: Barra de navegación y el logotipo de la Web.

En el siguiente paso vamos a crear la barra donde situaremos el logotipo de la Web y los distintos botones de navegación de la Web.

Para ello seleccionamos la herramienta de rectángulo y la rellenamos de color blanco:

Este sería el resultado:

A continuación insertamos el logotipo previamente creado (en este caso ficticio):

Y ahora vamos creando capas de texto con los distintos apartados de los que va a constar nuestra Web:

Nosotros hemos escogido una tipografía especial pero vosotros podréis escoger la que queráis o la que encaje más con vuestros diseños.

Para colocarlas nos podremos ayudar de las guías de photoshop las cuales nos facilitarán muchísimo el trabajo:

Pasamos al banner principal donde colocaremos alguna jquery de transición o algún tipo de visor de fotografías:

Parte 5: Banner principal.

Lo primero será crear un fondo interesante para esta parte de la Web. En este caso rellenaremos el fondo de la Web de un color gris – claro y con la herramienta forma crearemos una forma de 6 lados

Ahora la iremos multiplicandos y sumando las capas y las añadimos a un fondo gris muy claro:

Una vez creado y aplicando una capa superior con unas sombras superiores e inferiores nos debería quedar algo así:

Para continuar y ayudándonos con las guías de photoshop y tomando correctamente las medidas para que quede completamente centrado seleccionamos la herramienta de forma y hacemos clic sobre la forma de rectángulo redondeado con un color negro:

Le damos unos 10 pixeles de radio a la forma y le aplicamos los siguientes estilos de capas:

Una vez ajustados todos los ajustes de capas deberíamos tener algo así:

Ahora y para conseguir mayor efecto de realismo le añadimos alguna fotografía ficticia y la recortamos conforme a la forma del banner y añadimos un pié de foto.

Nos quedaría como resultado final del banner algo así:

Pasamos al cuerpo principal del diseño:

Parte 5: Cuerpo, texto e iconos de la Web.

Para el cuerpo principal simplemente debemos crear una forma que abarque de largo todo aquello que queramos mostrar y aplicarle un degradado donde se vaya fundiendo con el fondo del cuerpo:

Como veréis a continuación la forma de capa se desvanece sobre la mitad de la plantilla para después crear unas pequeñas formas rectangulares redondeadas para ir incrustando el texto de una forma más bonita:

Ahora añadimos los iconos a la parte de características de la Web:

Y a la parte de abajo, en cada caja de texto pondremos un icono distinto de un tamaño algo mayor

Este sería el resultado, ahora solo faltaría el texto:

Y tras añadir el texto nos quedaría:

Ahora pasamos a la barra de redes sociales donde colocaremos unos enlaces para que el usuario sepa que nos puede seguir en las distintas redes sociales o rss.

Parte 6: Barra de redes sociales:

Esta parte es algo más sencilla ya que consta de pocas partes. Lo primero será conseguir los iconos de las redes sociales donde pertenezcamos:

Después crearemos una barra pequeña de tamaño y de un tono gris donde pondremos en una capa de texto lo siguiente y ayudandonos de las guías de photoshop añadiremos los iconos de redes sociales quedandonos tras todo esto algo así:

Y por último pasamos al footer donde colocaremos el contacto y un enlace a los trabajos de nuestra galería, etc.

Parte 7: Footer.

Lo primero es definir la forma del footer y el tamaño que tendrá, etc y una vez que hemos decidido eso pasamos a colocar la primera forma, que será igual de ancha que el cuerpo del documento y de un tono anaranjado claro, como la barra superior:

Ahora pasamos al apartado de contacto y localización donde creamos y ajustamos una forma ectangular redondeada dandole a transformación libre – sesgar y lo ajustando a nuestro gusto:

Tras esto solo rellenamos las categorías, los últimos trabajos y el logotipo de la empresa como marca de agua

El resultado como veréis es bastante interesante:

Paso 8: Conclusiones finales:

Como conclusión final pasaríamos a maquetar la Web y quizás seguir diseñando las distintas secciones de la misma como la galería, etc.

Podéis descargar el PSD en el post anterior

Descargar | PSD plantilla Web

A continuación os pongo una sucesión de capturas de pantalla y la plantilla Web en PSD para descargar mientras voy preparando el tutorial de la misma.

Por ahora acabo de terminar el PSD y pasaré a maquetarla para que cuando esté completamente preparada podáis comentarla y disfrutarla al 100%.

Descargar | Plantilla PSD con iconos y tipografia