Pasando de Photoshop a HTML, cinco herramientas imperdibles

psd a HTML

Si tenéis el diseño de vuestra próxima web en un bonito y completo archivo Photoshop, ahora toca la peor parte: transformarlo en HTML y CSS, un trabajo que, en muchas ocasiones, requiere un número interminable de horas para que el resultado quede perfecto.

Aunque en los últimos tres años muchos han afirmado que la transformación de PSD a HTML está muerta, debido a la buena cantidad de herramientas que permiten diseñar en web sin pasar antes por Photoshop, hay muchas empresas en todo el mundo que siguen realizando el proceso tradicional, por lo que siempre es bueno estar al dí­a de los recursos existentes en esta categorí­a.

En esta lista que os presentamos hoy os mostramos cinco herramientas que pueden ayudar con este tema, a pasar de PSD a HTML y CSS, generando diseños que posteriormente puedan alterarse para crear versiones móviles y efectos que la imagen en photoshop no puede mostrar: Continúa leyendo «Pasando de Photoshop a HTML, cinco herramientas imperdibles»

PSD repo – Botones, mockups, iconos y otros cientos de recursos gratis en PSD

PSD Repo

 

Aunque Juan Pablo Sarmiento, fundador de iconshock y designshock, nos tiene acostumbrados a extensos listados con centenares de recursos gratuitos -puedes ver sus colecciones en este enlace-, he aquí­ otro portal digno de agregar a los favoritos: PSD Repo (psdrepo.com).

Se trata de una recopilación de recursos para Photoshop, un compendio de ficheros en PSD de alta calidad caracterí­sticos por estar disponibles de forma gratuita pero además por ser creados, compartidos y elegidos manualmente por profesionales del diseño. Botones, iconos, mockups, interfaces y plantillas de sitios web son los protagonistas del lugar, aunque se consiguen archivos de otros tipos.  Continúa leyendo «PSD repo – Botones, mockups, iconos y otros cientos de recursos gratis en PSD»

Dropbox mejora su previsualización de gráficos vectoriales en formato PSD, AI, SVG y ahora EPS

dropbox graficos vectoriales

Buenas noticias para los diseñadores o cualquier otro usuario que requiera herramientas y formatos especializados de edición de gráficos vectoriales y que asimismo se valgan de Dropbox para su almacenamiento y gestión online: El visor web de Dropbox ahora incluye un modo de vista previa sin aditamentos mucho más eficiente, además, a su lista de formatos compatibles se ha añadido el .EPS.

Continúa leyendo «Dropbox mejora su previsualización de gráficos vectoriales en formato PSD, AI, SVG y ahora EPS»

Completa interfaz de Bootstrap 3 en PSD con licencia de uso comercial

Desde DesignShock se han tomado el trabajo de crear un excelente recurso para entusiastas de la web, un set completo en formato PSD (Photoshop) que contiene todos los elementos presentes en la interfaz gráfica renovada de Bootstrap 3. La nueva versión de Bootstrap ha causado sensación y no son pocos los sitios que ya están empezando a aprovechar sus ventajas.

El archivo emula el estilo de Bootstrap y contiene todos los elementos incluidos en la última version del popular framework, un set como éste es perfecto para crear fácilmente maquetas de temas, aplicaciones web y móbiles de manera extremadamente fácil, olví­date del código y empieza a arrastrar los elementos a tu gusto, si quieres pasar la idea de una página, tema o aplicación a un desarrollador y quieres asegurarte de que la idea está clara, esta interfaz puede serte de gran ayuda.

Describimos a continuación las caracterí­sticas de este set:

– El archivo esta organizado cuidadosamente en capas y agrupado para que sea fácil encontrar y usar todos los elementos que se necesiten.

– Los elementos del archivo fueron creados usando diseño pixel perfect, con lo cual las lineas están ajustadas al pixel, dotando de nitidez y definición cada uno de los diseños incluidos.

– El archivo cuenta con la misma licencia de uso de Bootstrap: Apache 2.0, con lo cual puede ser usado para cualquier proyecto incluso con fines comerciales.

Un recurso para descargar lo antes posible y aprovechar al máximo, espero lo disfruten. Descárgalo aquí­.

bootstrap1

bootstrap2

bootstrap3

bootstrap4

PSDCovers.com, plantillas 3D de Photoshop para promocionar tus productos

psd covers

Si has pensado promocionar tu producto en un sitio web puedes partir de las brillantes plantillas en PSD que de forma gratuita son publicadas en PSDCovers. Aunque resultan especialmente útiles para diseñadores, pueden ser usadas con apenas habilidades básicas en el manejo de Photoshop ya que la tarea es tan sencilla como ir reemplazando imágenes y ejecutando acciones predeterminadas.

Respecto al tipo de plantillas disponibles, la mayorí­a en 3D, se destacan los clásicos eBooks, DVDs y CDs con cubiertas personalizadas, sin embargo, el sitio abarca cientos de productos más: plantillas de promoción de camisetas (puestas en maniquí­es), bolsas, tazas, botellas (licor, detergente, champú, latas etc.), folletos, tarjetas de negocios, cajas, revistas y un largo etcétera.

diseños psd productos

Quienes ofrecen software para equipos móviles y de sobremesa pueden valerse de los gestures y otros mockups de casi todos los dispositivos populares de Apple (iPad, iPod, iPhone, MacBook y iMac, este último perfecto para mostrar screenshots), del Galaxy SIII, del Nokia Lumia 920 y del HTC One. Por si fuera poco hay también vectores gratis en 2D y en blanco y negro enfocados a la parte de artí­culos electrónicos que pueden servir para crear presentaciones y guí­as.

Todo se puede descargar de forma gratuita y usar de forma libre, aunque siempre que sea posible se agradece que sea comentada la fuente. Cada action, nombre que recibe cada producción disponible para descargar, cuenta con explicaciones, detalles de calidad (resolución, medidas, formato, clasificación, etc.), recomendaciones de uso, ejemplos y solución a dudas a través de comentarios.

Enlace: PSDCovers.com

4 excelentes recursos para descargar archivos PSD gratis

Cuando necesitamos archivos PSD para nuestros diseños o como fuente de inspiración, contamos con cientos de servicios y sitios web destacados como Dribbble o DeviantArt, que agendamos en nuestro kit de recursos. Al cual podemos integrar las sugerencias que te compartimos hoy.

Por ejemplo, encontramos Designmoo, una comunidad que comparte diferentes recursos de diseños, entre ellos PSD gratuitos, teniendo una gran colección para elegir. Podemos registrarnos para ser parte de la comunidad, aunque permite la descarga sin ningún tipo de registro.

Brusheezy también es una gran comunidad con una impresionante colección de recursos compartidos por artistas de todo el mundo. Para encontrar todas las opciones de PSD disponibles solo tenemos que utilizar el buscador y seleccionarnos en mejores calificados, más populares, nuevos, etc.

PSD
365psd sigue una dinámica similar, con el bonus de enviarnos un PSD gratis cada dí­a a nuestro correo, aunque podemos recorrer el sitio para ver las opciones disponibles y descargar las que sean de nuestro interés. Por otro lado, Free Photoshop Download recopila de la web diferentes recursos para Photoshop como pinceles, plantillas, iconos, entre otros. Cada uno de los recursos que presenta contienen el link de descarga y el enlace del sitio web original.
Cuatro recursos interesantes a tener en cuenta cuando necesitemos inspiración o ayuda extra para nuestros trabajos de diseño.

css3ps – Pasando de PSD a CSS3

Crear el diseño de un sitio web y transformarlo en plantillas con hojas de estilo CSS son dos trabajos que en muchas ocasiones requieren dos tipos de profesionales diferentes, siendo necesario invertir una gran cantidad de tiempo en la transformación de la idea en archivos que un navegador reconozca como «página web».

Si trabajáis con photoshop y queréis agilizar el trabajo, podéis usar varias opciones que ayudan a crear la hoja de estilo, total o parcialmente, opciones que pueden ayudar a ahorrar varios dí­as en la creación del proyecto. Aunque en muchos casos el código generado es bastante «sucio», es una buena forma de no comenzar desde cero.

Una de las últimas opciones que han aparecido en esta categorí­a es css3ps.com, herramienta que se integra en forma de plugin y trabaja con CSS3.

css3

Es un plugin gratuito para Photoshop que realiza el trabajo en la nube para convertir las capas en CSS3. Tarda bastante en realizar la transformación, pero hay algunas demostraciones en su web que muestran como el resultado puede ser bastante completo.

Aquí­ tenéis un ví­deo mostrando su funcionamiento: Continúa leyendo «css3ps – Pasando de PSD a CSS3»

204 iconos gratuitos inspirados en Google Plus


Si vais a empezar algún proyecto con Google Plus como protagonista, o si estáis esperando como agua en mayo la API que permita crear aplicaciones para dicha red social, seguramente os interesará esta colección de iconos que acaban de presentar en webdesignshock.com.
Tanto sus colores como sus formas están inspirados en G+, existiendo formas de todo tipo que pueden formar parte de las diferentes secciones de un proyecto estéticamente atractivo.
En formatos PNG y PSD, en color y en blanco y negro y con diferentes tamaños, podéis echar un vistazo a la colección en www.webdesignshock.com/google-plus-interface-icons/

PSDVoid – Una red social para compartir archivos PSD


Hay verdaderos artistas con el Photoshop, muchos de ellos mostrando su talento en redes como Deviantart, pero hasta ahora no conocí­a algo tan especí­fico como PSDVoid.
Se trata de una red en la que podemos seguir y ser seguidos por otros photoshoperos que, de forma desinteresada, quieran publicar sus trabajos en formato PSD, permitiendo a otras personas aprender y usarlo como base para sus propias creaciones.
Cada archivo tiene una licencia especí­fica, con lo que será importante fijarse en ella antes de usarla tanto personal como comercialmente.
Cerrado de momento al público general, podemos pedir una invitación para acceder al sistema, invitación que, en mi caso, tardó menos de 12 horas en llegar.

SearchPSD – buscador de archivos PSD


SearchPSD es un interesante recurso que nos permitirá buscar trabajos gráficos realizados en PSD ya realizado por otros usuarios y que nos permitirá su acceso y descarga de manera gratuita. Cuenta con más de 1500 archivos PSD ordenados por categorí­as, según dice en su página principal.
Aquellos usuarios que deseen añadir sus trabajos en PSD, cuentan con un formulario para ello, en el que entre otras cosas, les pedirán escoger un tipo de licencia que en cualquier caso permita a los usuarios su libre descarga, no existiendo licencias restrictivas.
Nacido en Argentina, nos informan que su contenido está obtenido de bancos gratuitos, existiendo las referencias sobre su origen dentro de cada uno de los archivos.
Como siempre, antes de su uso comercial, verificad la licencia del orgen, para evitar problemas futuros.