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. お仕事紹介

    お仕事紹介:保育園のお祭りパンフレットを作りました!

    みなさんこんにちは、mayukouです。過ごしやすい日が続きますが…

  2. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

  3. Web Design

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

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

  4. Sass

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

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

  5. レポート

    kindle Paperwhite買いました。iPad miniとの違いやメリットとは。

    みなさん、こんにちは。mayukouです。先日amazonで注文した…

  6. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

コメント

  • コメント (0)

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

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

CAPTCHA


スポンサー

instagramもやっています

最近の記事

  1. 現像すると写真が生き生きする!Macの写真アプリが素敵
  2. 売り上げアップを実感♪目から鱗の本「どうすれば売れるのか」を…
  3. 購入して半年♪iPad Proで描いたイラストをご紹介。(主…
  4. ブロガーの味方?高級コンデジ、Panasonic LX9を買…
  5. デザインが成功するテンプレがここに。「なるほどデザイン」を読…

facebook更新中!

  1. Photoshop

    かすれや濃淡が出る!かわいい手描き感のあるブラシのご紹介♩(有料)
  2. デザイン

    楽天ショップのデザインの参考に!おしゃれな楽天ヘッダー7選
  3. Photoshop

    いい味が出る!リアルな水彩画風タッチに最適なPhotoshopのブラシ(有料)
  4. クリスマス

    メリークリスマス☆ハイアットのケーキや、ケンタッキーのチキンなど家で過ごしたクリ…
  5. Mac

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