【 jpegの容量を小さく / png gif JPEGの違い / ディザ処理とは? 】PNG GIF画像をディザリングで極限まで軽くする方法

Jpeg画像の容量を小さくするには?

jpegの容量を小さくするには「Adobe CC」を契約している場合は『Photoshop』で「Web用に保存」を使い60~80%の品質が無難です。

アップデートが停止している『Adobe Fireworks』はPNG8形式とGIFの減色に強いツールですが、Jpegの場合は『Photoshop』での「Web用に保存」の方が軽くなる場合が多いです。

『Photoshop』でJpegを書き出す場合は、
スマートフォン向け写真画質の画像(w750p× x 程度)であれば100~200k以内に収めますが、さらに最適化をするのであればPNG8の「ディザ処理あり」の画像と比較して綺麗と思える方を運用に使います。

人物風景写真の場合はJpegが好ましいですが、60%以下に品質を下げて圧縮していくと「ブロックノイズ」が顕著に目立ってきて使用に耐えられない画像になります。

【png gif JPEGの違い】について一言でいうと、

  • 最大256色しか使えないPNG8とGIFでは、PNG8の方が容量が軽くなる
  • PNG24、PNG32の形式では256色以上を使えるが、容量が桁違いで大きくなる ※ブロックノイズが無くJpegよりも綺麗
  • PNGとGIFは再保存や圧縮を繰り返しても画像が劣化しないがJPEGは劣化していく
  • 過去の携帯電話端末ではGIFは使えたがPNGが使えない機種が大半であった ※docomo/auはpngが使えない機種が存在したSoftBankは両方使える

それでは、
実際に画像を使用した際、WEBページを表示するまで「8秒以上」待たされた時代がありました。

書き込み速度(ライト)、読み込み速度(リード)、が機器/回線ともに高速になった今では、WEBページ画像の重さを気に掛ける習慣が減っておりましたが、今回の世界的規模のコロナ被害により、同時刻に部屋でネットを利用する人々が増え、稀にページの表示に時間がかかる状況があります。

「いつ発生するかわからない緊急時」においても、広く公平に、WEBを問題なく閲覧できる環境を構築するために必要な「ネット回線にやさしい」軽量化/最適化された画像の作り方をアーカイブとして残します。


目次


画像容量の傾向

GIF/PNG8のインデックスカラー画像データは、原則ピクセル(ドット)配置が複雑化した分、データ容量は増えます。


よって、可能な限りベタな1色アニメ塗りを意識すれば、まず容量は軽くなります。


模様の違いによる画像容量比較

それでは様々な画像配置で比較してみましょう。


注意が必要なのは、一見、容量が同じになりそうな「縦じま」「横じま」の違いだけでも容量が変わるデータ構造です。

詳しく説明するとバイナリデータやパレット構造などのプログラム的な話になるので割愛します。


ちなみにこの赤青のタイル模様の画像は縮小してドットバイドットで表示されると赤色と青色が混ざり紫色に見えます。

それであれば、最初から紫色1色で表示したほうが画像容量は軽くなるのですが、昭和な時代のコンピュータでは、白黒、光の三原色、色の三原色である、
「青」「赤」「マゼンタ」「緑」「シアン」「イエロー」「白」の7色に無色の「黒」を加えた8色表示しかできない制限ある製品があり、疑似的に7色以外を再現する「タイルペイント」技法に需要がありました。


使用色数を減らす

使用する色が1色増えるだけで容量が増えます。

GIF/PNG8の形式で書き出されると、インデックスカラー(パレットカラー)は全256色で構成されていますので、そこから64色→32色→16色、と大まかに色数を減らしていき、
元画像の再現度が7~8割ぐらい留めている段階で止めます。

その段階から微調整の仕上げにはいり、1色ずつ徐々に色を減らして最終調整をします。

うまくディザ処理をすれば「半分の色数」で、「容量も4割」ほど減らせます。


ディザ(ディザリング)処理をしない

ディザ処理(ディザリング)はこれまでの説明のように、異なる2色を隣り合わせに並べることで足りない色を疑似的に再現する効果ですが、
タイル模様にドットが配置されることから「タイルペイント」とも呼ばれます。

この処理をすることで、仕様上の色数以上の表現ができます。

しかし、写真や段階のあるグラデーションを使っている画像の容量削減に有効ですが、ペタッとしたアニメ調の平らな表現には向きませんので使い分ける必要があります。


※厳密には、平たんな部分の無い写真画質の画像はJPEG形式が容量削減に適しています。


画像再現→色数を増やす?ディザ処理をする?

色数を減らすか、多少容量が増えてもディザ処理で元画像の再現度を保つかを判断します。

目安は、仕様設計で定めた画像容量の上限です。
色を増減させながらディザ処理具合も都度確認して、
目安の画像容量を超えないギリギリまで画像再現度を調整し書き出します。

書き出した画像はそのものに見えるかどうか、第三者に確認してもらいましょう。

問題なければ、仕様に沿った最適化された画像の出来上がりです!


リクエストを減らす→CSSスプライトで一枚画像にする

WEBページを表示する際に読み込み速度に影響を与えるのがWebサーバーへの「リクエスト」回数です。

このHTTPリクエスト回数を如何に減らすかが、WEB設計をする上で重要であり、またやりがいある作業です。

GIF画像を1枚読み込むと  1リクエスト。
GIF画像を10枚読み込むと 10リクエスト。

原則、リクエスト数が増えた分だけ処理が増え読み込み時間(待ち時間)が増えます。

現代のネット回線は太く、一度の読み込みで受け取れる情報量が増えておりますので、

1KBの画像でも、
100KBの画像でも、
読み込む速さに違いはありません。注)回線状況に影響を受ける

ページ読み込み時間に影響するのは「×リクエスト数」です。

100KBの画像を1枚読み込むより、
1KBの画像を100枚読み込む方が、総容量は同じなのに時間がかかる訳です。

前置きが長くなりましたが、
そこで有効なのが「CSSスプライト」の処理です。※「CSSスプライト」使用方法の説明は割愛します

100枚画像がどうしても必要な仕様であれば、その100枚を一枚の画像にまとめて張り付けてしまうやり方です。

1リクエストで済み、おおげさに言えば100分の1、時間を短縮できます。

WEBページで使用する場合はスタイルシートでx軸y軸の始点座標を指定することにより、マスク処理のように、画像のなかの見せたい「一部分」だけを都度表示させて運用します。


さいごに

なんでも可能な贅沢な環境よりも、制約ある作業に「やりがい」と「達成感」を感じるのも不思議なものです。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

Photoshop アートボードを使う

Photoshopでアートボードを使っていますか?
もちろん効率的に活用している方は沢山いらっしゃると思いますが、私自身、普通の「新規ドキュメント作成」で事足りていたためあまり馴染みがございませんでした。
そこで今回は初心者にもわかる!Photoshopのアートボードとはどのようなものか、勉強も兼ねて個人的な主観ではございますが書いていきたいと思います。

必要なところだけ読みたい方はこちらから↓

▼そもそもアートボードとは?
▼どんな作業に向いている?
▼1.ファイルの準備
 ■新規で作成
 ■アートボードの名前変更
 ■アートボードの追加
 ■アートボードの移動
▼2.画像作成
 ■スマートオブジェクト
 ■背景素材配置
 ■テキスト、図形配置
▼3.作成後
 ■書き出し
 ■修正
▼さいごに

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼そもそもアートボードとは?

デザイン、レイアウトやイラストなど、印刷や書き出し可能な領域の目安となるキャンバスです。
複数のデータを1つのファイル内で管理することができるため、便利ですが容量はそれなりにかさんでしまうことはあります。
例えば、編集ソフトが美術室であれば、アートボードは画用紙の様な関係ですね。

▼どんな作業に向いている?

それではアートボードはどんな作業をするのに向いているのでしょうか?考えてみました。

①テーマ、表題が同じで複数の素材を扱うとき

大きな問題ではないですがちょっと不便だなと感じるかもしれません。

②同じデザインのサイズ違いを作成するとき

これらはあくまでも一例になりますが、簡単にメリット・デメリットをまとめると…

メリット
・1つのファイルで複数のデータを管理できる
・複数のデータを同時に確認、編集することが出来る

デメリット
・複数のデータを扱うため、ファイルが重くなる

などなど考えられます。

▼1.ファイルの準備

今回は分かりやすく以下の2サイズの下記バナーをフォトショップのアートボードで作成してみたいと思います。

さっそくフォトショップのアートボードを立ち上げてみましょう。

■新規で作成

①[ファイル]→[新規](Ctrl+N)で新規ドキュメントを開く。
 今回は600×500サイズを入力しています。
②アートボードにチェックを入れる。
③作成をクリック!

■アートボードの名前変更

アートボードを作成すると、デフォルトで名前が入っており、今回は“アートボード1”となっています。(個数により数字は変化する)このままでも問題はございませんがデータを見た時に、瞬時に何を作成しているのか視認できた方が効率も良くなりますので今回はアートボードの名前を変更します。

最初に、レイヤーが見当たらない場合は[ウィンドウ]→[レイヤー](F7)で表示して下さいね。
レイヤーを見てみると“アートボード1”というフォルダーが出来ております。これがデザイン、レイアウトやイラストなど、印刷や書き出し可能な領域の目安となるフォトショップのキャンバス=アートボードになります。このフォルダーに素材を置く(いれる)事でアートボードに付与していくことができます。

“アートボード1”となっているところをダブルクリックします。そうすると文字が打てるようになりますので任意のアートボード名を入力して下さいね。今回は分かりやすく“600×500”とデータのサイズを入力しました。

アートボード側も自動的に名前が変わりました。

■アートボードの追加

今回は2サイズ作成しますのでもう1つアートボードを用意します。
この時に、最初に行った新規作成から行ってしまうと、管理ファイルが別になってしまいますので、追加するときはレイヤーのメニューから選択します。

この段階でアートボード名をつけておくと後々つける必要が無いので便利です。今回1000×120サイズのアートボードを新規に追加します。

■アートボードの移動

アートボードを追加した際にアートボード同士が重なってしまったり、そもそもアートボードの位置を動かしたい場合など、簡単に移動させられます。

方法①自由移動


移動ツールを選択し、動かしたいアートボードを選択します。
ワンクリック長押しのまま動かして最適な場所へ移動させます。
※②で選択をしていれば、移動ツールの矢印がアートボードに触れていなくても動かせます。

方法②整列

手軽にきっちり合わせたい時などは整列ツールが便利です。
動かしたいアートボードと目安となるアートボードを選択し、合わせたい位置のアイコンをクリックします。

これらは、使っていれば自然と慣れてくると思います。
移動ツールでちょっと動かしてから上辺を揃える…など、両方を使用するとより利便性がアップするかもしれません。

▼2.画像作成

それでは準備が出来ましたので画像作成を進めていきます!
今回は分かりやすく、「背景」「図形、テキスト」の2つに分けて説明します。

■スマートオブジェクト

最初に、作成にあたりスマートオブジェクトがキーポイントになってくるのでもし良く分からない…という方は下記ご確認くださいね。特に太字の所大事です◎

■背景素材配置

全体像が見やすい「600×500サイズ」から編集します。


①背景素材をファイルからドラッグしてアートボードに配置。素材はドラッグしているため元々スマートオブジェクトになっています。
②分かりやすくレイヤーの名前を「背景_600×500」に変更。

これで600×500サイズの背景素材の配置は完了です。

①1000×120サイズに背景素材を置く際はスマートオブジェクトの機能を使いたいため「背景_600×500」を複製して配置します。複製後は適応サイズへ調整して下さいね。
(背景素材が足りなかったので同じ色で塗り足しレイヤー追加)
②分かりやすくレイヤーの名前を「背景_1000×120」に変更。

これで1000×120サイズの背景素材の配置は完了です。
もし、配置した素材がスマートオブジェクトになっていなかったら「該当レイヤー右クリック→スマートオブジェクトに変換」をして下さい。

■テキスト、図形配置

次に、『アクセス:東京駅から2分』『2020年1月30日開催』部分を作っていきます。これらは下の図形とセットにしているため同時に進めます。

だいぶ完成に近づきましたね。残すは“親子でフリーマーケット”部分ですが、同じ比率のものを使用するには今回は難しいので各々個別に入力しました。(上手いことできるやり方もあると思うのですが、まだまだ勉強が必要です…)

完成です。

▼3.作成後

作成後、書き出し、修正などがあると思いますので簡単に紹介していきます。

■書き出し

[書き出したいアートボードを選択→右クリック→書き出し形式]をクリックします。

■修正

・ピンクの図形を青色へ変更
・“東京駅”を品川駅へ変更
・背景を変更
してみます。



▼さいごに

Photoshopのアートボードは使っていませんでしたが、今回記事を書き進めていくにつれて、こういうことだったのね!と理解すると同時に素直に便利だなと思いました。
個人ならともかく、お仕事などではもちろんユーザーによっては「使わなくても…」「サイズ違いのデザインの際には使っていこう!」などなどおられると思いますので臨機応変に使用できれば良いですね。知識として持っておく分には持っておいた方が他にも応用が利きそうなので良いかと◎

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

【PNG32 PNG24 PNG8 違い】WEB向け画像拡張子の種類と特徴

拡張子というのは、画像や音楽などあらゆるファイルの名前の末尾につけられている文字列のことです。「ファイル名.●●」の「.●●」の部分ですね!
この記事では「主にWEB上で使われる画像」の代表的な拡張子の種類やそれぞれどんな時に適しているのかなどを簡単に紹介していければと思います。


GIF(.gif)

読み方:ジフ

最大256色で表現されるファイル形式です。色数が少ない画像を書き出すのに適しています。透過処理も出来て、容量も軽いため、ロゴやアイコンやボタンなどに最適な形式です。色数が少ないほどファイルサイズは小さくなります。
またGIFは可逆性圧縮形式の画像です。可逆圧縮とは、簡単に説明すると可逆圧縮は劣化が生じない圧縮方式の事です。一度保存した画像を再度加工したりリサイズをしても、画像が劣化しません。


【GIF 色数64 18KB】

上の絵は塗りが単色で色数が少ないので、綺麗に書き出す事が出来ました。
ただ、色数が多いもの、グラデーションを多用した絵や写真などを書き出す時には向いていません。


【GIF 色数64 25KB】

こちらは先ほどと同じ線画にグラデーションを多用して色を塗ったものです。先ほど載せた絵と同じく書き出しの際の色数は64ですが、画像のあちこちにノイズが発生してしまっています。
色数を多くして書き出せばもう少し綺麗に処理出来ますが、色数が増えるほどファイルサイズは大きくなってしまいます。

またGIFはアニメーションを作る事が出来ます。「アニGIF」と呼ばれるものです。

アニGIFについてはぜひこちらの記事も参照してみてください↓
簡単!なめらかなアニメGIFの作り方

PNG(.png)

読み方:ピング

約1677万色を表現出来る画像形式で、文字や図形などが含まれフチがはっきりしている画像、グラデーションや色数の多い画像に適しています。透過処理も出来ます。(※種類による 後述します)
またPNGもGIFと同じく可逆性圧縮なので画像の劣化が起きません。
ただGIFや後述のJPGと比べると、ファイルサイズが大きくなってしまう事が特徴です。


【PNG24 63KB】

GIFで全く同じ画像を色数256色(最大)で書き出すと22KBでしたが、PNGにすると一気に63KB…およそ3倍になりました。
高画質にはなりますが、大きな画像を多用するページでPNGをたくさん使うと少し重くなってしまうかもしれません。

またPNGには種類が3つあり、「PNG32」「PNG24」と「PNG8」というのがあります。
フルカラーで表現出来るPNGは「PNG32」と「PNG24」の事を指します。

PNG32とPNG24の違い

PNG32はPNG24を更に高画質に、そして透過情報を持たせたものです。PNG24の透明な部分はあくまで「透明な部分を表現している」のであり、厳密には透過ではないのです。
PNG32にもなるととてつもなくファイルサイズが大きくなるのであまりWEBには適していません。WEBでよく使われるのは「PNG24」、もしくはこれからご紹介する「PNG8」が主流になっています。

PNG8とは

GIFと同じように256色で表現される形式です。透過も出来て容量も軽いので、PNG8もGIFように色数の少ないデータを書き出す際に向いています。
ほぼGIFと同じなのですが、違いをあげるとするとグラデーションなどを含んだ画像において、PNG8の方がGIFよりファイルサイズが小さくなります。

同じ写真をそれぞれGIF、PNG8で保存して比較してみましたが…見た目に差異はありませんが、PNG8の方が少しファイルサイズが小さいですね。
まあ最終的にGIFを選ぶかPNG8を選ぶかは、個人の好みかな~と思います!

私は「画像PNGで欲しいです!容量200KB以下で!」と言われたら大体PNG8で書き出すようにしています。あとPNG8の事はピンパチと呼んでいます。多分日本でこう呼んでいる方は多い。はず。

JPG(.jpg)

読み方:ジェイペグ JPEGと表記されることもある

約1677万色を表現出来る画像形式です。写真などの色数の多い画像に向いています。そこまで聞くとPNGと同じじゃん?と思いますが、JPGは他の形式に比べ容量を軽くする事が出来るのが特徴です。GIF、PNGと違って透過処理は出来ません。
またJPGは、「非可逆圧縮」です。非可逆圧縮は、可逆圧縮と逆で保存を重ねるほど画像が劣化していってしまいます。一度そうなってしまったら元のオリジナルデータには戻せません。

一般的にJPGは写真向きの形式と言われています。スマホで撮った写真は基本的にJPGで保存されています。
単色のものやフチがはっきりしているものはぼやけてしまったり劣化が激しいのでJPGにはあまり向きません。


【JPG 最高画質】

画質も細かく調整して書き出しが行えるので、ファイルサイズと相談しながら圧縮が行えます。ただあまりにも圧縮すると劣化がわかりやすく表れてしまいます。


【JPG 低画質】

ガサガサになってしまいますがファイルサイズはこれでなんと10KB。

まとめ

・ロゴ、アイコンなどの色数が少ない~単色でフチがはっきりしているもの、アニメーションはGIF
・GIFのアニメーション以外の要素はPNG8でも代用出来るので用途によって使い分ける
・色数が多く、高画質に書き出したいイラストや画像はPNG24かPNG32(透過と容量に注意)
・写真はJPGが一般的(圧縮率に注意)

長々と書いてしまいましたが、まとめるとWEBで画像を扱う際はこのポイントを抑えておけば問題ないと思います。
今回はWEBで中心に使われている拡張子に特化して書きましたが、他にも色々な拡張子があるのでそれもまたいずれ紹介出来たらなあと思います。


いかがでしたでしょうか~ぜひ参考になれば幸いです。
それでは!寒さにお気をつけて!ユイPでした。

ツイッター↓
ユイP@デジマースブログ

【Photoshop】簡単!曇り空を青空にする方法

こんにちは!
今回のテーマは「【Photoshop】簡単!曇り空を青空にする方法」です。
Photoshopの編集・合成テクニックを使い、簡単且つ自然に写真の曇り空を綺麗な青空に変える方法をお話ししたいと思います。


構図は良いのに空の色が…

出先で撮った思い出の写真や、制作で使う為にネットで探した写真素材、構図は良いのに空が曇っていてイマイチ…と感じた事がある方も多いのではないでしょうか。

ありのままの写真の良さと言うのもありますが、仕事の制作物の場合、案件のコンセプト上どうしても青空が必要な時があります。
例えば「空と自然の写真を使って夏らしい広告を作って」と言われた時、使用する素材は曇ったような白っぽい空より青い空に白い雲の方が適切ですよね。

写真を自分で撮ったり、ネットの無料素材を探す場合、構図も色合いもイメージにピッタリ合う物を探すのは時間が掛かり大変です。

そんな時はPhotoshopを使って簡単に編集することが出来ます。


作業環境

今回使用した作業環境は下記の通りです。

■Photoshop CC 2019

※この記事ではPhotoshop CC 2019のプラグイン機能「Camera Rawフィルター」を使用しています。


Photoshopで曇り空を青空にする方法

曇り空を青空にする方法はいくつかありますが、今回お話しするのは下記の2種類です。

①Camera Rawフィルターで調整する。
②別の空の写真と合成する。

まず1つ目の「Camera Rawフィルター」についてですが、これは写真の明るさや色味を調整出来る機能です。
曇り空を青空にしたい時だけでなく、写真の細かい色味を変えたい時も簡単に編集する事が出来るのでとても便利です。

ただ、雲が分厚く空を覆っている写真など、場合によってはCamera Rawフィルターで調整しても不自然になってしまう時があります。
そんな時は2つ目の方法を試してみてください。

2つ目の「別の空の写真と合成」についてですが、そのままの意味です。写真の空の部分を、別の空と合成して差し替えてしまいます。
空の青さや雲のバランスなど好きな空が選べるので、より理想的な写真にする事が出来ます。


Camera Rawフィルターで調整する

Camera Rawフィルターを使って空の色を調整したいと思います。

まずはコチラの写真を見てみてください。

空全体に薄く雲が広がっていて、霞がかったようにモヤっとしていますね。
本当は青と白のコントラストがキレイな風景なんだろうなと言う事が分かるだけにとても勿体ないです。

写真をPhotoshopで開いたら、レイヤーを選択した状態で「フィルター」→「Camera Raw フィルター(Shift+Ctrl+A)」を開きます。
そうすると下記のような画面が出てきたかと思います。

デフォルトで「基本補正」のタブが開くので、こちらの機能を使って写真を調整します。

「基本補正」では色味や明るさなど様々な調整が出来ますが、特に便利なのが「かすみの除去」です。 
「かすみの除去」とは、その名の通り写真の中の霞や靄を減らしたり増やしたりする機能です。
霞に限らず、白くモヤっとした部分全体を補正してくれるので、色味を簡単に鮮やかに調整することが出来ます。

先ほどの写真を「かすみの除去」で調整するとこのようになりました。調整スライダーの値は+50です。

たったこれだけでかなり良い青空になったのではないでしょうか。
全体を覆っていた白いモヤがなくなり空の青さと白い雲の境界がハッキリしました。
他にも海の青さや緑の植物も色がくっきり見えるようになり、色鮮やかな写真になりましたね。

これで終わらせるのも良いかもしれませんが、影の濃さなどが気になるのでもう少し調整を行います。

基本補正の「ハイライト」や「シャドウ」で全体がもう少し明るくなるように調整し、「テクスチャ」と「彩度」でハッキリと鮮やかに見えるように調整しました。

これで完成です。
曇り空を青空に変える事が出来ました。

「基本補正」の各設定ですが、調整の加減は+50~-50の範囲が適切かと思います。
それ以上に数値を大きくすると、粒子感や白飛びなどが強く出てしまい却って不自然になってしまう事も多いです。
ただ「ハイライト」や「シャドウ」などその限りではない事もありますので、写真の状態に合わせて設定してみてください。


Camera Rawフィルターで調整する+α

空だけを調整したい、と言う場合は「選択範囲」を使ってみてください。

今からのこちらの写真の空の部分だけを調整したいと思います。

まずは空とそれ以外の部分(ビルや木)を分ける必要があります。
「選択範囲」→「色域指定」を開きます。

「選択:指定色域」で空の部分をスポイトすると、ざっくり選択することが出来ます。
「許容量」は100~200ほどの間で様子を見ながら設定し、だいたい空の部分が白、それ以外の部分が黒に分かれていれば「OK」を押してください。

ここまでの段階で、Photoshopの画面はこのようになっているかと思います。

雲が選択範囲外になっていたりビルの輪郭がザックリしているので、選択範囲の調整をします。
「選択範囲」→「選択とマスク」を開きます。「クイック選択ツール」で選択範囲の過不足分を調整します。
調整出来たら属性パネルの「出力先」を「新規レイヤー」に設定して「OK」を押します。

これでレイヤーパネルには、写真の元データと空だけのレイヤーが出来たかと思います。

後は空だけのレイヤーを選択し、Camera Rawフィルターで調整してみてください。
こうして出来た物が下の画像です。

青空が際立った事で、より爽やかで好印象な写真になったのではないでしょうか。


別の空の写真と合成する

次は、別の空の写真と合成して空の色を調整したいと思います。
Camera Rawフィルターの調整ではキレイな青空に出来なかった時や、雲のバランスに理想の形があった場合はこちらの方が簡単です。

例えばこちらの写真ですが、Camera Rawフィルターを使うとこのような感じになります。
雲が分厚く上手く調整が出来った為、違和感のある空になってしまいました…

工程としては、途中までは「Camera Rawフィルターで調整する+α」と同じです。
「選択範囲」を使って空とそれ以外の部分を分けます。

1つだけ違うのが、「選択とマスク」パネルで空を選択出来たら、属性パネルの「反転」を押して選択範囲を逆転させます。
こうすることで今度は空以外を選択した状態になりますので、「出力先」を「新規レイヤー」に設定して「OK」を押します。

これでレイヤーパネルには、写真の元データと空以外の画像レイヤーが出来たかと思います。

後は空以外の画像レイヤーの下に新規レイヤーを作り、そこに理想の空の画像を置いてください。

ただ置いただけだと明るさや彩度の違いから違和感を感じてしまう事もあるので、Camera Rawフィルターなどでトーンを合わせる調整を行ってください。
こうして出来た物が下の画像です。

夏らしい青い空と青い海の明るい写真になったのではないでしょうか。


おわりに

いかがでしたでしょうか?
今回お話しした2つの方法を使えば、自然に空の色を変えることが出来ます。
どちらの方法が正解と言うのはないので、自分の編集しやすい方法で試してみてください。

また、今回は使いませんでしたが、Camera Rawフィルターには他にも「トーンカーブ」や「プリセット」など様々な編集機能があります。
興味がある方はぜひそちらも試してみてください!

それではまた!デジマースのコンでした。

ピクトグラムを作成するときのポイント

1964年の日本でのスポーツ大会をきっかけに広がっていったと言われているピクトグラム。名前を聞きなれない方も多いかもしれませんが実は誰もが必ずと言っても良いほど、日常生活でピクトグラムを目にしているのです!
例えば、緑色に点灯している非常口の逃げようとしている人のイラストが一番分かりやすいと思います。
ピクトグラムを言葉で表すと、イラスト文字という名の記号(以下:イラスト文字)という所でしょうか。

今ではピクトグラムをフリー提供してくれている所もあり、私たちでも気軽に使えるのですが(ありがたいですね!)、「ちょっとイメージと合わない」「○○のピクトグラムが無い」等、こちらの条件と合わない場合も…ないとは言えません。

そういう時はピクトグラムの作成にチャレンジしてみてはいかがでしょう!自分で作成することで、イメージに寄りやすくなったり、愛着も湧くかもしれませんしね。
では、ピクトグラムを自分で作成するときはどうすれば良いのか、私の見解ですが作成するときのポイントを書いていきたいと思います!

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

point1.誰にでもわかる表現

国籍問わず老若男女、年齢関係なしに、ピクトグラムは誰が見ても理解できる表現が求められます。そもそもイラスト文字であるため、自立した指示表示が出来ることが使命とされているといっても過言ではございません。

「じゃあ、どんなものが誰にでもわかるの??」
「そうですね。例えば物であれば、必要性が無い限り最新の表現を省くのも効果的です。新しいものをすべての人が知っているとは限りませし、場合によっては認知率が低い可能性があるかもしれないです。」
「なるほど…」

さっそくですが、下記のピクトグラムをご覧ください。

Aは、家電よりもスマートフォンを使用する時代と考えれば間違ってないと思います。ですが電話のイラスト文字として考えた時に、近しいものにタブレットなどもあるため少々表現に難しさを感じてしまいます。今回、ボタンのないスマートフォンであるのも後押しし、イラストにしたときに分かり辛い印象を覚えてしまいます。

Bは、いまや見る機会は少ないと思われますが、電話と言われたときに頭によぎる人は割といるのではないでしょうか。また、近しい形もないため“この形=電話”と認識しやすいと考えます。また機能が電話しか無いことが後押しし電話という印象が残りやすいのかもしれません。

また、イラスト文字をシルエットにしてみた際に、認識しやすいかどうかも大事なポイントだと考えています!

point2.形状のシンプル化

ピクトグラムが何を指しているかを瞬時に認識しやすいものは?と考えた時、描かれているイラスト文字の情報量が少なくシンプルなものが効果的です。手描き等のイラストとは違い、描きこめば描きこむほど伝わり辛くなる可能性があがってしまいます。

■例:ショッピングビル等に入っているカフェの表示

デパート内には様々なお店が入っており、カフェでは、紅茶もコーヒーもお茶等々も飲めるお店が多く(専門店の場合もありますが)、今回「ショッピングビルに入っているカフェ」という表題もあるため、シンプルに「カップから飲み物が飲める」事を連想させることで十分成り立つと考えます。
Bに対しAは考えさせてしまう要素が入ってしまっております。
イラストに情報量が多いと捉え方に差異ができてしまうこともあったり、たいした時間ではなくても考えさせてしまったりする可能性も無きにしも非ずです。また、遠目で見た時に情報量が多いと、ごちゃごちゃとしやすく場合によっては近くで見ても認識し辛いことも考えられます。

■AとBのピクトグラムをそれぞれ遠目と近くであてこんでみたら…

情報を正確に伝えるために、伝わる最小限の表現に留めつつ、考えさせてしまう部分は削ぎ落して形状がシンプルになる様、心掛けることが大切です。コンセプトによってはピクトグラムにオシャレ、遊び心を入れる場合もありますが、基本的には指示に値するので「伝える」ことに念頭に置いて作成する必要がありますね。

point3.メリハリ

ピクトグラムはイラストの部分と背景(地の色)の部分を明度差のある2色で構成されています。そのためメリハリがつき基本的にはある一定の距離や、瞬時の認識がしやすくなっていると考えられます。

さいごに

ピクトグラムを簡単にまとめると、

・イラスト文字という名の記号
・シンプルかつ明確な形状が求められる
・遠目(常識の範囲)からの視認性が良い
・地の色とイラスト文字部分を明度差のある2色で構成することでメリハリ良く
・瞬時の解読が可能
・言語を超えた伝達方法

場所によってさまざまな表現のイラスト文字がありますが、共通して言えるのはそれがなんであるかしっかりと分かるということです。

簡潔に表現することは簡単に思えて実は難しいところがあります。もしピクトグラムを見かけたらちょっとながめてみてください。伝えるための工夫や最小限の表現が見えてくると思います!

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

挿絵イラストを作成するときのポイント

資料、チラシ、広告などなど、内容をよりイメージしやすくするために、挿絵イラストを使用することがありますよね。
現在では多くの商用フリーイラストがあり、気兼ねなく誰でも使用することができます。
その一方で、「このイラスト見たことある」「○○の所のだ」「イラストがかぶってしまった」となることも少なくはありません。
特にイラストの種類が豊富であれば尚更多くの人が使用するわけですから、当然仕方のないことです。
ですが、提供してくれている方がいるから使用できていることは忘れてはいけませんね。

そこで、挿絵イラストを自分で作成してみてはいかがでしょう!
自分で作成することで、より内容に適したもの、他との差別化がしやすくなるかもしれません。
では、挿絵イラストを自分で作成するときはどうすれば良いのか、私の見解ですが作成するときのポイントを書いていきたいと思います!

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

point1.万人受け

挿絵イラストの前提として、「文章の補完、内容イメージの促進」があります。つまり見る人に、より理解してもらう為の手段の1つというわけですね。
また、挿絵はこうでなければいけないという様な決まりはありませんので多種多様なものを見かけます。

資料、チラシ、広告などによって挿絵のイメージ(絵のタッチ等)が異なることはもちろん、各々の内容に合ったものを使用する事が望ましいですよね。
その中でも共通して言えることは見る人を選ばない万人受けのものをなるべく使用することです。

※内容等、ターゲット層による場合がございます。

「なぜ、見る人を選ばない万人受けのものが良いの?」
「あくまでも挿絵イラストは“補助的な役割”であることを念頭に」

個人的な制作物であればさほど気にしなくても良いかもしれませんが、多くの人が見る可能性があるのであればそれぞれ思うこと、受ける印象は異なるので見てくれる人、出来る限り全員に伝わる様に最低限の配慮が必要です。

Aの方は大きな特徴もなく「小学生が楽しそうにしている」感を自然と後押ししてくれる印象を受けます。
Bの方は楽しそうにしている感は伝わるものの個性が強く、「小学1年生の遠足」という内容にはあっていない印象を受けますね。

挿絵を見た時に深く考えず、スルー出来るくらいの存在感がちょうど良いのではないでしょうか。

point2.シンプル化

多くの人が受け入れやすいイラストを一言でいうと基本的にシンプルなものと考えています。
シンプルなものは必要最低限の情報で構成されているため、誰がみても分かりやすく理解しやすい傾向があります。

■情報量が多い

それでは情報量が多いイラストはいかがでしょうか。
ほとんどのイラストは描きこめば描きこむほど複雑化していき、情報量が多くなることで個性が強くなっていきます。
(情報量が多くなることが悪いというわけではございません。)
見る人に考えさせる要素は極力抑えた方が、万人に受け入れてもらいやすいのではと考えます。

■目立つ特徴:指さしマークの場合

下記のイラストA、Bを見るとお分かりかと思いますが必要最低限、手と分かる範囲で描かれています。

そんななかBの方を見るとネイルが施されており、描きこみが少ないにもかかわらず、目立つ特徴があるため個性を強くする要因になっています。

一般的な指さしマークを考えた時に、爪にネイルをしているものはあまり想像しませんよね。
もしくは軽く爪が描かれている程度ですね。

※ネイルを扱うところであれば例外ですが…

情報量の多いもの、目立つ特徴を持つものは見る人を選んでしまうことがあるため、描きこみという名の情報量を抑えシンプルに、かつ明快にまとめられるかが重要ではないでしょうか。

また、個性が強くなるにつれてそのイラストに対する好き嫌いなどの感情が出やすくなる傾向があります。

point3.色、模様

特に色や模様(柄)に注力する必要が無い場合は、細かく表現しない方が情報量が少なくなり、見やすくなります。
例えば、白黒で使用されるものであれば、色が必要ない場合もありますし、色や模様よってはイラストがつぶれてしまったりすることも考えられます。

着色の仕方ひとつでイメージが大きく変化するため、あくまでもそれがなんであるかがわかる程度で表現をしてあげることをお勧めします。
特殊な着色の仕方を行うだけで、一見シンプルなイラストも個性を持ち存在感を放ち始めます。
どんな内容、ターゲット、公か私的かを見極めたうえで、適切なものを用意しましょう。

まとめ

■挿絵イラストは“補助的な役割”であることを念頭に
■見る人を選ばない万人受けを心掛ける
■挿絵を見た時に深く考えずスルー出来るくらいの存在感
■イラストの線の情報量は少なく
■色味、模様は必要最低限極力抑える
■白黒の場合はメリハリをつけてイラストを見やすく

自分がこれが好きだからという思想は一旦しまい込み、その内容に合うものを選定することが大切です。
補助的な役割である挿絵が「内容にあってないよね」と思われてしまったら元も子もありませんよね;
また、時には情報量の多いものや個性が強いもの等、内容やターゲットによっては相乗効果をもたらすこともあります。
作成するときには何に対する挿絵なのかをしっかり把握しましょう。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

ゲーム画面グラフィック_走査線表示の再現

コンテンツにはその時々の「環境」に影響された「体験」が存在します。

80~90年代の娯楽の中心であった家庭用TVは、真空管を利用した走査線があるTVで、現在の液晶TVや有機elTVでは再現が難しい独特の個性的な映像表示の仕組みを持っていました。

そんな当時の「環境」であるTV画面/ディスプレイに表示していた「家庭用据え置きゲーム機」のカクカクした粗いドットグラフィックを、あえて再現するデザイン/文化が根強く続いております。

当時の「体験」を求める需要と、「デザイン表現」としてソリッドなドットを好む需要がそれぞれ存在し、
2018年現在でも、インディーズゲームから商業ゲームまで、あえて粗いドットを採用したゲームが数多くリリースされています。

もちろん懐古や趣向だけでなく「メリット」が存在します。
以下でしょうか。

・必然的ローコスト
・アイデアに比重を置ける
・抽象的なのでセグメントが少ない

前置きが長くなりましたが、
今回は、そんなゲームグラフィックについて、当時の家庭用TVの環境を追体験する需要から、再現検証してみます。


表示機器のポイント

80年代に発売された家庭用ゲーム機では、
代表的な製品で、
256x224(256)px
の解像度でテレビ画面のアンテナ端子に接続してゲーム画面を映してました。

出力された映像は独特の歪みとボケ、ノイズがあり、また当時の一般的なテレビのサイズは14~21インチ(4:3)で画質も粗いものでした。

256x224のゲーム画像を映し出した画像密度(ppi)はこちらの数値になります↓

・14インチSDTV(4:3)256×224⇒24ppi
・21インチSDTV(4:3)256×224⇒16ppi

※参考)現在のフルHDゲーム機の場合
・32インチHDTV(16:9)1920×1080⇒69ppi

ppiがとても粗いですが、ゲーム中のテキスト読む場合など想定すると、
当時のテレビの水平解像度(640程度)、垂直解像度(480程度)、さらにシャープ加減も悪かったので相応の粗い仕様だったと思われます。

下記画像はSDTVではなくHDTVのものですが(SDTVは下記画像の倍以上の粗さ)、
TVの画素を接写すると下記のような粗さのRGBの点がセットで1画素を構成しております。

参考に現在の液晶モニターとスマートフォン(細かすぎてRGBの画素が確認できない)がこちらです。

現在も新作が発売されている「カクカクで粗いドットグラフィック」の特徴としてこれらの表示機器の環境影響が無い全くストレートで高精細な表示になっています。
(疑似的に近い表現をソフトウェア側で行えるものも一部あります)

それらについて、80~90年代の悪く言えば画質の悪いドットグラフィックゲームで育った世代は、高精細のドットの表示に違和感を感じるようです。

ドットグラフィックは抽象画像ですので、見る人により、想像するキャラクター像が変わってきます。
戦いに挑む研ぎ澄まされた目をイメージする人もいれば、ポップで明るい表情をイメージする人もいますが、
商品パッケージが存在すれば、そこに描かれたイメージイラストを投影する人が多いのではないでしょうか。

その想像に必要な要素はより抽象的な映像品質ですが、
高精細でエッジの立ったクッキリドット画面では、見てはいけない舞台裏構造が丸見えでゲームの没入感も下がります。

下記の画像は元画像は同じソースですが、
表示する環境により見え方がだいぶ変わってきています。

より違和感が少なく、表示として没入できる表現が比較できると思います。


半ドットの表現

先程の画像をみて気付くポイントとして、
高精細でエッジの立ったクッキリドット画像は、「環境」により「滲み/ボケ」が発生しそれによって自然なアンチエイリアスが発生しています。

3段階のグラデーションを作成してみると、

境界がシャープな画像と、滲みやボケの発生した画像では、段階の滑らかさに変化が生じており、
どちらがグラデーションに見えるか確認出来ると思います。

この表示環境を利用して本来使っていない色を再現するのが「タイルペイント技法」(ディザ処理)です。

この画像は白と黒をタイル模様に配置したものですが、
ボケのないシャープな表示ですと、白と黒の二色しか見えません。

しかし「滲み/ボケ」を利用すると、
白と黒の中間色である「灰色」が再現できます。

同じく他の中間色、混合色を作ってみました。

贅沢な表現が可能となった現在でも、同時発色数に制限がある環境など効果を発揮します。

拡大すると分かりますが、
タイルペイント(ディザ処理)によって少ない色数で画像を再現出来ているため、容量の大きな削減につながり、WEBページや画像転送では、表示速度を高めています。

PNG形式の画像には

・PNG8 … 256色発色/透明可/アルファチャンネル可※
     ※Fireworks書き出しでアルファチャンネル透明可
・PNG24… 約1,677万色発色
・PNG32… 約1,677万色発色/透明可/アルファチャンネル可

が存在し、
多くの色数を使用した場合は「PNG8形式」の範疇を越えてしまい、
「PNG24形式」「PNG32形式」の画像容量が極端に大きくなってしまいます。

現在でも、タイルペイント(ディザ処理)を適応して少ない色数の「PNG8形式」を使うことが望ましいと考えます(アルファチャンネルを含む場合は「Fireworks」必須ですが;)。

以上のように、
意図的「滲み/ボケ」を利用する事で少ない容量や制限下でも解像度以上の表現がされます。

さらにもう一つの環境効果として、
モニターの「走査線」を利用する事で、半ドット表現が可能となります。

走査線は映像と映像の間に必然的に出来る一方向の縞々線のような隙間で、
映像情報は無く真っ黒な横線になっています。

走査線はモニターの仕組み上発生する映像表示制限となりますが、
この線は結果としてドットの一部を隠すことになり、隠された部分の描写は実データー以上の表現として脳内に補完され映像を作り出しています。

右側の画像は疑似的に太目の走査線で0.5ドット分の黒線を追加してます。

ドット画像データを規則的等間隔の平行線で表示を隠す制限すると、
あるはずのない画像データが半ドット単位で補完されていくのが感じられます。


走査線の再現

作り方を検証していきます。

実は、今回作成する「SDテレビの走査線模様」は、フルHD解像度(1920x1080)では高さが足りなく、縦2880pxの細かさが必要になります。

最新の4Kテレビでも高さは2,160px(3840x2160px)しかない為、
「ゲーム」のSDテレビの表示表現を実現するには
8Kテレビ(7,680x4,320px)までの細かい解像度が必要になります。

納得できる画像再現表現を映し出す機器の普及には、まだまだ時間がかかりそうです。

それでは早速
「SDテレビの走査線模様」
を作っていきます。

SDテレビの解像度は640x480px 程度の想定でいきます。

走査線の黒線高さは、走査線の1/3とします。

480(高さ)x3(走査線の確保) =1,440px

※横の走査線の再現だけであれば縦1,440pxで足りるので4Kテレビ(3840x2160px)で再現が可能

TVの方式にもよりますが、拡大してみると1画素を作り出す縦線があります。

この縦線は走査線の黒線(1px)の半分の太さで再現するため、さらに倍の解像度が必要です。

1,440px x 2 = 2,880px

PhotoShopで
高さ2,880pxの画像を4:3の比率で作成します。

4:3 = X:2,880px
x = 3,840px

画像サイズは
3,840 x 2,880px

■横線の製作

 1)2pxの横線を引く
 2)4px置きにコピペ

■縦線の製作

3,840px / 640px(SDTV横解像度) = 6px

 1)1pxの縦線を引く
 2)5px置きにコピペ

出来た横線は「ボカシ」を3回程度かける

縦線は「ボカシ」を3回程度かけ、「不透明度」を50%にする。

ここまでで、
背景透過のpng画像で模様部分だけ書き出しすれば
「SDテレビの走査線模様」自体の完成です。

適応させたい画像はPhotoShopで「ボカシ強」を3~9回かけてボケボケ状態にして、「HDMI入力(デジタル)」以前のアナログな出力映像を再現します。

好きな画像を
3,840 x 2,880pxで書き出しして模様を重ねてみてください。
元画像は一度、
299x224pxか640x480px
などで解像度変更した画像を経由させた後、
3,840x2,880pxに解像度変更(ニアレストネイバー法)+ボカシ 
をすることで80年代の低解像度感が出せます。


気分は昭和ですね。


最後に重要なポイント

出来上がった画像が「暗い」ことに気づいたと思われますが、
理由は走査線により画面表面積の1/3を黒で塗りつぶしているためです。

失った元の明るさに戻すには、表示端末の輝度を33%程度明るくする必要があります。

消費電力の高さはデメリットでしかなく、
TVの消費電力の高さの要因だったと思われます。

現在、TVやモニターでソフトウエア制御で輝度を高くする仕組みとして「FreeSync 2」などのグラフィックカード側からモニター同期制御するテクノロジーが考えられますが、こちらは今後確認してみます。

コンテンツを楽しむうえで「体験」と「環境」は重要な要素です。
古びたアンティークな映画館での名作リバイバル上映など、コンテンツと環境の相乗効果は考えただけでも心躍ります。

次回も情報設計、ユーザビリティに関係した話題をお届け致します。
デジマースのネモトでした。

バナー制作でおさえておきたいポイント

こんにちは。ユイPです。
最近2年使ったiPhone 7をiPhone XSに機種変更しました。画面とカメラの綺麗さにはテンションがあがりますが、まだ使いこなせている気はしません。

今回は「バナー制作の時におさえておきたいポイント」がテーマです。
以前「新米デザイナーが作る!バナーの作り方」という記事を書きましたが、あれから約10ヶ月…制作したバナーの数も10ヶ月前の時点では約300個でしたが、この記事を書いている時点で約800個まで増えました。1000個までもう少し。

前回の記事ではバナーの作り方を作業工程と共に解説していきましたが、今回はタイトルの通り、「バナー制作時におさえておきたいポイント」を解説していきたいと思います。

※前回の記事と少々書いてある事が被る部分もございます。
※またこの記事で使われているバナーは全て架空のバナーです。


バナーとは広告や宣伝などのために使われる画像の事です。
バナーの目的は主に「見た人にクリックしてもらう」事です。
掲載場所やターゲットによってデザインや訴求ポイントは変わってきますが、クリックしてもらうために「このバナーで誰に何を訴求したいのか」を考えて作っていく事が大切です。

これを踏まえて制作時のポイントを解説していきます。


1.めりはりをつける

例えばこの2つのバナーだったら、どちらの方が大事な文言がより強調されていると思いますか?
答えは下です。文字サイズの強弱や色の差がついているので「人気作品”無料”」という言葉が一番見せたい部分なんだなとわかります。
めりはりは文字サイズ、フォント、文字色などでつける事が出来ます。

掲載場所や内容によっては、文字や色のトーンが統一されたものなども使用されています。
そういったバナーは訴求力が重視されているのではなく、「雰囲気にあった」バナーである事が多いかと思われます。
広告などで使われるバナーは目を引く事が大事になってくるので、人の目に触れてほしい部分がどこかを考えて、強調する部分と控えめでいい部分、差をつけて作っていきましょう。

2.不自然な”余白”は埋める

このバナー…どうにも真ん中の文言と写真の間の余白が気になりませんか??文字や写真/絵を調整すれば埋められそう?…そんな時はどうにかして埋めてしまいましょう。

という事で文字の組み換え、写真のサイズ調整などをしてみた所、見事に埋まりました。
変な余白があるとなんだかそこに目が行きがちですし、画面も寂しくなります。文字を大きくする、組み方を変えてみる、文字間や行間の調整、画像があればその位置を調整してみる、図形や線を足してみる…など余白の埋め方は色々あります。
もちろん余白を活かしたデザインというのもありますので、埋めるのは”不自然な”余白です。

3.要素を散らばせない

人の目線は左上から始まり右下で終わる、Z型の流れのレイアウトが見やすいというのはどんな媒体にも言える事ですね。
もちろんバナーも、そういった流れを意識して自然と読みやすいように制作しています。

例えばこのバナー、要素が四方に散っているし、図形は多いし、どこが大事でどこから読めばいいのか…読めない事はないけど散らばっていてなんだか気持ち悪い…。
なので流れを意識して作ってみます。

これなら、上の情報と下の情報、混乱せずにスッと読む事が出来ると思います。要素を分散させずに、図形や線を使う時もバランスには注意しましょう。

4.困ったら位置変え・傾ける

基本の法則は守っているけれど遊び心がない。つまらない。そんな時は思い切って文字の位置を変えたり、傾けてみたりしましょう。

ちなみに傾ける時は左下から右上に向かって↗この角度で傾けた方が文章が読みやすいです!

5.表示されるサイズを考えて作る

私は普段1020×360のサイズのバナーを作る事が多いです。そのサイズを開いていると、普通にPhotoshopの画面いっぱいくらいに大きく表示されていますよね。
ここで陥りがちなのが、「スマートフォンの画面サイズで見た時に、文字がちゃんと読めるか?」という問題です。

このバナー、PCの画面では大きく見えていても、実際にサイトに掲載されたら…(スマートフォンでこのブログを読まれている方には既に見えづらいかもしれません)

こんな風に小さくなりますよね。こうなった時、このバナーの上の部分の白文字、読めますか?正直読みにく~~いですよね。
こうならないためにも、ある程度サイズが小さくなった時の事も考えて制作しましょう。
今回はこのように調整してみました。

白文字の部分に太字の効果をかけ、背景に濃い色を引いてみました。先ほどのよりは少しは見やすくなったかと思われます。

このように情報量が多いバナーだと限界もありますが、出来るだけ配慮して制作しましょう。

6.文字間・行間の設定はしっかり

文字が主役なバナーにとって、これは本当にとっても大事な事です。

文言・配置は同じでも、上のバナーよりも下のバナーの方が、読みやすいと思いませんか?文字間を調整する事で「55%OFF」の部分は更に大きく強調されていますし、緑枠の中の説明文も間を開ける事で読みやすく、無駄な余白もなくなりました。少し調整するだけで、こんなにも変わります。
文字は手動で調整してバランスを美しく整えましょう!


以上が、私がおさえておくべきだと思うポイント6つになります。

とは言え私もまだまだ勉強中で完璧ではありません。上記の内容も最初からわかっていたものではなく、色んなバナーを見て学んだり、たくさん指導して頂いて覚えたものです。
バナー作りにこれから携わる方は、色んなバナーを見て、学んで、たくさん作ってみてください!

それでは、また。
ありがとうございました。

簡単!ラフと回転ツールでほぼ完成!《輪切りの野菜・果物の作り方》

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

早速ではございますが、イラストレーター(以下:イラレ)で簡単に作れる輪切り野菜と果物の作り方を紹介したいと思います。
ラインナップとしましては『レンコンニンジンキウイ』となっております!

1.レンコン
2.ニンジン
3.キウイ

輪切りのレンコン

—————————————————————–
★作成環境:IllustratorCC2018
★動作確認:Windows10
※所要時間:下記内容で10~15分ほど(初心者)
—————————————————————–
※説明がしやすいようにある程度のサイズを決めております。

【1】
①幅400px 高さ400pxの円を用意。
[淵:c4c1ab/塗:e2e1d3]

【2】
①[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

②オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【3】
オブジェクトの真ん中に[30px×30pxの円]を配置します。
同時に[70px×120pxの楕円]も上部に配置します。
どちらも[淵:c4c1ab/塗:c4c1ab]

【4】
①楕円を選択しツールの[回転ツール]を選択します。
②画像の真ん中に回転ツールの回転軸が出てきます。
③真ん中の小さな円の中をクリックし回転軸を移動させます。

④回転軸の場所を決めたら、Altを押しながら、回転軸をクリックします。編集画面が出てきます。
⑤角度、プレビューにチェックを入れたのちOKは押さず、コピーをクリックして画面を閉じます。
⑥画面をとじたら、自動的に1つ画像が増えますので、残りのオブジェクト4つを[Ctrl+D(4回)]で増やします。

【5】
①コピーした楕円6個選択しツールの[回転ツール]を選択し
[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

②オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【最後】少々調整を行ってレンコンの輪切りの完成です!

輪切りのニンジン

—————————————————————–
★作成環境:IllustratorCC2018
★動作確認:Windows10
※所要時間:下記内容で10~15分ほど(初心者)
—————————————————————–
※説明がしやすいようにある程度のサイズを決めております。

【1】
幅400px 高さ400pxの円を用意。
[淵:e25b00/塗:ff8b00]

【2】
①[幅350px 高さ350px]の円を内側中央に配置。
②[淵:なし/塗:ff9f19]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【3】
①[幅190px 高さ190px]の円を内側中央に配置。
②[淵:なし/塗:ffb839]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【4】
①[幅156px 高さ156px]の円を内側中央に配置。
②[淵:なし/塗:ff8b00]

【5】
①[幅3px 高さ60px]の楕円を上部に配置。
②[淵:なし/塗:ff8b00]

【6】
①楕円を選択しツールの[回転ツール]を選択します。
②画像の真ん中に回転ツールの回転軸が出てきます。
③円の中心をクリックし回転軸を移動させます。

④回転軸の場所を決めたら、Altを押しながら、回転軸をクリックします。編集画面が出てきます。
⑤角度、プレビューにチェックを入れたのちOKは押さず、コピーをクリックして画面を閉じます。
⑥画面をとじたら、自動的に1つ画像が増えますので、残りのオブジェクト2つを[Ctrl+D(2回)]で増やします。

【最後】ニンジンの輪切りの完成です!

輪切りのキウイ

—————————————————————–
★作成環境:IllustratorCC2018
★動作確認:Windows10
※所要時間:下記内容で10~15分ほど(初心者)
—————————————————————–
※説明がしやすいようにある程度のサイズを決めております。

【1】
①幅400px 高さ400pxの円を用意。
[淵:826f30/塗:9ac44b]

【2】
①[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

②オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【3】
①[幅300px 高さ300px]の円を内側中央に配置。
②[淵:なし/塗:aad156]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【4】
①[幅120px 高さ120px]の円を内側中央に配置。
②[淵:c1d643/塗:ddd69f]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【5】
①[幅10px 高さ66px淵:なし/塗:8faf2e]と
[幅6px 高さ12px 淵:なし/塗:414240]の楕円を作成し
以下のように組み合わせグループ化(Ctrl+G)します。

【6】グループ化したら中央の円にかかるよう上部に配置します。
①楕円を選択しツールの[回転ツール]を選択します。
②画像の真ん中に回転ツールの回転軸が出てきます。
③円の中心をクリックし回転軸を移動させます。

④回転軸の場所を決めたら、Altを押しながら、回転軸をクリックします。編集画面が出てきます。
⑤角度、プレビューにチェックを入れたのちOKは押さず、コピーをクリックして画面を閉じます。
⑥画面をとじたら、自動的に1つ画像が増えますので、残りのオブジェクト34つを[Ctrl+D(34回)]で増やします。

【最後】キウイの輪切りの完成です!


最後に

以上輪切りの果物・野菜の作成の仕方をご紹介させていただきました。
ラフツールも回転ツールも慣れてしまえばとても簡単です。
ここでは説明がしやすいように数値を決めておりましたが、作成したい大きさによって効果の加減などが変わってきますので、いろいろ試してみて下さいね!

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。またお会いしましょう!

画像トレース&ライブペイントで簡単なイラストを描いてみよう

こんにちは!ユイPです。
だんだん暑さを感じる時期になってきましたね。

今回のテーマは「Illustratorで”画像トレース”と”ライブペイント”を使ってイラストを描いてみよう」です。
Illustrator(以下:イラレ)でパスを描くのが苦手だなあ…という方(私)でもこの2つの機能を使えば簡単にイラストを描く事が出来ますよ!


使用ソフト:Adobe Illustrator CC 2018
作業環境:Windows 7


最初に「そもそも画像トレースやらライブペイントって何だっけ??」という方のためにどういう機能かご紹介します。

画像トレースは、写真などを一瞬でベクター画像にしてくれる機能です。
例えば左側の写真に画像トレースを行うと、右のようになります。ちょっとイラストっぽくなりましたよね。

ライブペイントは、パス内に塗り絵のように色をつける事が出来る機能です。
タルトの手前にあったいちごの色を少し鮮やかにしてみました。

これらが”画像トレース”と”ライブペイント”の機能です。(詳しいやり方はこの後説明していきます)

それではこの2つの機能を使って、簡単なイラストを描いてみましょう!


まずはイラストの主線となるものを用意します。

準備が出来たらイラレで開き、「画像トレース」を行っていきます。

画像トレースの手順は以上になります。

トレースしたらお好みで自由に余分なアンカーポイントを削除したりなどして整えたり、パーツを描き足したりしてみてください。
なんとなく気に入らない部分もここで直してしまいましょう。

調整して完成した主線がこちらになります。

主線が出来たら、「ライブペイントツール」で色を塗っていきましょう。

以上がライブペイントの手順になります。

そして色を塗って完成したものがこちらになります。

どうでしょうか?とても簡単な行程だったのではないでしょうか?

イラレで画像を作成する際、何もないキャンバスに一からパスを形成していく、図形を変形させていく、画像を引いてその上をペンツールでなぞっていく…など色々な方法がありますよね。場面や時間、描くものによって様々なやり方があると思います。
今回はイラストでやり方を紹介しましたが、手書きのロゴを作る時などにもおすすめです。
最初に紹介したように、写真などをトレースすることも出来ますし、Photoshopなど他のツールを使ってデジタル上で描いたイラストをベクター化したい時にも使えるのではないでしょうか。

状況に応じて、ユイPおすすめのこの機能、是非一度使ってみてください★


以上「画像トレース&ライブペイントで簡単なイラストを描いてみよう」ユイPがお送りしました。
くれぐれも5月病にはお気を付けください。ではまた次回!

★毎日更新しているデジマースブログ公式Twitterもよろしくお願いします!