psdから模写コーディングの始め方【初心者向け】
公開日：最近ずっとLPの模写などをやっていましたが、
案件を見据えて、psdから画像を抽出したりフォントの情報を取り出す練習を始めたので、これからって人向けに解説します。
そもそもpsdとは
psdは、Adobeという会社が開発している「Adobe Photoshop」というソフトで扱われるデータの形式です。
この「Adobe Photshop」はWebサイトのデザインでよく使われるソフトの１つで、psdはデザインデータってことですね！
クラウドソーシングサイトの募集を見ても分かるとおもいますが、
LPコーディングなどの案件を受けると、このデータが渡されて、そこから、コーディングするということが多いようです。
デザインではなくコーディングだけならPhotoShopをばりばりに使える必要はないですが、このデザインデータから、コーディングに必要な情報を読み取れる方法を、最低限、知っておく必要があります。
必要なもの
必要なものは以下の2つ
- PhotoShop(ソフトウェア)
- psd形式のデザインデータ
まず1つ目に、PhotoShopが必要です。
こちらは、有料でまあまあの金額です。1週間の無料体験版があるので(2019/05/02現在)それを活用しましょう。1週間はまあまあ短いので、まだまだコーディングが未熟だという方は、サイト模写で力をつけてから挑むと良いかもしれません。それぐらいの出費大したしたことないわっ！って方はどんどん進めましょう！
体験版はこちらからダウンロードできます。
そして、psd形式のデザインデータが必要なんですが、これがなかなか転がってないんです。
模写するだけなら、その辺のサイトを開いて移すだけなんですけど、都合の良いpsdデータはどこにでも落ちてるわけではないみたいです。
自分は初めは、こちらのサイトで配布されているものを使わせていただきました。
(利用の仕方には気をつけましょう！二次配布等は基本だめです。)
googleで探す場合は、「psd 配布」とかで検索すると、出てくるかもしれません。
画像やフォントの情報の取り出し方
これに関しては、自分も勉強中で曖昧なとこが多いので、参考にさせていただいたサイトをご紹介します。
https://haniwaman.com/photoshop-coding/
↑PhotoShopで画像データを書き出す方法やテキストの情報を調べる方法について詳しく解説されています。
まとめ
まずは慣れることが大事です。
分からないことは調べながら、覚えていきましょう！
