design Photoshopからパーツを書き出そう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

Photoshopからパーツを書き出そう

WEBデザイン|2019年01月14日

2019年01月14日
  • このエントリーをはてなブックマークに追加

Photoshopでデザインし、コーディングに移る前に、パーツを書き出す必要があります。
「写真」のように、HTML×CSSで再現できないデザインを、画像として書き出します。

そんな時に使うのがアセットとスライスツールです。
まずは、基本的な書き出しに使うアセットの説明から進めていきましょう。

アセットでの書き出し

アセットを使う時には、まずPhotoshop上部のメニューバーにある、ファイルを選びます。
そして、ファイルの中にある「生成 > 画像アセット」を選んでください。
これで画像アセットにチェックが入り、アセット機能を使えるようになります。

次に、右下のレイヤーに移動し、それぞれのレイヤーに名前をつけます。
名前はすべて、書き出す画像の名前を「拡張子つき」で入力してください。

拡張子とは、画像の形式のことです。
jpgやgif、pngなど、様々な種類が存在します。

今回、拡張子はすべて.pngに統一しましょう。
基本的に今は.pngで書き出すのが基本です。

ですので、つける名前の例としては「title_main1.png」というようにつけます。
パーツとして分かりやすい名前をつけましょう。

レイヤーに名前をつけたら、あとは保存するだけです。
それだけで、psdファイルと同じ場所に、アセットの画像ファイルが書き出されます。
新しく「psdファイル名-assets」という名前のフォルダが作られ、その中に画像があるはずです。

なお、レイヤーを複数まとめてフォルダ(グループ化)にした場合。
フォルダに名前をつければ、フォルダごと1つの画像として書き出されます。
まとめて1つの画像として書き出したい場合はフォルダにまとめて名前をつけましょう。

ただ、デザインが少し複雑で、アセットだと理想の形で書き出せない場合があります。
その時はスライスツールを使います。

スライスツールの使い方

スライスツールはドラックして囲んだ指定エリアを書き出すことができます。
左サイドバーからスライスツールを選択し、書き出したいエリアをドラックで囲んでください。

こんな感じです。

なお、スライスツールで囲むエリアは複数作れます。
一度に複数の箇所を書き出したい場合は、同時に囲むことができます。

一通り囲んだら「ファイル > 書き出し > WEB用に保存」を選びましょう。

すると、下記のような画面に移動します。

ここで書き出したいエリアをクリックして選択します。
囲んだエリアは青から茶色の線に変わりますので分かりやすいですね。

もちろん、shiftを押しながら選択すれば、複数選択可能です。

エリアを選択したら右上のプリセットの下にある選択項目から、画像形式を選びましょう。
基本はpng-24を選んでおけばOKです。
そして、保存を押して書き出し先を選べば書き出し完了となります。

画像を書き出す際は基本的にアセットを使いましょう。
どうしてもアセットだと難しい場合のみスライスツールを使うようにしてください。
アセットを基本に使った方が、作業が早く正確になります。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら