Convert Photoshop designs to CSS website Convertir Photoshop modèles de site CSS

Posted on April 26, 2008 at 5:13 am Posté le 26 avril, 2008 à 5:13 am

Are you a kickass Photoshop person? Êtes-vous une personne kickass Photoshop? Can you create amazing looking designs using your Photoshop skills? Pouvez-vous créer des dessins étonnants recherche en utilisant vos compétences Photoshop? 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 tel est le cas, vous pourriez vous trouver la création du site Web maquettes dans Photoshop pour les clients et passer ensuite sur la conception vers le site web codeurs pour obtenir le produit 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 vous faites partie des nombreuses personnes qui créer des sites web dans Photoshop, vous pourriez être intéressés par un service en ligne gratuit qui vous permettra de convertir vos Photoshop dans une conception strictement conforme à la norme XHTML CSS site!

psd2css en ligne

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!). Essayer de comprendre et le code CSS un site Web peut être difficile et une tâche difficile (merci à Microsoft et quatre versions d'IE sur le marché!). It’s much easier, at least for me, to play around in Photoshop and create simple yet cool-looking designs. Il est beaucoup plus facile, du moins pour moi, pour en faire le tour dans Photoshop et créer simple mais cool modèles prospectifs.

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. est complètement gratuit et vous permet de télécharger des fichiers dans les deux Photoshop ou Gimp, si vous n'avez pas une copie de Photoshop, vous pouvez utiliser le libre et open-source photo-programme d'édition, The Gimp.

psd vers 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. Lors de la création de votre site web, vous devez vous assurer que vous utilisez couches comme c'est ce que PSD2CSSOnline lit de déterminer les différentes parties d'une page Web. The trick is to keep the parts of your page that you want separate in different layers of your .PSD file. L'astuce est de garder les pièces de votre page que vous souhaitez séparé en différentes couches de votre compte. Fichier PSD.

There are a couple of simple guidelines you should follow in order for this process to work. Il ya une couple de simples directives, vous devriez suivre pour que ce processus fonctionne.

  • 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. Ne pas faire un paquet de couches - Si vous êtes un utilisateur avancé Photoshop, vous avez peut-être créé de nombreuses couches que tous les combiner ensemble pour faire un seul objet. For example, your logo might actually be made of 5 to 6 different layers - but the logo is still one object. Par exemple, votre logo pourrait en fait être de 5 à 6 couches différentes - mais le logo est toujours un objet. 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. Ne pas télécharger le fichier avec le logo toujours séparés dans les 5 ou 6 couches - les fusionner en un ensemble unique "logo" couche.
  • Opacity and Blending Options - You need to rasterize any layer with opacity at anything other than 100%. Opacité et mélange Options - Vous devez rasterize un calque avec une opacité à autre chose que 100%. In Photoshop, you can rasterize a layer by right-clicking on the layer and choosing “ Rasterize Type ” or “ Rasterize Layer “. Dans Photoshop, vous pouvez rasterize une couche en faisant un clic droit sur le calque et en choisissant "Rasterize Type" ou "Rasterize couche". 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” . Dans Gimp, créer un vide couche juste au-dessous de celui que vous souhaitez rasterize, puis cliquez avec le bouton droit sur le nouveau calque et choisissez "Fusionner vers le bas". This will rasterize the layer and merge it. Cela rasterize la couche et fusionner.
  • Modify Gimp Layer Sizes - For some reason the Gimp likes to make layers the same size as the image. Modifier Gimp couche Dimensions - Pour une raison quelconque, Gimp aime faire des couches de la même taille que l'image. This makes inefficient as you end up with lots of big image files in your web page. Ce qui rend inefficace que vous vous retrouvez avec beaucoup de gros fichiers d'images dans votre page 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” . Pour toute autre couche dans Gimp où l'objet est plus petit que la page entière (la plupart de vos calques), cliquez sur le calque, puis dans le calque et choisissez "automatique du calque".
  • 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. 4 Mo PSD Taille du fichier Limite - C'est la plus grande taille de fichier que vous pouvez télécharger, mais c'était juste un nombre aléatoire choisi par le créateur. You can email him and he’ll let increase the limit! Vous pouvez envoyer lui et il va laisser augmenter la limite!

That’s all you need to keep in mind! C'est tout ce que vous devez garder à l'esprit! Go ahead and create your web page in Photoshop or GIMP and then upload it to see how it turns out! Aller de l'avant et créer votre page web dans Photoshop ou GIMP, puis le transférer à voir comment elle tourne!

Hopefully, the look you had created comes out in your final HTML output. Il faut espérer que l'aspect vous a créé est dans votre dernière sortie HTML. You can also try out a couple of other online services for converting PSD designs to web pages, but they are not free: Vous pouvez également essayer une couple d'autres services en ligne pour la conversion de la Division du secteur privé la conception des pages Web, mais ils ne sont pas 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. Ce service est aussi appelé DSP tranchage, si vous voulez connaître le terme technique pour elle. 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 vous ne vous sentez pas comme payer les gens à faire ce découpage pour vous et PSD2CSSOnline ne fonctionne pas de votre conception complexe, vous pouvez effectuer les opérations de tranchage-vous!

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: Voici quelques frais tutoriels et des guides que vous pouvez lire sur la manière de concevoir un site dans Photoshop, puis le convertir 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. Tout en mai PSD2CSSOnline pas être le meilleur outil pour les grands créateurs, il s'agit d'une excellente façon de commencer si vous n'êtes pas très familier avec CSS et HTML. And it’s free, so it’s always worth a shot! Et c'est gratuit, il est donc toujours d'une valeur shot! Enjoy! Apprécier! Source: ToThePC

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

If you enjoyed this post, make sure you Si vous avez aimé ce poste, assurez-vous subscribe to my RSS feed s'abonner à mes flux RSS ! !

» Filed Under »Classé dans Web Site Tips Site Web Conseils

Related Posts Postes connexes

4 Responses to “Convert Photoshop designs to CSS website” 4 réponses à "Convertir Photoshop dessins de site CSS"

  1. Siddharth Siddharth said on : dit le: April 26th, 2008 at 8:38 am Avril 26e, 2008 chez 8:38 am

    Nice thingy Nice thingy
    Will use it whenever in emergency Utilisera chaque fois que dans les situations d'urgence :)


  2. Shaun Shaun said on : dit le: April 26th, 2008 at 10:41 am 26 avril 2008 à 10:41 am

    Hi Aseem - Salut Aseem --

    I want to thank you for the great website and the great article on psd2cssonline.com . Je tiens à vous remercier pour le grand site et le grand article sur psd2cssonline.com.

    I just wanted to let you know that the max file size has been bumped to 8MB now. Je voulais juste vous faire savoir que la taille de fichier max a été évincé de 8MB.

    And we’re adding new features all the time! Et nous sommes en ajoutant de nouvelles fonctionnalités tout le temps! Image Roll Overs, text areas, links, zip file download (as well as the old ‘Save As…’ option), auto centered pages and more. Roll image de contrôle, zones de texte, des liens, télécharger le fichier zip (ainsi que l'ancien «Enregistrer sous…" en option), auto centrée pages et plus.

    Thanks again for the great website and article. Merci encore pour le plus grand site et de l'article. Keep up the good work! Continuez votre bon travail!

    – --
    Shaun
    http://psd2cssonline.com


  3. akishore akishore said on : dit le: April 27th, 2008 at 7:14 pm 27 avril 2008 à 7:14 pm

    Shaun, no problem at all, it’sa pretty cool service! Shaun, pas de problème du tout, c'est assez cool! Converting from Photoshop to an actual website can be a pretty daunting task if you’re not a pro, so this really helps. Conversion depuis Photoshop pour un site Web réel peut être une tâche assez redoutable si vous n'êtes pas un pro, si vraiment cette aide.


  4. dilip patel Dilip Patel said on : dit le: April 30th, 2008 at 2:09 am 30 avril 2008 à 2:09 am

    hi like the site very much like psd2cssonline.com and and it’s relay working in it and the give whole div base codding in within a few second and also i have try to make his naming conversation and after i have uplode that file on it and seen the result its good only the few changes are require after the codding like bg color etc salut comme le site ressemble beaucoup à psd2cssonline.com et et son travail en relais et donner toute la base de div dans Codding dans un peu de deuxième et j'ai aussi essayer de faire sa dénomination conversation et après j'ai uplode sur ce fichier, il et vu le résultat de ses bons seulement les quelques changements sont tenus après la Codding comme bg couleur etc

    Thanks Merci
    dilip Dilip


    Please post your comments/suggestions! S’il vous plaît envoyer vos commentaires / suggestions!