今から始めるPhotoshopによるWeb制作-初期設定編

Creators MeetUp
Photoshopによる
Web制作 – 初期設定編
いまから始める

Yuu ( Yuji Tsukaguchi )
Freelance Web Designer / PAKUTASO Engineer
@regret_raym
今から始めるPhotoshopによるWebデザイン制作

agenda
1. ワークフローのおさらい
2. 初期設定
3. アクション設定
4. JSXの設定

ワークフローのおさらい

従来のワークフロー
情報
設計
画面
設計
デザイン
カンプ
実装テスト
ディレクターデザイナーコーダー

マルチデバイス対応
Source: A Respo‘n1s3e.0 t5o.1 ‘9R Wesepbo Dnesviveelo
Wpeerb S eDleecstiigonn is Not the Future’

情報
設計
画面
設計
デザイン
カンプ
実装テスト
ディレクターデザイナーコーダー
問題
発生
修正修正修正
従来のワークフロー
数百種類あるデバイスの
デザインカンプは作れない

ワークフローの改善
プロト
タイプ
調整テスト
Bootstrap
foundation
Edge Inspect
About responsivepx
Semantic
VIEWPORT RESIZER
SDK

Progressive Enhancement
Graceful Degradation
Pixel Perfect

Designing in the browser

制作ツールの選択肢

Sketch
http://www.bohemiancoding.com/sketch/

ひとつのツールで全部を作る必要はない
得意なコトは得意なモノで
自分の効率の良さを追求する

出来ることに越したことはない
実際使用するとき、困らないようにするために

初期設定

単位の設定
[編集] → [環境設定] → [単位・定規]
単位をpixelに

グリッドの設定
[編集] → [環境設定] → [ガイド・グリッド・スライス]
スタイルを「点線」、グリッド線「pixel」、分割数「100」

自動選択ツールの設定
自動選択にチェック、レイヤーを選択

レイヤー名称のコピー解除
右上のメニューから[パネルオプション]

レイヤー名称のコピー解除
チェックを解除

アクションの設定

アクションとは？
Photoshopで操作した動作を記録・再生できる

写真を自動で加工
http://howicopewithlife.deviantart.com/art/Li
ght-Leaks-Photoshop-Actions-free-361385964

たとえば
1.レイヤーの格納グループ作成
2.トリミングを使ったスライス

レイヤーをコンテンツごとに
格納するグループを作成
レイヤーの格納グループ作成
1. 新規アクション
2. グループ作成
3. 記録終了

ロゴだけスライスする
トリミングを利用したスライス
1. 新規アクション
2. 新規ファイルに
レイヤーを複製
3. トリミング
4. 保存
5. 記録終了

DEMO

繰り返し行う作業は、
アクションを作成して効率化できる

アプリ、JSXなど

スライスは、数が多いと処理が面倒…
ガイドを引くのが面倒…
レイヤー機能を拡張したい…

アプリ、プラグインをうまく使う

Cut&Slice me
http://www.cutandslice.me/#jp

Slicy
http://macrabbit.com/slicy/

GUIDEGUIDE
http://guideguide.me/

Pixel Dropr
http://pixeldropr.com/

Tych Panel 2
http://lumens.se/tychpanel/

12 New Photoshop Tools for CS6
http://dmonzon.com/freebies/12-photoshop-
tools-cs6/

参考サイト
 柔軟なワークフロー（Design Spice）
 初めてPhotoshopでWeb制作する前に
やっておくといい設定8(CS6含む)
（Design Color）

Photo by
http://www.pakutaso.com/

ありがとうございました

More Related Content