Plantillas de Photoshop | Tutoriales | Photoshop » Archivos .PSD

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

Plantilla PSD para theme Wordpress

shutdown — Thu, 18 Feb 2010 17:49:11 +0000

Aquí os dejo esta plantilla en psd para un theme en wordpress en español. Como podéis ver contiene 2 columnas de diseño sencillo con áreas de publicidad, rss y redes sociales, lo único que nos faltaría es maquetarla en un theme y añadirla a nuestro blog.

De momento os dejo estas capturas de pantalla y la plantilla en PSD pero como podéis comprobar en este enlace “Theme en wordpress desde un archivo de photoshop” estoy trabajando en hacer de esta plantilla un theme.

En esta captura podeis observar que en el diseño se ha tenido en cuenta el añadir un banner 468×60 en el header (rectangulo blanco junto al logotipo).

Aqui podeis ver que tenemos en cuenta el lector rss y publicidad en el sidebar (banner de 125×125)

Aquí podeis ver el resto del sidebar con las redes sociales y las categorías, enlaces o lo que querais añadirle desde wordpress.

Próximamente tendréis listo el theme para añadir a vuestro blog pero recordad que podeis pedir que os diseñe o que os maquete alguna funcionalidad en concreto si teneis pensado usarlo para vuestro blog personal.

Descargar || Plantilla PSD de un theme en Wordpress

Si quereis aprender a hacer este tipo de plantillas aquí os dejo algunos link interesantes:

Tutorial de RecursosPSD como hacer tu propia plantilla (Tutorial en español)

Tutorial para crear una web 2.0 (tutorial en inglés)

Espero vuestras dudas o sugerencias…un saludo enorme!!

Crear una plantilla web en photoshop

shutdown — Tue, 19 Jan 2010 00:25:45 +0000

Datos del tutorial:

Programa: Adobe PhotoShop CS3
Dificultad: Media
Tiempo de realización: 1,5 Horas

Vista previa de la plantilla que vamos a crear:

Paso 1 – Configurar el documento de photoshop

Lo primero es abrir adobe photoshop y crear un nuevo documento con las siguientes medidas: 960px de ancho y 800px de alto, aunque estas medidas no son fijas sino que dependen del contenido que necesitemos incluir después en la página.

Lo siguiente es configurar las guías para tener claro los límites de la plantilla.

* (Para añadir guías al documento debemos ir al menú Ver > Mostrar reglas y aparecerán unas reglas que podremos configurar para que se muestren en píxeles, centímetros, etc. Tras configurar estas reglas solo tenemos que pulsar sobre ellas y manteniendo pulsado arrastrar el ratón al documento y aparecerán las Guías).

Una vez tengamos las guías sobre el documento como se muestra en la imagen, tenemos que ir a Imagen > Tamaño de lienzo y ampliar el documento a 1100 píxeles por 1000 píxeles. Como veréis a continuación con esto creamos un espacio alrededor de nuestro sitio web para poder crear el fondo.

Ahora rellenamos el fondo de blanco y renombramos la carpeta para dejarlo ordenado.

Paso 2 – Creación del fondo:

Para este tutorial hemos escogido este motivo de mar, así que el fondo será con estos tonos de azul.

Para realizarlo usaremos la herramienta degradado en una nueva capa, elegimos los tonos de azul que vayan con este motivo, aunque como siempre esto es un poco al gusto de cada uno.

Como veis hemos borrado con cuidado los bordes del motivo y con mucho cuidado lo hemos integrado en el degradado sin que se note.

Paso 4 – Crear el menú principal translucido:

Este paso es el más importante del tutorial ya que sobre esta estructura que vamos a crear se basará toda la plantilla.

En primer lugar cogemos la herramienta de Rectángulo redondeado, y seleccionamos el radio de 20px para conseguir ese efecto de esquinas redondeadas. Una vez lo hemos seleccionado lo aplicamos ocupando totalmente las medidas de las guias.

Ahora para hacer el efecto de translucido tenemos que irnos los efectos de capa, donde aplicaremos la siguiente configuración:

Paso 5 – Configuramos las guías para contenido:

Ahora añadimos unas guías para encuadrar correctamente el contenido que vamos a introducir en la plantilla y así facilitar la tarea.

Las guías son de 40 píxeles hacia dentro:

Paso 6 – Barra de navegación:

Para hacer el efecto que tiene el menú de navegación solo tenemos que cortar un trozo de la capa del menú principal y dejar a los estilos de capa hacer si trabajo.

Para hacer el recorte nos vamos a la herramienta de forma rectangular y en las propiedades de dicha herramienta aplicamos un radio de 10 px de radio, para que al aplicar la selección en la esquina superior derecha del menú consigamos este resultado:

Una vez tenemos este resultado solo necesitamos rellenarlo con el texto de los distintos apartados. Sobretodo tener cuidado al escoger la tipografía y procurar que le quede bien al diseño que queréis hacer.

Ahora le damos un efecto muy sutil al texto para conseguir el efecto que veis en la imagen anterior. Para ello nos vamos a los estilos de capas y aplicamos lo siguiente:

Con esto ya tendríamos el menú de navegación terminado, a falta del efecto focus del ratón, o lo que es lo mismo, cuando pasamos el ratón por las letras.

Paso 7 – Efecto de foco en el menú

Para conseguir el efecto de foco creamos una forma rectangular con el color que nos guste y la situamos por debajo del texto, después nos vamos a los estilos de capas para añadir algunos estilos.

Una vez aplicados estos estilos, ya podremos ver como quedaría sobre el botón el efecto de foco o focus.

Pasamos a realizar el último efecto sobre la forma ya terminada. Para ello seleccionamos la forma eliptica y la rellenamos con un color negro, la duplicamos y las situamos una encima de la imagen y otra por debajo:

A continuación le aplicamos un efecto de desenfoque gaussiano (Filtro> Desenfoque> Desenfoque Gaussiano) y tras esto hacemos una selección de la figura por la mitad y pulsamos suprimir:

Repetimos el proceso con la otra figura y ya tenemos terminada nuesto menú de navegación.

Paso 8 – Logo en el encabezado

Antes de terminar el encabezado debemos añadir el logotipo sobre la interfaz, yo en este caso he utilizado la misma fuente que en el menú de navegación, hago una selección de la figura y elimino dicha selección de la interfaz principal.

Ahora pulsamos suprimir y este seria el resultado, vemos como actúan los efectos de esta capa.

*Nota: Si tenemos algún tipo de logotipo podemos integrarlo también al lado del texto que hemos creado, intentado integrarlo en el diseño de la web.

Paso 9 – Interfaz de artículos destacados

Ahora vamos a crear el sitio donde van a ir aquellos artículos que queramos destacar o que queramos mostrar como principal. Para ello lo único que tenemos que hacer es seleccionar la herramienta de forma redondeada y aplicarle un radio de 10 píxeles.

Tras esto hacemos una selección sobre el menú principal y lo borramos.

A continuación seleccionamos la herramienta de selección con la forma de óvalo. Con la herramienta pincel y el mismo color del menú principal pintamos el óvalo.

Podemos observar como se aplica el efecto de la capa sobre los óvalos, dando así el efecto deseado.

Por último añadimos una flecha negra en el interior del óvalo y lo duplicamos a ambos lados.

Paso 10 – Crear contenido principal

En primer lugar calculamos tres columnas con su contenido para que éste quede centrado en todas.

Una vez observamos cual es la mejor estructura podemos empezar a rellenar con contenidos, en este caso mi contenido es ficticio, pero en un caso real debéis pensar que contenidos hay que poner en el index de la web.

Como veis en la imagen hemos colocado el texto a falta de alguna imagen relacionada con lo que vamos a escribir.

Cuanto más originales seáis insertando imágenes más exclusiva será vuestra web. En mi caso junto a redes sociales he compuesto una tira de las redes sociales a las que tiene acceso la web.

Paso 11 – Leer más y barras separadoras

No olvidemos crear un botón para cada artículo con el que podamos ampliar la pequeña información que damos en el index. Para ello, lo que hemos hecho es escribir “leer más” y aplicarle unos efectos de capa para diferenciarlo del contenido.

Aquí podeis ver los efectos de capa que les hemos aplicado:

Ahora solo debeis duplicarlo y colocarlo debajo de cada contenido.

Además para separar las secciones de la web hemos cortado la interfaz del menú principal con unas pequeñas franjas que actúan como separadores de contenidos.

Son sencillas de hacer, únicamente debemos seleccionar y darle a suprimir.

Paso 12 – Rellenar el sitio de imágenes y textos

Finalmente solo tenemos que rellenar el contenido principal de la plantilla psd y así quedará terminada y lista para el siguiente paso, maquetarla y darle funcionalidad.

Conclusión

Como habéis podido comprobar no hemos aplicado trucos muy complejos ni efectos complicados pero si hemos conseguido una plantilla en photoshop bastante bonita y original.

Espero que las técnicas utilizadas en este tutorial lo podáis aplicar a vuestros propios diseños.

Además podeis descargar la plantilla en psd, la imagen de fondo, y los distintos iconos que se han usado para esta web.

Plantilla PSD | Descargar

Archivos .PSD – 10 archivos para el diseño web

shutdown — Fri, 11 Dec 2009 21:04:32 +0000

Tras una larga búsqueda por varios sitios de la red, he encontrado varios recursos en PSD especialmente orientados en la creación y el diseño de sitios web. Ya sean Blog, Portales o portafolios para empresas, estos recursos seguro le son de utilidad para aprender o usar.

Botones estilo 2.0 en PSD

Botones estilo Windows 7 en PSD

Botones estilo flash en PSD

Pack de plantillas WEB en PSD

Plantilla Portafolio en PSD

Plantilla Business en PSD

Plantilla de flechas estilo Pixel en PSD

Plantilla de un portal Web en PSD

Plantilla de un portal de torrent en PSD

Plantilla de un sitio web en PSD

Y hasta aquí 10 de estos aportes para ayudaros a diseñar vuestro sitio web y ayudaros a aprender como se hacen estos diseños.

Archivos .PSD – de Consolas y aparatos

shutdown — Thu, 10 Dec 2009 14:46:47 +0000

Después de un merecido puente y de unos días para recopilar información vuelvo a la carga para presentaros varios paquetes de plantillas en PSD. Este primer paquete está compuesto por varias plantillas PSD de aparatos multimedia, consolas, mp3, teléfonos móviles… todo en PSD.

Plantilla .PSD de MICROSOFT ZUNE

Plantilla .PSD del Iphone 3G

Plantilla .PSD de la PSP de Sony

Plantilla PSD de la PS3 de Sony + Icono

Plantilla PSD de una Xbox360

Plantilla para hacer una caratula de un juego de NDS

Plantilla de los nuevos IPODs NANO

Plantilla PSD del Ipod Nano Classic

Plantilla del Logo Xbox360 para logros etc

Plantilla PSD del Nokia 5800

Y hasta aquí esta lista de plantillas para descargar en PSD, espero que sea de mucha ayuda y que os haya gustado.

Fuente | deviantart

Recursos PSD – Pack de plantillas en PSD

shutdown — Sun, 22 Nov 2009 14:26:04 +0000

Buenos días a todos, esta mañana buscando por internet he dado con un estupendo repertorio de plantillas en PSD para descargar gratis, así que me he decidido a compartirlas con todos vosotros.

Manzana en PSD | Descargar

Batería en PSD | Descargar

Este para mí es el más interesante de todos, varias plantillas de páginas web en formato PSD.

Plantillas Web | Descargar

Burbuja en PSD | Descargar

Un saludo a todos y no dudeis en comentar cualquier duda o pregunta.

Recursos PSD – Logotipo en PSD y Ai

shutdown — Tue, 17 Nov 2009 17:48:09 +0000

Despues de toda la tarde practicando en Adobe Ilustrator (para mi ese gran archienemigo) he conseguido diseñar un logotipo para esta web. No lo voy a usar para nada, pero por si os sirve de algo os comparto el logotipo para descargar gratis en PSD y en Adobe Ilustrator.

Logotipo PSD + Adobe Ilustrator | Descargar