Web Design

CSS nite in FUKUOKA vol.6に行ってきました。


みなさんこんにちは。
今日は福岡はあいにくの雨ですが、いかがお過ごしですか?
昨日、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

ライブで目的のサイトを制作していくという形のセッションでした。


昨今のwebサイト制作では、スマホやタブレットを含めたマルチデバイス対応のものになってきていますが、
マルチデバイスのモックアップは、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以前のバージョンの方は、

エクステンションなどを活用するのもおすすめ。
Guide Guide…ガイド作成用のPhotoshopエクステンション(私の場合CS6で落ちてしまいましたが…)
Grid Designer…グリッド計算ツール
1110pxの横幅の場合、
まず、横幅1110pxで作っておき、
あとで、カンバスサイズを広げて、余白部分を作り、
ブラウザを広げた時の場合のデザインも考えられるようにする。

画像の書き出しに:CC対応のアセット生成機能

カンプから画像を書き出す際の機能です。

スライスを使わずに、レイヤーごとに
画像の書き出しができる機能。
PSDフォルダが保存されている場所に、
assetフォルダができ、そこに格納される。保存されるごとにどんどん書き出しが進みます。
.pngのほかにも、.jpgやgif、Retinaなど高解像度対応の2倍サイズ、3倍サイズで保存できるそうです。
CS6以前の場合は、
slicyがオススメです。

その他のPhotoshop表現

マンガに出てくる強調する風の表現

manga

panel-grad

panel-grad2

グラデーションオーバーレイで作ります 。

フェルト風の表現

felt

ドロップシャドウや、光彩(外側)にノイズを加えたり、パターンオーバレイで
フェルト風の表現が実現できます。
 これ使ってみたいと思います。
panel-felt
最後の方が、頭がいっぱいになってきちんと聞き取れてなかったのですが、
どんな風に使うか、自分なりに把握した部分をご紹介しましたw

詳しいセミナーの内容はこちらの本にも。黒葛原さんや鷹野さんが書かれた本です。

 

 

Illustratorのセッション


鷹野 雅弘(たかのまさひろ)さんが登壇されました

10倍ラクするIllustratorの仕事術
株式会社スイッチ

ライブカラー

トーンを複数色選択して変更できるライブカラー。

そのライブカラーにショートカットがあるとのこと。
色を変えたいオブジェクトを選択した状態で
編集>カラーの編集>オブジェクトを再配色
でOKです。

ライブカラーのショートカット

編集>キーボードショートカット

CS6以降は、検索機能が付いているため、
「再配色」などで検索をかけると、
ショートカットが設定できます。
(プルダウンはメニューコマンドを選択してください)

ショートカット一覧をテキストに書き出すことも可能です。
.txtファイルになります。

その他のショートカット

便利なお宝ショートカットが、

「他をロック」、「他を隠す」というもの。
選択したもの以外を、ロックしたり、隠したりして、
編集しやすくなりそうですね。使ってみたい!

グローバルスウォッチ

09-global

スウォッチの四角の右下が三角にかけているのが、グローバルスウォッチです。

使い方はライブカラーと似ています。

グローバルカラーに設定されているカラーは、
全部選択しなくても、その色を持ったオブジェクト一つを
選択して、色を変えると全部変わる、ようなもの?です。

昔からある機能のようですが、
要チェックです。

水玉パターンが隠されているスウォッチ

スウォッチのパターンは、普段あまり使いませんが、
その中で唯一使えそう!というのが、水玉パターンです。
白黒でスクリーントーンのようなものですが、

スウォッチライブラリを開く>パターン>ベーシック>ベーシック_点
にあります。

このパターンを、ライブカラーで変更しようとしても
変更できませんが、
配色オプション
保持:ホワイト、ブラックのチェックを外すと、
色を自由に変えられます。

パターンの位置をずらせる

パターンの位置がイマイチしっくりこない場合、
ちょっとずらしたい、てことありますよね。
そういうときは、

・ルーラーの位置をずらす

もしくは、

・パターンのオブジェクトを選択した状態で、
選択ツールをダブルクリックします。
オブジェクトの変形を外して、水平、垂直の値を変更します。
そうすると、動かしたい方向に動かせます。

文字タッチツール

CC以降の機能ですが、
アウトラインをかけずに、一文字づつ
文字を選択でき、大きさや回転を自由に変えられるツールです。

大きさは、フォントサイズが変わっているのではなく、
垂直比率や水平比率が変わっているだけなので、
Illustratorのバージョンダウンしてもきちんと表示するとのことです。

そのため、文字を一文字大きくしたときに、
行間が変わってしまうということがありません。

流行りのフォント

最近の流行りのフォントA1明朝というもの。
各パーツが丸いところが、
自然界と通じるものがあり、見る者を気持ちよくする、ということだとか。

サントリー「角ハイボールがお好きでしょ」の広告にも、使われています。

カレンダーを1分で作る!?

まずエクセルで素早く1〜31、mon〜sunをデータにしたら、
コピペでIllustratorに持っていきます。

カレンダーにしたい大枠の資格を四角ツールで作ったら、
日にちを分割していきます。

オブジェクト>パス>段組設定

で、列7、行6

で分割すると、

書式>スレッドテキストオプション

で分割された四角の一つ一つが区切られたテキストボックスになります。

改行して文字をずらして、1ますごとに、数字を入れられます。

ここからCCの機能ですが、
書式>ポイント文字に切り替え

で独立したテキストオブジェクトに変更できます。

エリア内文字から、ポイント文字に切り替えることもできます。

CS6以前の方には、
スクリプトがあります。

エリアからテキスト抜き出し」というものです。

イラレで便利というサイトに掲載されています。

ハンバーガーボタン

ハンバーガーボタンは、
文字「合同」を変換したらでてきます。
「≡」こんな感じです。

改行文字の表示方法

Cmd +option + i

さらに詳しい内容は本で…

鷹野さんが書かれた、Illustratorの仕事術の本です。

最後に

いかがでしたか?昨日あったことを復習のために記事にしましたが、

かなり箇条書きになってしまいました・・・。後々画像など追記できたらと思います。
また、少し抜けてる部分もあるかもしれませんが、
印象に残った部分を中心に書きました。

私自身adobeCCに乗り換えるか迷っている状況なので、
CCの部分の紹介がうまく伝えられたかというところですが、
乗り換えた時はまたいろんな機能をご紹介できたらと思います。
気持ちの半分はAdobeCC買う方向に向いています。笑

投稿者プロフィール

mayukou
mayukou

Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約5年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。

詳しくはこちら


Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つのこと。

    みなさんこんにちは、mayukouです。先月、仕事の案件でwordp…

  2. Web Design

    カフェのサイトをwordpressでリニューアル制作しました。その時の覚書

    みなさんこんにちは、mayukouです。さて、今回はwordpres…

  3. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ

    みなさんこんにちは、mayukouです。今回は、スマホサイトやレス…

  4. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

  5. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。

    みなさんこんにちは、mayukouです。仕事でキュレーション風ニュー…

  6. ブログ

    ポートフォリオサイトをリニューアルしました

    こんにちは。mayukouです。唐突ですが、自分の今の力を目に見え…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. ブログ

    ポートフォリオサイトをリニューアルしました
  2. ブログ

    明けましておめでとうございます。今年の抱負
  3. Photoshop

    Photoshopでスタンプ表現が簡単に!PSD素材で一発表現!
  4. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました
  5. Mac

    気に入った画像を切り抜いて保存できる!スクラップアプリ、Pixaveの使い方
PAGE TOP