【Photoshop】デザインカンプからのコーディング

制作物へのアクセス

ユーザー名・パスワード　

khiro

URL

http://xs437226.xsrv.jp/cording-from-photoshop/

所要時間

3時間20分
→ エディターでファイルを作成してから、レスポンシブ化が完了するまでの時間を測りました。

全体キャプチャー

MacBook Pro (画面幅1,440px)

iPad Pro (画面幅1,024px)

iPad (画面幅768px)

iPhone7 (画面幅375px)

Photoshopのデザインカンプ

背景

これまで私は、自分で学習するときには、実際のWebサイトを見ながら模写コーディングをしてきました。

しかし、実務のようにデザインカンプを見てコーディングすることがあまり無かったです。

そこで、デザインカンプからコーディングする経験を積みたいと考えていたところ、 note.com こちらの記事を見つけました。

Photoshopのデザインカンプは、Webコーダーの「はにわまん」さんから購入したデータを使用しています。