みなさんこんにちは。
今日は福岡はあいにくの雨ですが、いかがお過ごしですか？
昨日、CSS nite in FUKUOKAに行ってきました。さらに懇親会にも参加させていただきました🎵
開催されたデジハリ福岡も新しくなって綺麗になっていました。
さて、CSS niteでお話しされたことを、
忘れないうちに記録しておきたいと思います。
昨年も行きましたので一年ぶりです。昨年の記事↓
https://web-design-cafe.com/archives/292
スポンサードリンク
CSS nite とは？
DTP Transitを運営されているSwwwitch（スイッチ）の鷹野雅弘さんが主催するセミナー。
CSSに限らずweb制作に関する知識を発信するセミナーです。
今回のテーマは、
「PhotoshopとIllustrator」それぞれの仕事術の話でした。
http://cssnite.jp/fukuoka/vol06/
昨年の内容に関することも含めて、
さらに深く、知らなかったこと、目からウロコの機能をたくさん紹介していただきました。
Photoshopのセッション
黒葛原 道（つづらはらとおる）さんが登壇されました
Photoshop CC以降でのカンプ作成のベストプラクティス
デザイン事務所eater
ライブで目的のサイトを制作していくという形のセッションでした。
マルチデバイスのモックアップは、CSSフレームワークで作うことが増えてきました。
コーディング時は、ビットマップなどの画像はあまり使わず、
CSSなどのコードやwebフォント、アイコンフォントを使って
スマホ対応していくようになっていくことで、今風のデザインになっていくでしょう。
一般的なweb制作のワークフロー
設計→ワイヤー→デザイン→実装→テスト
という流れですが、この場合だと、実装して初めてスマホでの表示方法を確認することになり、
デザインからまた作り直し、ということになりかねません。
そこで
マルチデバイス対応のワークフロー
設計→プロトタイプ→デザイン→実装
スマホ時の挙動・デザインも把握しておかないといけないので、
デザインの前にプロトタイプを作ります。
そしてこのサイクルを回していきます。
プロトタイプに役に立つのがCSSフレームワーク
CSSフレームワークとは
あらかじめ用意されているCSSやJSを適用することで、短時間で
レスポンシブ対応サイトが作れる
人気のフレームワーク
Bootstrap
Foundation
Materialize
アイコンフォントやwebフォントを使おう
Font Awesome…人気のアイコンフォント
Ico Moon…
イラレでアイコンを作ってサイトにアップすれば
自分だけのフォントを使うことができる。
Font Awesomeとも組み合わせて使うことができる
web font…google web font
グリッドデザイン時に使うツール
Adobe CC以降は、新規ガイドレイアウト作成という機能がある。
CC以前のバージョンの方は、
画像の書き出しに：CC対応のアセット生成機能
カンプから画像を書き出す際の機能です。
その他のPhotoshop表現
マンガに出てくる強調する風の表現
グラデーションオーバーレイで作ります 。
フェルト風の表現
詳しいセミナーの内容はこちらの本にも。黒葛原さんや鷹野さんが書かれた本です。
Illustratorのセッション
鷹野 雅弘（たかのまさひろ）さんが登壇されました
10倍ラクするIllustratorの仕事術
株式会社スイッチ
ライブカラー
トーンを複数色選択して変更できるライブカラー。
そのライブカラーにショートカットがあるとのこと。
色を変えたいオブジェクトを選択した状態で
編集>カラーの編集>オブジェクトを再配色
でOKです。
ライブカラーのショートカット
編集>キーボードショートカット
CS6以降は、検索機能が付いているため、
「再配色」などで検索をかけると、
ショートカットが設定できます。
（プルダウンはメニューコマンドを選択してください）
ショートカット一覧をテキストに書き出すことも可能です。
.txtファイルになります。
その他のショートカット
便利なお宝ショートカットが、
「他をロック」、「他を隠す」というもの。
選択したもの以外を、ロックしたり、隠したりして、
編集しやすくなりそうですね。使ってみたい！
グローバルスウォッチ
スウォッチの四角の右下が三角にかけているのが、グローバルスウォッチです。
使い方はライブカラーと似ています。
グローバルカラーに設定されているカラーは、
全部選択しなくても、その色を持ったオブジェクト一つを
選択して、色を変えると全部変わる、ようなもの？です。
昔からある機能のようですが、
要チェックです。
水玉パターンが隠されているスウォッチ
スウォッチのパターンは、普段あまり使いませんが、
その中で唯一使えそう！というのが、水玉パターンです。
白黒でスクリーントーンのようなものですが、
スウォッチライブラリを開く＞パターン>ベーシック＞ベーシック＿点
にあります。
このパターンを、ライブカラーで変更しようとしても
変更できませんが、
配色オプション
保持：ホワイト、ブラックのチェックを外すと、
色を自由に変えられます。
パターンの位置をずらせる
パターンの位置がイマイチしっくりこない場合、
ちょっとずらしたい、てことありますよね。
そういうときは、
・ルーラーの位置をずらす
もしくは、
・パターンのオブジェクトを選択した状態で、
選択ツールをダブルクリックします。
オブジェクトの変形を外して、水平、垂直の値を変更します。
そうすると、動かしたい方向に動かせます。
文字タッチツール
CC以降の機能ですが、
アウトラインをかけずに、一文字づつ
文字を選択でき、大きさや回転を自由に変えられるツールです。
大きさは、フォントサイズが変わっているのではなく、
垂直比率や水平比率が変わっているだけなので、
Illustratorのバージョンダウンしてもきちんと表示するとのことです。
そのため、文字を一文字大きくしたときに、
行間が変わってしまうということがありません。
流行りのフォント
最近の流行りのフォントA1明朝というもの。
各パーツが丸いところが、
自然界と通じるものがあり、見る者を気持ちよくする、ということだとか。
サントリー「角ハイボールがお好きでしょ」の広告にも、使われています。
カレンダーを1分で作る！？
まずエクセルで素早く1〜３１、mon〜sunをデータにしたら、
コピペでIllustratorに持っていきます。
カレンダーにしたい大枠の資格を四角ツールで作ったら、
日にちを分割していきます。
オブジェクト＞パス＞段組設定
で、列７、行６
で分割すると、
書式＞スレッドテキストオプション
で分割された四角の一つ一つが区切られたテキストボックスになります。
改行して文字をずらして、1ますごとに、数字を入れられます。
ここからCCの機能ですが、
書式＞ポイント文字に切り替え
で独立したテキストオブジェクトに変更できます。
エリア内文字から、ポイント文字に切り替えることもできます。
CS6以前の方には、
スクリプトがあります。
「エリアからテキスト抜き出し」というものです。
イラレで便利というサイトに掲載されています。
ハンバーガーボタン
ハンバーガーボタンは、
文字「合同」を変換したらでてきます。
「≡」こんな感じです。
改行文字の表示方法
Cmd +option + i
さらに詳しい内容は本で…
鷹野さんが書かれた、Illustratorの仕事術の本です。
最後に
いかがでしたか？昨日あったことを復習のために記事にしましたが、
かなり箇条書きになってしまいました・・・。後々画像など追記できたらと思います。
また、少し抜けてる部分もあるかもしれませんが、
印象に残った部分を中心に書きました。
私自身adobeCCに乗り換えるか迷っている状況なので、
CCの部分の紹介がうまく伝えられたかというところですが、
乗り換えた時はまたいろんな機能をご紹介できたらと思います。
気持ちの半分はAdobeCC買う方向に向いています。笑
投稿者プロフィール
-
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2022.05.20jQueryfullpage.jsで全画面表示＆スクロールを実現できます。その方法をご紹介
- 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
- 2022.02.23デザイン人は色で判断している！？ブランディングにおける色彩設計の基本
- 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。
この記事へのコメントはありません。