Submit Search
Upload
WordPress 今どきの効率的な制作フロー
•
8 likes
•
3,251 views
Tsuzurahara Tohru
Follow
WordBench宮崎 Vol.04で話したPhotoshopでのデザイン〜コーディングまでの流れ。 WordPressの勉強会ですが、WordPress的な内容はほとんでないです。
Read less
Read more
Design
Report
Share
Report
Share
1 of 69
Download now
Download to read offline
Recommended
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
swwwitch inc.
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Miho Yamamori
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Hiroyuki Makishita
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
Recommended
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
swwwitch inc.
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Miho Yamamori
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Hiroyuki Makishita
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
田口真行の『ディレクション思考 - お部屋の片付け編 -』
田口真行の『ディレクション思考 - お部屋の片付け編 -』
Masayuki Taguchi
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
Sasaki Kouhei
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
20160124_GPL勉強会
20160124_GPL勉強会
rie05
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
schoowebcampus
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Miho Yamamori
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
Cherry Pie Web
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
Masahiko Kawai
Web design
Web design
kazuko kaneuchi
デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係
Kanako Kawahara
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
Yuya Toida
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
ssuser6f5294
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
Cherry Pie Web
141219 まにフェス
141219 まにフェス
rie05
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
Tsuzurahara Tohru
Wordcamp東京
Wordcamp東京
rie05
明日からデキるUXデザイン#1講義編
明日からデキるUXデザイン#1講義編
Mari Takahashi
20160430co-edo
20160430co-edo
Chieko Aihara
More Related Content
What's hot
田口真行の『ディレクション思考 - お部屋の片付け編 -』
田口真行の『ディレクション思考 - お部屋の片付け編 -』
Masayuki Taguchi
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
Sasaki Kouhei
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
20160124_GPL勉強会
20160124_GPL勉強会
rie05
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
schoowebcampus
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Miho Yamamori
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
Cherry Pie Web
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
Masahiko Kawai
Web design
Web design
kazuko kaneuchi
デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係
Kanako Kawahara
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
Yuya Toida
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
ssuser6f5294
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
Cherry Pie Web
141219 まにフェス
141219 まにフェス
rie05
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
What's hot
(18)
田口真行の『ディレクション思考 - お部屋の片付け編 -』
田口真行の『ディレクション思考 - お部屋の片付け編 -』
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
20160124_GPL勉強会
20160124_GPL勉強会
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
Web design
Web design
デザイナーとエンジニアの良い関係
デザイナーとエンジニアの良い関係
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
141219 まにフェス
141219 まにフェス
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
Similar to WordPress 今どきの効率的な制作フロー
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
Tsuzurahara Tohru
Wordcamp東京
Wordcamp東京
rie05
明日からデキるUXデザイン#1講義編
明日からデキるUXデザイン#1講義編
Mari Takahashi
20160430co-edo
20160430co-edo
Chieko Aihara
今から始めて遅くない“Photoshop&Illustrator使いこなし”テクニック
今から始めて遅くない“Photoshop&Illustrator使いこなし”テクニック
Mori Kazue
Grareco ws faj tokyo2016
Grareco ws faj tokyo2016
Naoka MISAWA
BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想
Hidekazu Ishikawa
開発者のためのUIデザイン入門
開発者のためのUIデザイン入門
Hiroyuki Mori
実録 情熱と苦悩のテーマ・プラグインビジネス
実録 情熱と苦悩のテーマ・プラグインビジネス
Hidekazu Ishikawa
ABC2014 Winter: Material Design
ABC2014 Winter: Material Design
Nobuya Sato
Graphicrecording workshop in kamimachiza
Graphicrecording workshop in kamimachiza
Naoka MISAWA
WordPressをCMSとして利用するために便利なWP SiteManagerについて
WordPressをCMSとして利用するために便利なWP SiteManagerについて
Tsuyoshi.
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
schoowebcampus
Open Data Day report for Brigade meeting
Open Data Day report for Brigade meeting
CodeForTokyo
プロデューサーやデザイナー, etc…とエンジニアがコラボレーションできるVisual Studio Online
プロデューサーやデザイナー, etc…とエンジニアがコラボレーションできるVisual Studio Online
Takashi Takebayashi
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
Hidekazu Ishikawa
「おれおれサービス」に挑戦しよう
「おれおれサービス」に挑戦しよう
Hidekazu Ishikawa
ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014
Nobuya Sato
明日からデキるUXデザイン #2ワークショップ編
明日からデキるUXデザイン #2ワークショップ編
Mari Takahashi
時間のムダをゼロにする、リーダーの時間の使い方 先生:芝本秀徳
時間のムダをゼロにする、リーダーの時間の使い方 先生:芝本秀徳
schoowebcampus
Similar to WordPress 今どきの効率的な制作フロー
(20)
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
Wordcamp東京
Wordcamp東京
明日からデキるUXデザイン#1講義編
明日からデキるUXデザイン#1講義編
20160430co-edo
20160430co-edo
今から始めて遅くない“Photoshop&Illustrator使いこなし”テクニック
今から始めて遅くない“Photoshop&Illustrator使いこなし”テクニック
Grareco ws faj tokyo2016
Grareco ws faj tokyo2016
BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想
開発者のためのUIデザイン入門
開発者のためのUIデザイン入門
実録 情熱と苦悩のテーマ・プラグインビジネス
実録 情熱と苦悩のテーマ・プラグインビジネス
ABC2014 Winter: Material Design
ABC2014 Winter: Material Design
Graphicrecording workshop in kamimachiza
Graphicrecording workshop in kamimachiza
WordPressをCMSとして利用するために便利なWP SiteManagerについて
WordPressをCMSとして利用するために便利なWP SiteManagerについて
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
Open Data Day report for Brigade meeting
Open Data Day report for Brigade meeting
プロデューサーやデザイナー, etc…とエンジニアがコラボレーションできるVisual Studio Online
プロデューサーやデザイナー, etc…とエンジニアがコラボレーションできるVisual Studio Online
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
「おれおれサービス」に挑戦しよう
「おれおれサービス」に挑戦しよう
ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014
明日からデキるUXデザイン #2ワークショップ編
明日からデキるUXデザイン #2ワークショップ編
時間のムダをゼロにする、リーダーの時間の使い方 先生:芝本秀徳
時間のムダをゼロにする、リーダーの時間の使い方 先生:芝本秀徳
WordPress 今どきの効率的な制作フロー
1.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat.
2.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. 黒
原 道 (つづらはらとおる) eaterTohru Tsuzurahara 大阪出身、宮崎在住 後藤修氏とのデザインユニット「eater」にて、 Webデザイン・構築 / グラフィックデザインを行っています。 http://29eater.com/portfolio 講師やセミナー開催、イベントなどもしてます。 ・Word Bench宮崎運営 ・セミナーイベント「Design Pledge」運営など http://29eater.com/activity CSS Nite in MIYAZAKI, Vol.1 CSS Nite LP, Disk 22「Webデザインで使うPhotoshop」 CSS Nite LP, Disk 34「Webデザインで使うPhotoshop」 dot-Ai Vol.2「ネタ祭り2013」等に出演
3.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デザイン編 Photoshopの効率的なワークフロー
4.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. まずはPhotoshopをWebに適した状態で 使うための設定をしておこう。 ! ピクセルベースできちんとレイアウト、 描画ができるようにするためです。
5.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. [環境設定]>[単位]>[ピクセル] ! [環境設定]>[一般]>[ベクトルツールと 変形をピクセルグリッドにスナップ] ※CS6以降
6.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. レイアウトでよく使うガイド機能は ピクセルに沿わないので、 ピクセルに沿って引けるようにしておく
7.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. [環境設定]>[ガイド・グリッド・スライス] [グリッド線]を[100px]に [分割数]を[100]に。 その後、[表示メニュー]>[表示・非表示] の[グリッド]にチェックを入れる。
8.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. ポイントは[グリッド線]の値と[分割数]の 値を割った値が[1]になるようにする。 →1px単位でガイドを引くことができる。 ! グリッドを表示した際、画面が「うるさく」 感じる場合はグリッドの設定で[カラー]を 変更する。
9.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デモ
10.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. フォーマット編
11.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. 新規書類作成時には [プリセット]を[Web]にする。 ! カンバスサイズは背景領域も考え コンテンツ幅+背景領域で作業する
12.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. 980pxなど 両サイドにガイドを引いておく その後背景領域も考えカンバスサイズを 左右+100px程度広げる 必要に応じて他のガイドも引く
13.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. Guide
Guideを使うと便利
14.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. Velositeyっていう手もあるぜ
15.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デモ
16.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デザイン・レイアウト編
17.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. ツール選択のテクニック [V]キーで[移動ツール] [C]キーで[スライスツール] [B]キーで[ブラシツール] [M]キーで[選択範囲ツール] [D]キーで描画色と背景色をデフォルトに [X]キーで描画色と背景色の入れ替え
18.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. レイヤー選択のテクニック 右クリックを活用する 移動ツールでカンバス上のオブジェクトを クリックする。 ※[移動ツール]のオプション[自動選択]は
あまり使用しない。 もしくは必要に応じて使用・不使用を切り替える。
19.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. 対応するショートカットがない場合は自分で作る [編集]メニュー>[キーボードショートカット]
20.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. 図形を描く時のTips(シェイプツール) [ストローク]機能で点線を描く [パスの境界線を描く]でフワフワした輪郭 を描く 属性パネルから角丸の変更やサイズの変更が できる 属性パネルでぼかすことができる
21.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. レイヤースタイル、マスク、ブラシを駆使した グラフィックパーツの作成
22.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デフォルト値では使わない 描画モードを駆使する スタイルを登録して使い回す グループレイヤーにも適用できる レイヤーを右クリックし[レイヤースタイル をコピー] レイヤースタイル
23.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. レイヤーマスク 白で塗りつぶし
黒で塗りつぶし グレー 表示 非表示 半透明
24.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. レイヤーマスク グラデーションツールを使う ブラシツールを使う その他、白・黒で塗り分けできれば何でも [
]+[delete] [option]+[delete] [shift]+[delete] 背景色で塗りつぶし 描画色で塗りつぶし 塗りつぶしのダイアログ
25.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. ブラシツール選択時の挙動 右クリック
[option]キー [option]+ [control] を押しながら 上下にドラッグ [option]+ [control] を押しながら 左右にドラッグ ブラシプリセット スポイト ブラシの硬さ サイズの変更
26.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デモ
27.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デザインルールに則ったファイルの管理
28.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. カラースキームには スウォッチ、レイヤースタイルを活用
29.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デモ
30.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. Coolorus
31.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. PRISMA
32.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. 文字組には段落スタイル、文字スタイルを活用
33.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デモ
34.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. ダミーテキストどうしてますか?
35.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. ダミーテキスト Photoshopの機能を使う
ネットのサービスを使う スクリプトの活用 書式メニューの Lorem Ipsum ダミーテキストで検索 JSXを作るor 使う
36.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. ダミーテキスト Photoshopの機能を使う
ネットのサービスを使う スクリプトの活用 書式メニューの Lorem Ipsum ダミーテキストで検索 JSXを作るor 使う
37.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. 段落テキスト作成-Osaka-ランダム.jsx
38.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デモ
39.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. パーツの使い回し エレメント/フォーマット
40.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. エレメント、フォーマット エレメント
フォーマット シンボル化 or リンク リンク
41.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デモ
42.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. 画像の書き出し編
43.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. 画像の書き出し Photoshopの 機能を使う アプリを使う
プラグインを使う Webサービス を使う 画像アセット Slicy PNG Hat , Cut and Slice Me Project Parfait
44.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デモ
45.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. 今流行りのSVGは??
46.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. Photoshop
CCのバージョン14.2以降 generator.jsonを[ホームフォルダ]に作成 Windowsの場合、ユーザーフォルダ(ユーザー 名のフォルダ) Photoshop CCを起動し(既に起動していた場 合は再起動し)、カスタムシェイプのレイヤー 名の最後に.svgをつけます。 画像アセット機能で書き出し 画像アセットを使いSVGを書き出す
47.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. generator.jsonの中身 画像アセットを使いSVGを書き出す { "generator-assets":
{ "svg-enabled": true } }
48.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デモ
49.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. CSSの書き出し編
50.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. CSSの書き出し Photoshopの 機能を使う プラグインを使う
プラグインを使う2 Webサービス を使う CSSをコピー CSS Hat CSS3Ps Project Parfait
51.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. コーディング編 SublimeText+Sass+Compass
52.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. SublimeText
53.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. 動作が軽い 拡張性が高い(パッケージ) カスタマイズが容易 ショートカットが秀逸 おすすめポイント
54.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. Emmet Hayaku AutoFileName SFTP WordPress Emmet
LiveStyle 各種スニペット パッケージによる拡張
55.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デモ
56.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. Sass
57.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. CSS
プリプロセッサ CSSをより簡単、効率的に書ける Rubyが必要 Sassとは?
58.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デモ
59.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. Compass
60.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. Sassをさらに強化したフレームワーク Sass用のmixinがあらかじめ用意されている 画像のスプライト生成など Compassとは?
61.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デモ
62.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. 仮想環境構築編 Vagrant
63.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. 仮想マシンの作成や環境構築を 自動化するツール ようするにローカルに開発用サーバーを 簡単に作れる コマンドでインストール VirtualBox
or VMwareが必要 Vagrantとは?
64.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. OSのディスクイメージや設定ファイルがまと められたファイル サードパーティから様々なboxファイルが配布 されている boxファイル
65.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. VCCW
66.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. デモ
67.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. まとめ
68.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat. いっぱいすぎてまとまらないので、 スライドを見返したり、検索したり、 それでも分からない時は質問してください。 toru@infodesign.jp https://www.facebook.com/armytoru http://29eater.com
69.
WordBonchMIYAZAKI,Vol.04 2014.5.24 Sat.
Download now