Plantillas de Photoshop | Tutoriales | Photoshop

¡¡¡100 Primeras entradas de recursospsd.com!!!

shutdown — Fri, 04 Jun 2010 11:15:41 +0000

Hoy es un pequeño gran día, ya que recursospsd.com cumple sus 100 primeros post (y los que nos quedan) y la verdad, me parece un momento fantástico para hacer un resumen de lo que hemos hecho en estos primeros meses.

Las estadísticas no podrían ser mejores, teniendo en cuenta el poco tiempo que tiene el sitio web y es que las visitas superan las 9.000 y las 34.000 páginas impresas (según Google Analytics) y aunque nuestros ingresos no son demasiado espectaculares, esperamos que poco a poco todo vaya a más y tengamos por fin un buen blog donde vosotros, los usuarios encontréis una buena referencia para aprender día a día junto a nosotros.

Un pequeño resumen de todo lo que hemos ido compartiendo para todos vosotros:

Lo principal han sido nuestras plantillas para photoshop de distintos diseños web:

Algunos de nuestros tutoriales más visitados:

Espero que nuestros éxitos sean vuestros y sigamos creciendo día a día.

Gracias a todos —

Ejemplos de como usar fotografias para diseño web

shutdown — Wed, 02 Jun 2010 11:47:51 +0000

Algo que siempre es útil a la hora de hacer una web que impresione visualmente es insertar una buena fotografía (propia o de librería) en su diseño. Este recurso de diseño es un buen método para usar en portafolios personales o para mostrar las instalaciones de nuestro negocio.

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

Tutorial para diseñar y programar tu propio portafolios personal

shutdown — Tue, 01 Jun 2010 14:32:54 +0000

Buenas a todos/as los amantes del diseño Web, después de un largo tiempo de descanso para mi persona vengo con algunas novedades en el mundo del blog, el diseño, la fotografía y la Web.

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

Tutoriales para añadir efectos de acuarela a nuestras fotografías

shutdown — Wed, 12 May 2010 09:08:49 +0000

Me considero un amante de la fotografía y de me encanta conseguir efectos llamativos a mis fotografías así que, como era de esperar, cada día voy aprendiendo nuevas técnicas y sigo buscando tutoriales para realizar.

Lo último que me llamo la atención son esos impresionantes efectos de acuarela en nuestras fotografías. Anteriormente ya vi como retocar la piel y el pelo de nuestras fotografías para dejarlas perfectas y ahora dejo una recopilación de efectos de acuarela para nuestras fotografías de manos de la web bluefaqs.com.

Crear un wallpaper abstracto con efecto de acuarela.

Efecto de dispersión

Efecto de acuarela para nuestras fotografías en 10 sencillos pasos.

Transformar una foto en una pintura china.

Efecto acuarela fresca en una fotografía.

Estupendo efecto acuarela en photoshop.

Tutorial para crear un wallpaper publicitario con efecto acuarela en photoshop.

Tutorial para crear un poster de acuarela en photoshop.

Tutorial texto de acuarela en photoshop.

Wallpaper tipográfico de acuarela en photoshop.

Enlace: bluefaqs.com

Tutorial para diseñar una plantilla web sencilla en photoshop

shutdown — Thu, 29 Apr 2010 15:14:24 +0000

En este tutorial aprenderemos a realizar el diseño de la plantilla Web en PSD que os compartimos días atrás. Se trataba de una plantilla sencilla y con un diseño muy actual.

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!!

Plantilla web sencilla en photoshop CS3

shutdown — Wed, 28 Apr 2010 22:06:38 +0000

Buenas tardes a todos, aquí os traigo una nueva plantilla web diseñada en photoshop y en PSD lista para descargar. Como vereis es una plantilla sencilla y con un diseño de galería de fotos para los que se atrevan con el Javascript.

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

14 Galerías de fotos y presentaciones de diapositivas con JavaScript y CSS

shutdown — Wed, 28 Apr 2010 14:30:55 +0000

Algo muy de moda ahora en el mundo de la web es la introducción de diapositivas o álbumes de fotos que muestren a modo de introducción las instalaciones de nuestra empresa, nuestras fotografías personales o nuestros trabajos de diseño profesionales.

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.