Convert Photoshop designs to CSS website PhotoshopのデザインをCSSのウェブサイトに変換する

Posted on April 26, 2008 at 5:13 am掲示さ2008年4月26日5:13 AMの

Are you a kickass Photoshop person?あなたはkickass Photoshopの人ですか？ Can you create amazing looking designs using your Photoshop skills?驚くべきlookingデザインを作成することを使用して、 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.もしそうならば、自分の作成Webサイトを見つけられるかもしれません。 mockups Photoshopのクライアントをパスすると入力し、ウェブサイトのデザインを最終製品のプログラマーを取得するには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 !のいずれかの場合は、多くの人々 who Webサイトを作成Photoshopの場合、かもしれない興味があるのは無料のオンラインサービスに変換することがPhotoshopの設計させていただきます。 厳格な対応しているCSSのWebサイト ！

オンラインpsd2css

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!).を理解し、コードをしようとしてCSSのウェブサイトには、困難で、骨の折れる仕事（のおかげで、マイクロソフトと4つのバージョンのIEが市場で！ ）です。 It’s much easier, at least for me, to play around in Photoshop and create simple yet cool-looking designs.その方がずっと簡単には、少なくとも私にとって、 Photoshopの周りを再生するとシンプルでクールに見えるデザインを作成します。

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.は完全に無料でファイルをアップロードすると、 PhotoshopまたはのいずれかであるGIMP 、これをお持ちでない場合は、 Photoshopのコピーを、無料で使用することができますオープンソースの写真編集プログラムにはgimpです。

のPSDを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.お客様のウェブサイトのデザインを作成するとき、を確認する必要がこれはどのような層を使用するpsd2cssonline図の読み取りをして、 Webページの別の部分です。 The trick is to keep the parts of your page that you want separate in different layers of your .PSD file.トリックは、お客様のページの部品を維持することを選択して別々の層が異なる。のPSDファイルです。

There are a couple of simple guidelines you should follow in order for this process to work.には、いくつかの簡単なガイドラインには、以下の作業のため、このプロセスです。

  • 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. 大勢のレイヤには大したことは -P hotoshopの場合には、高度なユーザは、すべてのかもしれないが作成した多くの層を作る一緒に組み合わせて、 1つのオブジェクトを作成します。 For example, your logo might actually be made of 5 to 6 different layers - but the logo is still one object.たとえば、お客様のロゴかもしれない実際に作られた別のレイヤ五〜六-しかし、ロゴはまだ1つのオブジェクトを作成します。 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.ファイルをアップロードしていないのロゴが分離さの中に入って5 〜 6層-マージしてまとめて1つのシングル"ロゴ"レイヤー。
  • Opacity and Blending Options - You need to rasterize any layer with opacity at anything other than 100%. 不透明度とブレンドオプション -任意のレイヤをラスタデータに変換する必要があること以外、何も透過度は1 00％です。 In Photoshop, you can rasterize a layer by right-clicking on the layer and choosing “ Rasterize Type ” or “ Rasterize Layer “. Photoshopのは、ラスタデータに変換することができます層の層を右クリックして、 " ラスタライズのタイプ "または" ラスタライズ層 "です。 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” .にはgimpで、空の層のすぐ下に作成したいラスタライズと入力し、 1つを右クリックして、新しい層を選択し" マージダウン"です。 This will rasterize the layer and merge it.これにより、ラスタライズの層とマージしてください。
  • Modify Gimp Layer Sizes - For some reason the Gimp likes to make layers the same size as the image. 層であるGIMPのサイズを変更 -いくつかの理由が好きにはg impの層を作るのと同じ大きさのイメージです。 This makes inefficient as you end up with lots of big image files in your web page.これにより、非効率アップを終了するとしてたくさんの大きな画像ファイルをお客様のウェブページをご覧ください。 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” .ためにはgimpの任意のレイヤでは、オブジェクトが小さい場合、ページ全体（ほとんどの層） 、レイヤをクリックして、クリックし、 [レイヤ]メニューの選択" autocrop層"です。
  • 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. 拡張のPSDファイルサイズの上限 -このファイルのサイズは最大規模のアップロードすることができる、それだけでランダムな番号を選んだが創作された。 You can email him and he’ll let increase the limit!電子メールすることができます彼と彼の上限を増やす自身にお任せ！

That’s all you need to keep in mind!それを念頭に置いてすべてを維持する必要があります！ Go ahead and create your web page in Photoshop or GIMP and then upload it to see how it turns out!思い切って、 Webページを作成してくださいPhotoshopやgimpとコマンドと入力し、アップロードすることを確認することが分かった！

Hopefully, the look you had created comes out in your final HTML 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:試してみるすることもできます。カップルの他のオンラインサービスのPSDに変換するためのウェブページのデザインを、無料ということではありません：

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.スライスのPSDとも呼ばれるこのサービスは、お望みなら、技術的な用語を知っていることです。 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!払っていない場合は感じの人々はこれを行うにはスライスうまくいかなかったpsd2cssonlineお客様とお客様の複雑なデザインには、スライスすることができます。なさい！

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:ここではいくつかのクールチュートリアルとガイドを読み取ることができますサイトを設計する方法についてはPhotoshopのと入力し、変換することを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. 5月中psd2cssonline最適なツールではないことが大きなデザイナー、これは素晴らしい方法を開始する場合に非常に慣れていない、 CSSとHTMLコーディングします。 And it’s free, so it’s always worth a shot!しかも無料、これはいつも価値のあるショット！ Enjoy!楽しむ！ Source:ソース： ToThePC tothepc

Technorati Tags: Technoratiのタグ： , 、 , 、 , 、 , 、 , 、 , 、

If you enjoyed this post, make sure you この投稿をお楽しみいただく場合は、必ずあなた subscribe to my RSS feed 私のRSSフィードを購読する ! ！

» Filed Under »提出されて Web Site Tips Webサイトのヒント

Related Posts関連記事

4 Responses to “Convert Photoshop designs to CSS website” 4つの応答を" PhotoshopのデザインをCSSのウェブサイトに変換する"

  1. Siddharth siddharth said on : によると： April 26th, 2008 at 8:38 am 2008年4月26日8:38 AMの

    Nice thingyニースブツ
    Will use it whenever in emergency緊急時に使用することは、 ： ）


  2. Shaun ショーン said on : によると： April 26th, 2008 at 10:41 am 2008年4月26日の10:41時

    Hi Aseem -こんにちはaseem -

    I want to thank you for the great website and the great article on psd2cssonline.com .いただきありがとうございますしたい偉大なウェブサイトや偉大な記事をpsd2cssonline.comです。

    I just wanted to let you know that the max file size has been bumped to 8MB now.知ってほしかっただけさせていただきますは、最大ファイルサイズを八メガバイト今すぐ予約を取り消されるされています。

    And we’re adding new features all the time!と私たちは時間のすべての新機能を追加！ Image Roll Overs, text areas, links, zip file download (as well as the old ‘Save As…’ option), auto centered pages and more.イメージロールovers 、テキストエリア、リンク、 zipファイルをダウンロード（だけでなく、 old 'という名前を付けて保存… 'オプション） 、自動車中心のページです。

    Thanks again for the great website and article.感謝再び偉大なウェブサイトや記事です。 Keep up the good work!調子で頑張って！

    – -
    Shaunショーン
    http://psd2cssonline.com


  3. akishore akishore said on : によると： April 27th, 2008 at 7:14 pm 2008年4月27日は午後4:14

    Shaun, no problem at all, it’sa pretty cool service!ショーンは、全然問題ない、これはかなりクールサービス！ Converting from Photoshop to an actual website can be a pretty daunting task if you’re not a pro, so this really helps.実際のウェブサイトをよりPhotoshopの変換には、かなり困難な仕事をする場合は特定のプロのため、この実際に役立ちます。


  4. dilip patel ディリップパテル said on : によると： April 30th, 2008 at 2:09 am 2008年4月30日の午前9:09

    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ハワイのようにサイトを非常によく似psd2cssonline.comとリレーで働くことの全体を与えることと、いくつかの領域に基地coddingで2番目とも私は彼の命名しようとしているとした後の会話がそのファイルをして私はuplodeその良い結果と見られるいくつかの変更が必要なだけのような背景色等の後にcodding

    Thanksありがとう
    dilipディリップ


    Please post your comments/suggestions!コメントをお寄せください/提案！