月別アーカイブ: 2017年1月

CSS 色の指定方法について

CSSでは、文字や背景、ボーダーなど、いろいろなところで色の指定をします。色の指定方法で最も一般的なのは、RGBそれぞれの階調を16進数で表したカラーコードです。16進数は、1~9までの数字とA~Fまでの文字で数を表すので、2桁だけで0~255までを表現できます。これをRGBの順に2桁づつ並べて、先頭に「#」をつけて「#FFFFFF」というように書きます。

色の指定方法は、カラーコードのほかにもいくつかあります。以下に、指定方法をまとめます。

色の指定方法
指定方法 値の記述例 説明
カラーコード #FFFFFF RGBそれぞれの階調を16進数の2桁で表し、先頭に「#」をつけて記述します。
rgb rgb(255,255,255)
rgb(100%,100%,100%)
RGBそれぞれの階調を「 , 」で区切って記述します。階調は、0~255の数値か%での指定です。0%のとき「%」は省略できないので注意してください。
rgba rgba(255,255,255,0.5)
rgba(100%,100%,100%,0.5)
RGBの階調の後、透明度を0~1の数値で記述し、それぞれの数値は「 , 」で区切ります。階調は0~255の数値か%での指定です。0%のとき「%」は省略できないので注意してください。
その他
透明 transparent 透明を表す値で、背景色のデフォルトの値になっています。rgbaのrgba(0,0,0,0)と同じ指定(黒を完全に透明にしたもの)です。

ポートフォリオに使える無料モックアップ素材

デザイン業界などの就職で、一番重要視されるのがポートフォリオです。ポートフォリオは作成に結構時間と労力が必要です。納得のいく作品を集めて、作成してください。しかし、せっかくいい作品を集めても、見せ方によっては魅力が半減してしまいます。ポートフォリオ自体のデザインも見やすく、きれいに仕上げ無いといけません。

作品をより魅力的に見せたいとき、モックアップ素材を使うと効果的です。モックアップ素材とは、作品のデザインをはめ込むことで、印刷物なら実際に印刷したかのように、WEBサイトならPCやスマートフォンなどのデバイスに表示されたように見せるためのものです。

モックアップの例

名刺やフライヤー、パンフレット、Tシャツ、カン、ビン、PC、スマホ…などなど沢山の種類があります。

モックアップを使うだけで、デザインがより魅力的に見えるので、ぜひ試してみてください。

参考サイト

下記は、無料で使えるモックアップがまとめられたWEBページです。

モックアップ アーカイブ – PhotoshopVIP

Photoshopのパスの使い方

PhotoshopのパスはIllustratorのパスとは違い、そのままでは塗りや線を入れることができず、画像に何ら影響を与えません。ではどういうときに使うのか、使い方をまとめました。

パスの利用方法
利用方法 手順
選択範囲を作る 「パス」パネルでパスを選択(表示)し、パネル下部の「パスを選択範囲として読み込む」ボタンをクリック
ブラシの線を描く 「パス」パネルでパスを選択(表示)し、パネル下部の「パスの境界線を描く」ボタンをクリック
内側を塗りつぶす 「パス」パネルでパスを選択(表示)し、パネル下部の「パスを描画色を使って塗りつぶす」ボタンをクリック
ベクトルマスクを作成する パスが表示された状態で「レイヤー」パネル下部のマスク作成のボタンをCtrl+クリック

なお、パスを描画すると、「パス」パネルに「作業用パス」として表示されますが、このままでは新しいパスを描いたときに前のパスが消えてしまうことがあります。そういったことの無いように、パスを描いたら「パス」パネルでダブルクリックして保存しておきます。

また、パスはレイヤーに描画されるものではありません。どのレイヤーでも使用することができます。描いたはずのパスが表示されないときは、「パス」パネルで選択すれば表示されます。ただし、パスを保存していなかった場合は消えてしまっている可能性がありますので、注意してください。

HTML title属性の意味と使い方

今回は、HTMLのtitle属性についてです。title属性は、色々な要素に入れることができますが、dfn要素やabbr要素で使う際には特別な意味を持ちます。

title属性の意味

要素に補足情報を追加するための属性です。title属性の記述がある要素に、PCでマウスカーソルを当てると、ツールチップが表示されるのが一般的です。

使い方

  • 画像の著作権表記や説明に使う
  • 文章や語句の注釈や説明に使う
  • dfn要素で、定義される用語の正式名称を表す
  • abbr要素で、略語やイニシャルの正式名称を表す

使う際の注意

title属性に入れた値は、ブラウザでツールチップとして表示され、ユーザーの理解を助けてくれます。しかし、これはPCで見たときの話です。スマートフォンやタブレットで閲覧する場合、「ホバー(マウスカーソルを当てること)」ができないため、基本的にはtitle属性の中身を確認することができません。そのため、HTML5の仕様書ではtitle属性に頼ることは推奨されていません。title属性の中身を見られない環境でもコンテンツの内容は問題なく伝わるようにマークアップしてください。

Photoshop 移動ツールの「自動選択」チェックボックスについて

Photoshopでは、常にどのレイヤーを編集しているのかレイヤーパネルで確認しながら作業をしないと、描画するレイヤーを間違えたり、別のレイヤーを動かしてしまったりということがあります。特に移動ツールは、「自動選択」にチェックが入っているかどうかで、挙動が変わるのでご注意ください。

「自動選択」とは

Photoshopの移動ツールを使用中、オプションバーに「自動選択」と書かれたチェックボックスが表示されます。これにチェックが入っていないときは、画像のどこをドラッグしても、レイヤーパネルで選択したレイヤーしか移動ができません。チェックが入っていると、レイヤーパネルでレイヤーを選択していなくても、画像をドラッグ(クリック)するだけで、ドラッグ(クリック)した部分を含むレイヤーが選択されます。

つまり、「自動選択」にチェックが入っているかどうかで、移動ツールでレイヤーを移動するときの操作が変わります。

「自動選択」チェックなし レイヤーパネルでレイヤーを選択してドラッグして移動。あらかじめ選択しておいたレイヤーしか移動しない。ドラッグする場所はどこでも良い。非表示のレイヤーや、隠れたレイヤーも移動できる。
「自動選択」チェックあり 動かしたいものを直接ドラッグして移動。自動でレイヤーが選択されるので、レイヤーパネルであらかじめ選択しておく必要がない。ただし、透明部分をドラッグしても移動できないので、描画ピクセルの上でドラッグする必要がある。

注意

「自動選択」にチェックが入っている場合と、いない場合で注意することをまとめておきます。

「自動選択」チェックなしの場合の注意点

  • 先にレイヤーパネルでレイヤーを選択しておかないと移動できない
  • 非表示のレイヤーや、隠れて見えないレイヤーも移動できる

「自動選択」チェックありの場合の注意点

  • レイヤーパネルで選択しているレイヤーにかかわらず、ドラッグしたものが移動する
  • グループごと移動したい場合「自動選択」チェックボックス横の選択対象を「レイヤー」ではなく「グループ」にする
  • 透明部分をドラッグしても移動できない
  • 非表示のレイヤーや、隠れて見えないレイヤーは移動できない

デザインする前にコンセプトやターゲット、内容の見直しを

WEBサイトのデザインカンプやフライヤーなどの課題制作で、毎回皆さんにお伝えしていることは、コンセプトやターゲットなどをよく考え、それに沿った内容にしてください、ということです。

コンセプトやターゲットが決まっていない状態でデザインしてしまうと、軸がぶれてしまって、デザインするのに時間がかかります。

また、WEBサイトやフライヤーに入れる内容(情報)は、あらかじめ決めておく必要があります。内容が決まっていない状態でレイアウトを始めてしまう方がいらっしゃいますが、本来、内容が決まっていなければデザインはできないはずです。

たとえばWEBサイトの場合は、サイトに必要な内容をまとめ、どのようなページが必要か決めて、サイトマップを作ってからデザインに取り掛かります。内容がおぼろげなままデザイン開始すると、結局レイアウトがはかどらず、逆に時間がかかることになってしまうのでご注意ください。

たとえ予定通りに制作が進まなかったとしても、あらかじめ準備しておくことは大切なので、意識して決めておいてほしいと思います。

Illustratorで木目テクスチャを作る方法

Illustrator木目テクスチャ

木目など、有機的なテクスチャはPhotoshopで作成したり、写真を使ったりすることが多いと思いますが、Illustratorの機能だけで作る方法があったので紹介します。この記事は、以下のチュートリアルを参考にしています。

参考:How to Create A Wood Grain Texture in Adobe Illustrator

木目テクスチャの作り方

  1. 土台となる四角形を作成する
  2. 細長い四角を描き、Photoshop効果の「グラフィックペン」を適用
  3. 2の「アピアランスを分割」し、「画像トレース」でパス化する
  4. 3の四角を土台の大きさに変形し、色を変える
  5. 4の木目を「ワープツール」などで波打たせる

1.土台となる四角形を作成する

木のベースの色で四角形を作ります。この四角の上に木目を乗せます。

2.細長い四角を描き、Photoshop効果「グラフィックペン」を適用

効果:グラフィックペン

木目の元になる細長い四角(色は自由)を描きます。縦の木目を作りたい場合は横長、横の木目なら縦長に、土台の四角より一回り小さく作ってください。その四角に 効果>スケッチ>グラフィックペン を適用します。細かい線ができるように各パラメーターを調整してください。「ストロークの長さ」は長く、「明るさ・暗さのバランス」は小さく、「ストロークの方向」は作りたい木目の方向にします。

3.2の「アピアランスを分割」し、「画像トレース」でパス化する

画像トレースの設定

「グラフィックペン」を適用した四角に、オブジェクト>アピアランスを分割 を実行します。するとビットマップ画像に変換されるので、選択してコントロールパネルから「画像トレース」ボタンをクリック、ウィンドウ>画像トレース で、下の画像のように精細なトレース結果になるよう設定します。カラーは「白黒」で、「ホワイトを無視」にチェックを入れてください。設定が終わったらコントロールパネルの「拡張」ボタンをクリックします。※IllustratorCS5以前は「画像トレース」が「ライブトレース」、「画像トレースパネル」がオブジェクト>ライブトレース>トレースオプション となっています。

4.3の四角を土台の大きさに変形し、色を変える

木目を土台に合わせて変形し、色を濃い茶色などに変えます。

5.木目を「ワープツール」などで波打たせる

ワープツールの設定

ワープツール(線幅ツールを長押し)などで木目を波打たせます。まずはワープツールをダブルクリックし、ワープツールオプションで「強さ」を10%程度に変更してください。設定したら木目に沿ってなぞるようにドラッグすると、自然な強さで波打ちます。選択したときの線が邪魔なら、Ctrl+Hで境界を隠しておくと作業しやすいです。

木目が細かいと結構負荷がかかります。処理が重いと感じたら、エンベロープなどで変形することをお勧めします。

これで完成です。

完成

Illustrator アピアランスで鏡面反射の文字を作る

完成品

今回の記事では、Illustratorのアピアランス機能を使って、文字の鏡面反射を作る方法をご紹介します。使う機能は、「新規塗りを追加」と「(効果の)変形」などです。

最初に、完成品のアピアランスパネルの状態を載せておきます。

完成品のアピアランスパネル

文字の塗りは削除し、テキストに塗りを2つ追加して、片方の塗りを反射した文字に使っています。「効果」の「変形」で上下に反転し、位置をずらしています。

作り方

1.「文字」の塗りを「なし」にし、「テキスト」の塗りを2つ追加する

文字を打ったら、塗りを「なし」にし、選択ツールで選択してアピアランスパネルを開いて「テキスト」に塗りを2つ追加します。アピアランスパネルの「テキスト」と「塗り」の違いは、以下の記事で詳しく書いています。

2.片方の塗りにグラデーションを設定する

塗りの一方にグラデーションを設定します。色は「黒~黒」で、不透明度で濃さを調整してください。

3.グラデーションの塗りを「変形」で編集する

「変形」の設定

グラデーションを設定した方の塗りを 効果>パスの変形>変形 で反転・移動します。「オプション」の「水平軸にリフレクト」で文字を反転し、プレビューで様子を見ながら、「移動」の「垂直方向」でずらしてください。

4.グラデーションの塗りの描画モードを「乗算」にする

最後に、アピアランスパネルでグラデーションの塗りを選択して展開し、「不当明度」の設定で描画モードを乗算にして完成です。

Ilustrator 線対称の図形を変形するときに便利な拡大縮小ツール

以前の記事でIllustratorのリフレクトツールを使って左右(上下)対称の図形を作る方法を紹介しました(記事:Illustrator 左右対称の図形を作るときに便利なリフレクトツール)。線対象の図形の半分だけを作成し、リフレクトツールで反転コピーして連結する方法です。しかし、完成時の形を想像しながら半分の図形を作るのは結構難しいので、思い通りの形にならないこともあると思います。線対称の図形の一部を変形したいときに、線対称の形を保ったまま変形する方法を紹介します。

線対称の図形を変形するとき、ダイレクト選択ツールで部分的に変形すると、対称な図形ではなくなってしまいます。そこで、拡大縮小ツールを使います。拡大縮小ツールは、ドラッグすることでオブジェクトの拡大・縮小ができるツールですが、アンカーポイントを個別に選択して拡大縮小すると、オブジェクトの一部を拡大縮小できます。この方法では、線対称の形も崩れません。ただ、どんな変形にも出来るというわけではないので、無理そうだと判断したら図形を作り直してください。

拡大縮小ツール変形の例

ハートとスペードを拡大縮小ツールで変形した例です。画像の青い○印をつけたアンカーだけを選択し、拡大縮小しています。

写真撮影時のライティングについて

本日、午前コースの訓練で写真撮影実習を行いました。カメラの機能解説やライティング、構図について解説を行った後、実際に写真を撮影してもらいました。今回は、写真撮影で重要になるライティングについてです。

写真は、人間の目で見た風景をそのまま表現できるわけではありません。肉眼で見て、明るいところも暗いところも細部まで判別できる場合でも、写真に撮ると白トビや黒ツブレを起こすことがあります。カメラは人間の目ほど柔軟に明るさの違いを写すことができないからです。そういったときには、ライティングを工夫して物の形がはっきり移るように調整をします。

点光源と面光源

写真撮影で扱う光源には、点光源と面光源があります。それぞれの光源で撮れる写真の陰影に違いが出ます。

点光源

点光源は電球など、小さい範囲から光を発する光源です。点光源で撮影すると陰影が強くなり、印象の強い写真になりますが、白トビや黒ツブレを起こしやすく、物の形が分かりにくくなってしまうことがあります。

面光源

面光源とは、点光源を半透明の板に当てて作った光源や、モニターのバックライトに使われるELなどの、広い範囲から光を発する光源のことです。面光源の光で撮影すると柔らかく光が当たり、極端に暗い部分や明るい部分ができるのを防ぐことができます。

レフ版などの反射光を利用する

レフ版(リフレクター)とは白や銀色の板で、撮影時の光を反射させるために使います。二つ折りの固い板状のものや、小さく折りたためる布状のものなどがあります。撮影してみて、影が濃くなりすぎてしまったときには、このレフ版などの反射光を使って影を薄くします。白い紙や板、アルミホイルなどでも代用可能です。

たとえば、左手前から照明で光を当てているとき、右奥にできる影が濃すぎるなら、右側にレフ版を置いて緩和するというように使います。

このように、写真を撮っていて明るさが思い通りにならないときに、ライティングで解決できることがあります。デジタル一眼を使った本格的な撮影でなくても、スマートフォンなどで撮影をする場合にも言えることなので、ぜひ活用してみてください。