Convert Photoshop designs to CSS website Convierte diseños Photoshop sitio web a CSS

Posted on April 26, 2008 at 5:13 am Publicado el 26 de abril de 2008 a 5:13 am

Are you a kickass Photoshop person? ¿Es usted una persona kickass Photoshop? Can you create amazing looking designs using your Photoshop skills? ¿Se puede crear diseños sorprendentes buscando a través de su Photoshop habilidades? If so, you might find yourself creating web site mockups in Photoshop for clients and then passing on the design to web site coders to get the final product in HTML. Si es así, usted puede ser que encuentre la creación de maquetas sitio web en Photoshop para los clientes y, a continuación, pasando por el diseño del sitio Web codificadores para obtener el producto final en HTML.

If you’re one of the many people who create web sites in Photoshop, you might be interested in a free online service that will let you convert your Photoshop design into a strict XHTML compliant CSS web site ! Si usted es una de las muchas personas que crean sitios web en Photoshop, que podría estar interesado en un servicio en línea gratuito que le permitirá convertir su diseño en Photoshop un estricto compatible con XHTML CSS sitio Web!

psd2css en línea

Trying to understand and code a CSS website can be a difficult and arduous task (thanks to Microsoft and there four versions of IE in the market!). Tratar de comprender y código CSS un sitio web puede ser una difícil y ardua tarea (gracias a Microsoft y cuatro versiones de IE en el mercado!). It’s much easier, at least for me, to play around in Photoshop and create simple yet cool-looking designs. Es mucho más fácil, al menos para mí, a jugar en Photoshop y crear simple pero de aspecto fresco diseños.

PSD2CSSOnline PSD2CSSOnline is completely free and allows you to upload files in either Photoshop or GIMP, so if you don’t have a copy of Photoshop, you can use the free open-source photo-editing program, the GIMP. es totalmente gratuito y le permite cargar los archivos, ya sea en Photoshop o GIMP, así que si usted no tiene una copia de Adobe Photoshop, puede usar el libre de código abierto foto-programa de edición, el GIMP.

División del Sector Privado para CSS

When creating your web site design, you need to make sure you use layers as this is what PSD2CSSOnline reads to figure out the different parts of a web page. Al crear su sitio web de diseño, debe asegurarse de utilizar las capas ya que esto es lo que dice PSD2CSSOnline de averiguar las diferentes partes de una página web. The trick is to keep the parts of your page that you want separate in different layers of your .PSD file. El truco es mantener las partes de su página que desea separar en diferentes capas de tu. Archivo de la División del Sector Privado.

There are a couple of simple guidelines you should follow in order for this process to work. Hay un par de sencillas instrucciones que deben seguir a fin de que este proceso funcione.

  • Don’t make a bunch of layers - If you are an advanced Photoshop user, you might have created many layers that all combine together to make a single object. No hacer un montón de capas - Si usted es un usuario avanzado de Photoshop, pudiera haber creado muchas capas que todos se unen para hacer un solo objeto. For example, your logo might actually be made of 5 to 6 different layers - but the logo is still one object. Por ejemplo, su logotipo en realidad podría ser de 5 a 6 diferentes capas -, pero el logo sigue siendo un objeto. Do not upload the file with the logo still separated out into the 5 or 6 layers - merge them together into one single “logo” layer. No subas el archivo con el logo todavía separan a cabo en los 5 o 6 capas - combinarlos juntos en un único "logo" capa.
  • Opacity and Blending Options - You need to rasterize any layer with opacity at anything other than 100%. Opacidad y mezclas Opciones - Usted necesita rasterize cualquier capa con opacidad en otra cosa que del 100%. In Photoshop, you can rasterize a layer by right-clicking on the layer and choosing “ Rasterize Type ” or “ Rasterize Layer “. En Photoshop, puede rasterize una capa pulsando con el botón derecho sobre la capa y seleccionando "Rasterize Type" o "Rasterize Layer". In the Gimp, create an empty layer just below the one you want to rasterize and then right click on the new layer and choose “ Merge Down” . En el Gimp, crear una capa vacía justo debajo de la que desea rasterize y, a continuación, haga clic derecho en la nueva capa y seleccione "Combinar hacia abajo". This will rasterize the layer and merge it. Esto rasterize la capa y fusionar.
  • Modify Gimp Layer Sizes - For some reason the Gimp likes to make layers the same size as the image. Modificar Gimp Layer Tallas - Por alguna razón el Gimp le gusta hacer las capas del mismo tamaño que la imagen. This makes inefficient as you end up with lots of big image files in your web page. Esto hace ineficiente como usted termina con un montón de grandes archivos de imagen en su página web. For any layer in the Gimp where the object is smaller than the whole page (most of your layers), click on the layer, then in the layer menu choose “ Autocrop Layer” . Para cualquier capa en el Gimp, donde el objeto es más pequeño que la página entera (la mayor parte de sus capas), haga clic en la capa, después en la capa menú seleccione "Capa de autorecorte".
  • 4MB PSD File Size Limit - This is the largest file size that you can upload, but it was just a random number picked by the creator. 4MB PSD Tamaño de archivo Limite - Este es el mayor tamaño de archivo que puedes subir, pero es sólo un número escogido al azar por el creador. You can email him and he’ll let increase the limit! Usted puede email él y él va a dejar que aumentar el límite!

That’s all you need to keep in mind! Eso es todo lo que necesitas para tener en cuenta! Go ahead and create your web page in Photoshop or GIMP and then upload it to see how it turns out! Vaya por delante y crear su página web en Photoshop o GIMP y luego subirlo a ver cómo resulta!

Hopefully, the look you had created comes out in your final HTML output. Por suerte, el aspecto que se ha creado en su última salida HTML. You can also try out a couple of other online services for converting PSD designs to web pages, but they are not free: También puede probar un par de otros servicios en línea para convertir los diseños PSD a las páginas web, pero no son libres:

http://psd2css.com/

http://www.xhtml4u.com/

http://www.psdslicing.com/

http://www.htmlblender.com/

This service is also called PSD slicing, if you want to know the technical term for it. Este servicio también se llama la División del Sector Privado corte en rodajas, si desea saber el término técnico para ello. If you don’t feel like paying people to do this slicing for you and PSD2CSSOnline didn’t work out for your complicated design, you can do the slicing yourself! Si no tiene ganas de pagar a la gente a hacer esto para que usted corte en rodajas y PSD2CSSOnline no trabajo fuera de su complicado diseño, que puede hacer el corte en rodajas!

Here are some cool tutorials and guides that you can read on how to design a site in Photoshop and then convert it into HTML: Estos son algunos fresco tutoriales y guías que usted puede leer sobre la forma de diseñar un sitio en Photoshop y luego convertirlo en HTML:

http://www.sitepoint.com/article/design-website-photoshop

http://www.entheosweb.com/photoshop/layout.asp

While PSD2CSSOnline may not be the best tool for big designers, it’sa great way to get started if you’re not very familiar with CSS and HTML coding. PSD2CSSOnline Si bien puede no ser la mejor herramienta para grandes diseñadores, es una excelente manera de empezar si no está muy familiarizado con CSS y HTML de codificación. And it’s free, so it’s always worth a shot! Y es gratis, por lo que es siempre un valor de un disparo! Enjoy! Disfrutar! Source: Fuente: ToThePC

Technorati Tags: Technorati Tags: , , , , , ,

If you enjoyed this post, make sure you En caso de que haya disfrutado de este puesto, asegúrese de que subscribe to my RSS feed suscribirse a mi feed RSS ! !

» Filed Under »Presentadas en virtud de Web Site Tips Web Site Tips

Related Posts Puestos relacionados

3 Responses to “Convert Photoshop designs to CSS website” 3 Responses to "Convertir a Photoshop diseños CSS sitio web"

  1. Siddharth Siddharth said on : dice: April 26th, 2008 at 8:38 am 26 de abril de 2008 a 8:38 am

    Nice thingy Niza thingy
    Will use it whenever in emergency Lo utilizarán siempre que sea en situaciones de emergencia :)


  2. Shaun Shaun said on : dice: April 26th, 2008 at 10:41 am 26 de abril de 2008 a 10:41 am

    Hi Aseem - Hi Aseem --

    I want to thank you for the great website and the great article on psd2cssonline.com . Quiero darle las gracias por el gran sitio y la gran artículo sobre psd2cssonline.com.

    I just wanted to let you know that the max file size has been bumped to 8MB now. Sólo quería hacerle saber que el tamaño de archivo máximo ha sido golpeado a 8MB.

    And we’re adding new features all the time! Y estamos añadiendo nuevas funciones todo el tiempo! Image Roll Overs, text areas, links, zip file download (as well as the old ‘Save As…’ option), auto centered pages and more. Roll over imagen, texto, enlaces, descargue el archivo zip (así como los antiguos "Guardar como… '), centrada en las páginas de automóviles y mucho más.

    Thanks again for the great website and article. Gracias de nuevo por la gran página web y en el artículo. Keep up the good work! Mantener el buen trabajo!

    – --
    Shaun
    http://psd2cssonline.com


  3. akishore akishore said on : dice: April 27th, 2008 at 7:14 pm 27 de abril de 2008 a 7:14 pm

    Shaun, no problem at all, it’sa pretty cool service! Shaun, no hay ningún problema en absoluto, es un servicio muy bien! Converting from Photoshop to an actual website can be a pretty daunting task if you’re not a pro, so this really helps. La conversión de Photoshop a un sitio web real puede ser una tarea de enormes proporciones bastante si no eres un pro, por lo que esta realmente ayuda.


    Please post your comments/suggestions! Por favor envie sus comentarios o sugerencias!