スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

『psd2css Online』を使ってみた。

百式さんの方で以前取り上げていた『psd2css Online
興味があったので実際試してみました。

今回試してみたPSDファイルのレイアウトはこんな感じ(これはjpeg画像です)

CoffeeMaster

へぼいとか言わないで・・・分かってますからがっくり

で、実際『psd2css Online』にアクセスし、PSDファイルをアップロード。
数分ほどでサイトビューとZipファイルのリンクが表示される。
Zipファイルを保存→解凍。

解凍したファイルの中身(CoffeeMaster)

結構キレイに画像を分けてくれました。
HTMLやCSSもレイヤーに合わせた区分けで見かけ上問題なしでした。
ただjsファイルって・・・Javascriptエエェッ!?!?びっくり特にいじらなくても問題ありませんでしたが、
あまりJavascriptを知らないのでちょっと困惑焦る3

ただ、menuボードにメニューを書こうと思ったらそこで悪戦苦闘焦る3

HTMLファイルにイメージとして直接リンクされていただけの状態だったので、
CSSでレイヤーのdiv内にbackground-imageとして設定。
あとはpaddingの設定でボードに書いてある風に文字を合わせました。
リストでメニューを書いたけど、なぜかmenuボードのdiv内ではlistの設定が適応されず汗あせ
しかたがないのでCSSの最後の隅っこの方にリストの設定を書きましたとさ。
そして左上により気味だった気がするのでコーヒーカップを多少移動。このへんがすごく楽でしたjumee☆peace2

結果がこちらダウン

CoffeeMaster

これでも左上に寄ってるな汗あとで修正しとこうアイコン名を入力してください

てなわけで、個人的には
・HTML及びCSSの知識がそこそこあり
・Photoshopで考えたデザインをアウトプットしている

という人に最適かなと思いました。(まさに最近の自分です。ありがたやBrilliant
細かい設定をしたいとなるとCSSを知っていないとキツイところがあります。
なのでWeb制作の中級者向けというところでしょうか。

慣れればWeb制作にかなり役立ちそうなのでこれからも使ってみようかな。
とりあえず上記の条件で興味がある人はやってみることをおすすめします^ω^
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。