Photoshopからコーディングを始めました。文字情報や画像などを取得する方法。

Photoshopデータからコーディングを始めました。

Photoshopから文字情報や画像、余白の長さ等を取得する方法は、

下の記事にとても分かりやすく書かれており参考にさせて頂きました↓

Photoshopデータもこの記事に書いてある通りねこポンさんのサイトからダウンロードさせて頂きました。

ありがとうございます。

進めていく中で、いくつかつまずいた点があったので書いていきたいと思います。

単位をピクセルに。

単位をピクセルにするのに、先程の記事だと

「PhotoShop」→「環境設定」→「単位·定規」となっていましたが、

今はバージョンが変わったからか「PhotoShop」というメニューはなく、

「編集」→「環境設定」(一番下)→「単位·定規」

となっています。

文字情報を取得するため、移動ツールを選択し文字の所をクリックしてもなぜか選択できません。

色々試した結果、オプションの所が「グループ」になっていたからみたいです。

ここを「グループ」ではなく「レイヤー」にして下さい↓

あとline-heightは、一行テキストならぶっちゃけ必要ないなと思いました。

あと、「primitive」の部分のfont-familyが[SuperFlyOne]となっているんですが、この通りにCSSを書いても反映されません↓

これ何のフォントだろう？と思って色々調べたんですが、よくわからず(AdobeFont?)。

結局、GoogleFontで似たようなフォントを探してそれにしました。

画像を取得する方法は、

一番左上の「ファイル」→「生成」→「画像アセット」と進んでいきます。

ちなみにアセット(asset)とは「資産」という意味の英語です。

画像の名前をコーディング用に英語にして、拡張子を付けます↓

すると、「photoshop」フォルダの隣に「assets」というフォルダが自動で作られ、その中に先程の画像が入ってます。

ただし、このねこポンさんからダウンロードしたデータは画像は削除されているので、「assets」というフォルダは作られません。

自分で画像を用意して下さい。

背景色の取得方法は、

まずスポイトツールを選択し、背景色を取得したい部分をクリックします↓

次に、一番下の「描画色を設定」の所をクリックすると「カラーピッカー」というものがでてくるので、そこにカラーコードが書いてあります↓(コピペできます)

実際photoshopデータからコーディングをやっている様子はこんな感じです↓

画像は先にすべて取得してしまい、

文字情報は、コーディングをしながらその都度取得していくのがいいと思います。

模写の出来映えはこんな感じです↓

画像はO-DAN（オーダン）という無料写真サイトからダウンロードしました。

メインビジュアルはスライドになっているみたいですが、そこまではやってません。

今後の予定は、まだ案件を取るには実力に不安があるので

またいくつか模写しようかと思ってます。