Convert Photoshop designs to CSS website Photoshop convertire i disegni e modelli a CSS sito web

Posted on April 26, 2008 at 5:13 am Inviato il 26 aprile 2008, 5:13 am

Are you a kickass Photoshop person? Sei un kickass Photoshop persona? Can you create amazing looking designs using your Photoshop skills? Si possono creare disegni e modelli sorprendenti ricerca utilizzando il tuo Photoshop competenze? 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. In caso affermativo, potrebbe trovare voi stessi creare sito web mockups in Photoshop per i clienti e poi passare sulla progettazione al sito web codificatori per ottenere il prodotto finale in 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 ! Se sei uno dei tanti che creare siti web in Photoshop, potreste essere interessati ad un servizio online gratuito che ti consente di convertire il vostro disegno di Photoshop in un rigoroso standard XHTML CSS sito web!

psd2css on-line

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!). Cercando di capire e di uno codice CSS sito web può essere una difficile e arduo compito (grazie a Microsoft e quattro le versioni di IE sul mercato!). It’s much easier, at least for me, to play around in Photoshop and create simple yet cool-looking designs. E 'molto più facile, almeno per me, a giocare in Photoshop e creare semplici ancora fresco-looking disegni e modelli.

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. è completamente gratuita e consente di caricare file in entrambi Photoshop o GIMP, quindi se non avete una copia di Photoshop, è possibile utilizzare il libero open-source photo-editing programma, il GIMP.

PSD a 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. Quando si crea il tuo sito web design, è necessario assicurarsi di utilizzare strati come questo è quello che si legge PSD2CSSOnline capire le diverse parti di una pagina web. The trick is to keep the parts of your page that you want separate in different layers of your .PSD file. Il trucco è quello di mantenere le parti della pagina che si desidera separati in diversi strati di tuo. PSD file.

There are a couple of simple guidelines you should follow in order for this process to work. Ci sono un paio di semplici linee guida, si dovrebbero seguire al fine di questo processo di lavoro.

  • 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. Non fare un sacco di strati - Se sei un utente avanzato di Photoshop, potrebbe essere creato molti strati che tutti i combinare insieme per fare un singolo oggetto. For example, your logo might actually be made of 5 to 6 different layers - but the logo is still one object. Per esempio, il tuo logo potrebbe effettivamente essere di 5 a 6 diversi strati - ma il logo è ancora un oggetto. 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. Non caricare il file con il logo ancora separati prendere il 5 o 6 strati - fondere insieme in un unico "logo" strato.
  • Opacity and Blending Options - You need to rasterize any layer with opacity at anything other than 100%. Opacità e di miscela Opzioni - È necessario rasterize con qualsiasi livello di opacità a nient'altro che il 100%. In Photoshop, you can rasterize a layer by right-clicking on the layer and choosing “ Rasterize Type ” or “ Rasterize Layer “. In Photoshop, è possibile rasterize uno strato facendo clic destro sul layer e scegliendo "Rasterize Tipo" 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” . In Gimp, creare un vuoto di livello appena al di sotto di quella che si desidera rasterize e poi fate clic destro sul nuovo livello e scegliere "Fondi in basso". This will rasterize the layer and merge it. Ciò rasterize il livello e fondere.
  • Modify Gimp Layer Sizes - For some reason the Gimp likes to make layers the same size as the image. Modificare Gimp Layer Taglie - Per qualche ragione la Gimp piace fare strati la stessa dimensione di immagine. This makes inefficient as you end up with lots of big image files in your web page. Ciò rende inefficace in quanto vi ritrovereste con un sacco di grandi file di immagine nella tua pagina 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” . Per ogni strato in Gimp in cui l'oggetto è più piccolo di tutta la pagina (la maggior parte del vostro strati), fare clic sul layer, quindi nel livello di menu scegliere "Autoritaglio livello".
  • 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 limite di dimensione del file - Questo è il più grande dimensione del file che è possibile caricare, ma era solo un numero a caso scelto dal creatore. You can email him and he’ll let increase the limit! Potrai inviare lui e che sarà lui a far aumentare il limite!

That’s all you need to keep in mind! Che è tutto quello che dovete tenere a mente! Go ahead and create your web page in Photoshop or GIMP and then upload it to see how it turns out! Andare avanti e creare la tua pagina web in Photoshop o GIMP e poi caricarlo per vedere come si gira!

Hopefully, the look you had created comes out in your final HTML output. Si spera, lo sguardo si aveva creato esce nel tuo finale di output HTML. You can also try out a couple of other online services for converting PSD designs to web pages, but they are not free: Potete anche provare un paio di altri servizi on-line per la conversione di disegni e modelli PSD a pagine web, ma non sono libero:

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. Questo servizio è chiamato anche PSD affettatura, se volete sapere il termine tecnico per questo. 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! Se non si sente come pagare le persone a fare questo affettatura per voi e per PSD2CSSOnline non ha funzionato per il suo complicato disegno, è possibile fare l'affettamento te!

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: Ecco alcuni tutorial fresco e guide che potete leggere su come progettare un sito in Photoshop e poi convertirlo in 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. Mentre PSD2CSSOnline non può essere lo strumento migliore per le grandi progettisti, è un ottimo modo per iniziare se non si è molta familiarità con HTML e CSS di codifica. And it’s free, so it’s always worth a shot! Ed è gratuito, quindi è sempre un valore di un colpo! Enjoy! Gustare! Source: Fonte: ToThePC

Technorati Tags: Technorati: , , , , , ,

If you enjoyed this post, make sure you Se si godeva questo post, assicuratevi di subscribe to my RSS feed iscriviti al mio feed RSS ! !

» Filed Under »Archiviato in Web Site Tips Suggerimenti sito web

Related Posts Posti connessi

3 Responses to “Convert Photoshop designs to CSS website” 3 risposte a "Converti Photoshop disegni e modelli a CSS sito web"

  1. Siddharth Siddharth said on : Ha detto: April 26th, 2008 at 8:38 am 26 aprile 2008, 8:38 am

    Nice thingy Nizza thingy
    Will use it whenever in emergency La utilizzerà ogni volta che in situazioni di emergenza :)


  2. Shaun Shaun said on : Ha detto: April 26th, 2008 at 10:41 am 26 aprile 2008 10:41

    Hi Aseem - Hi Aseem --

    I want to thank you for the great website and the great article on psd2cssonline.com . Voglio ringraziarvi per il grande sito web e il grande articolo sulla psd2cssonline.com.

    I just wanted to let you know that the max file size has been bumped to 8MB now. Volevo solo farti sapere che la dimensione massima del file è stato bumped a 8MB.

    And we’re adding new features all the time! E stiamo aggiungendo nuove funzionalità tutto il tempo! Image Roll Overs, text areas, links, zip file download (as well as the old ‘Save As…’ option), auto centered pages and more. Roll Over immagine, testo settori, link, scaricare file zip (così come il vecchio 'Salva con nome…' opzione), auto centrata e più pagine.

    Thanks again for the great website and article. Grazie ancora per il grande sito web e per articolo. Keep up the good work! Mantenere il buon lavoro!

    – --
    Shaun
    http://psd2cssonline.com


  3. akishore akishore said on : Ha detto: April 27th, 2008 at 7:14 pm 27 aprile 2008, 7:14 pm

    Shaun, no problem at all, it’sa pretty cool service! Shaun, nessun problema a tutti, è un servizio pretty cool! Converting from Photoshop to an actual website can be a pretty daunting task if you’re not a pro, so this really helps. Conversione da Photoshop a un sito web può essere un compito piuttosto arduo, se non sei un professionista, quindi questo aiuta veramente.


    Please post your comments/suggestions! Vi preghiamo di inviare i vostri commenti / suggerimenti!