Convert Photoshop designs to CSS website Wandeln Sie Photoshop-Designs in CSS-Website

Posted on April 26, 2008 at 5:13 am Gesendet am 26. April 2008 um 5:13

Are you a kickass Photoshop person? Sind Sie ein Kickass Photoshop Person? Can you create amazing looking designs using your Photoshop skills? Können Sie schaffen erstaunliche Aussagen Designs mit Photoshop Ihre Fähigkeiten? 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. Wenn ja, dann würden Sie sich selbst schaffen Website Mockups in Photoshop für Kunden und dann vorbei an der Konzeption zur Website Programmierer, um die Endprodukt 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 ! Wenn Sie eines der vielen Menschen, die Schaffung von Web-Sites in Photoshop konnten, sollten Sie Interesse an einem kostenlosen Online-Service, die Sie konvertieren Ihre Photoshop Design in einem strengen XHTML-konforme CSS-Web-Site!

psd2css online

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!). Der Versuch zu verstehen und einen CSS-Code Website kann eine schwierige und anstrengende Aufgabe (Dank an Microsoft, und es vier Versionen von IE auf dem Markt!). It’s much easier, at least for me, to play around in Photoshop and create simple yet cool-looking designs. Es ist viel einfacher, zumindest für mich, zum Rumspielen in Photoshop und erstellen Sie einfach noch cool aussehende Designs.

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. ist völlig kostenlos und erlaubt das Hochladen von Dateien entweder in Photoshop oder GIMP, also wenn Sie nicht über eine Kopie von Photoshop, können Sie den kostenlosen Open-Source-Foto-Editing-Programm, The Gimp.

PSD zu 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. Bei der Erstellung Ihrer Website-Design, müssen Sie sicherstellen, dass Sie Schichten wie das ist, was PSD2CSSOnline liest, um herauszufinden, die verschiedenen Teile einer Web-Seite. The trick is to keep the parts of your page that you want separate in different layers of your .PSD file. Der Trick besteht darin, dass die Teile Ihrer Seite, die Sie wollen, trennen in verschiedenen Schichten von Ihrer. PSD-Datei.

There are a couple of simple guidelines you should follow in order for this process to work. Es gibt ein paar einfache Leitlinien sollten Sie folgen, um diesen Prozess zu arbeiten.

  • 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. Machen Sie nicht ein Bündel von Schichten - Wenn Sie ein fortgeschrittener Benutzer Photoshop, haben Sie vielleicht viele Schichten, dass alle zusammen kombinieren, um ein einzelnes Objekt. For example, your logo might actually be made of 5 to 6 different layers - but the logo is still one object. Nehmen wir an, Ihr Logo könnte in der Tat werden von 5 bis 6 verschiedenen Schichten - aber das Logo ist nach wie vor ein Objekt. 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. Nicht die Datei mit dem Logo noch getrennt in die 5 oder 6 Lagen - kombiniere sie zusammen zu einem einzigen "Logo"-Schicht.
  • Opacity and Blending Options - You need to rasterize any layer with opacity at anything other than 100%. Deckkraft und Blending-Optionen - Sie müssen sich rasterize jede Schicht mit Deckkraft auf etwas anderes als 100%. In Photoshop, you can rasterize a layer by right-clicking on the layer and choosing “ Rasterize Type ” or “ Rasterize Layer “. In Photoshop können Sie rasterize eine Ebene, indem Sie mit der rechten Maustaste auf die Ebene und der Auswahl "Rasterize Typ" oder "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 der Gimp, erstellen Sie eine leere Ebene direkt unterhalb der, die Sie wollen rasterize und klicken Sie dann rechts auf der neuen Ebene, und wählen Sie "Nach unten vereinen". This will rasterize the layer and merge it. Dies wird rasterize der Schicht und zusammenzuführen.
  • Modify Gimp Layer Sizes - For some reason the Gimp likes to make layers the same size as the image. Ändern Gimp Layer Größen - Aus irgendeinem Grund die Gimp gerne machen Schichten der gleichen Größe wie das Bild. This makes inefficient as you end up with lots of big image files in your web page. Damit ist ineffizient, wie Sie am Ende mit vielen großen Bild-Dateien in Ihre Webseite. 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” . Für jede Schicht in der Gimp, wo das Objekt ist kleiner als die ganze Seite (die meisten Ihrer Schichten), klicken Sie bitte auf die Ebene, dann auf die Ebene im Menü die Option "Automatisch zuschneiden".
  • 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-Datei-Größe-Limit - Dies ist die größte Datei, die Sie hochladen können, aber es war nur eine zufällige Zahl nahm von der Schöpfer. You can email him and he’ll let increase the limit! Sie können E-Mail ihn und er ließ das Limit erhöhen!

That’s all you need to keep in mind! Das ist alles, was Sie brauchen, daran zu denken! Go ahead and create your web page in Photoshop or GIMP and then upload it to see how it turns out! Gehen Sie vor und erstellen Sie Ihre Webseite in Photoshop oder GIMP und dann hochzuladen, um zu sehen, wie sich herausstellt!

Hopefully, the look you had created comes out in your final HTML output. Ich hoffe, dass Sie das Aussehen geschaffen hatte kommt in Ihrem letzten HTML-Ausgabe. You can also try out a couple of other online services for converting PSD designs to web pages, but they are not free: Sie können auch versuchen, ein paar andere Online-Dienste für das Umwandeln der PSD-Designs in Web-Seiten, aber sie sind nicht kostenlos:

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. Dieser Service wird auch als PSD-Slicing, wenn Sie wissen wollen, die technische Bezeichnung für sie. 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! Wenn Sie keine Lust zum zahlenden Personen, dies zu tun Slicing für Sie und PSD2CSSOnline did not work out für Ihre komplizierte Design, können Sie das Aufschneiden selbst!

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: Hier sind ein paar coole Tutorials und Leitfäden, die Sie lesen können, wie die Gestaltung einer Website in Photoshop und dann wandle ihn 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. Während PSD2CSSOnline vielleicht nicht die beste Werkzeug für große Designer, es ist eine großartige Möglichkeit, um die ersten Schritte, wenn Sie nicht sehr vertraut mit CSS und HTML-Programmierung. And it’s free, so it’s always worth a shot! Und es ist kostenlos, daher ist es immer wert einen Schuss! Enjoy! Genießen! Source: Quelle: ToThePC

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

If you enjoyed this post, make sure you Wenn Ihnen diese Stelle, stellen Sie sicher, dass Sie subscribe to my RSS feed Abonnieren Sie meinen RSS-Feed ! !

» Filed Under »Abgelegt unter Web Site Tips Web-Site Tips

Related Posts Verwandte Beiträge

3 Responses to “Convert Photoshop designs to CSS website” 3 Antworten auf "Convert Photoshop Designs auf CSS-Website"

  1. Siddharth Siddharth said on : sagte am: April 26th, 2008 at 8:38 am 26. April 2008 in 8:38

    Nice thingy Nizza-Ding
    Will use it whenever in emergency Wird es einsetzen, wenn im Notfall :)


  2. Shaun Shaun said on : sagte am: April 26th, 2008 at 10:41 am 26. April 2008 in 10:41

    Hi Aseem - Hi Aseem --

    I want to thank you for the great website and the great article on psd2cssonline.com . Ich möchte Ihnen danken für das große Website und den großen Artikel über psd2cssonline.com.

    I just wanted to let you know that the max file size has been bumped to 8MB now. Ich wollte nur, um Ihnen mitzuteilen, dass die maximale Dateigröße wurde bumped zu 8MB jetzt.

    And we’re adding new features all the time! Und wir sind das Hinzufügen neuer Funktionen die ganze Zeit! Image Roll Overs, text areas, links, zip file download (as well as the old ‘Save As…’ option), auto centered pages and more. Roll Overs Bild, Text, Links, Zip-Datei herunterladen (ebenso wie die alten "Speichern unter… 'Option), Auto-zentriert Seiten und vieles mehr.

    Thanks again for the great website and article. Nochmals vielen Dank für die tolle Website und Artikel. Keep up the good work! Halten Sie sich die gute Arbeit!

    – --
    Shaun
    http://psd2cssonline.com


  3. akishore akishore said on : sagte am: April 27th, 2008 at 7:14 pm 27. April 2008 auf 7.14 Uhr

    Shaun, no problem at all, it’sa pretty cool service! Shaun, kein Problem, es ist ziemlich cool! Converting from Photoshop to an actual website can be a pretty daunting task if you’re not a pro, so this really helps. Konvertieren von Photoshop zu einer tatsächlichen Website kann eine ziemlich schwierige Aufgabe, wenn Sie nicht ein Profi, so dass dies wirklich hilft.


    Please post your comments/suggestions! Bitte senden Sie ihre Kommentare und Vorschläge!