スマホ向け広告サイズ_バナー

スマートフォンバナー


ネットワーク系バナー

★モバイル_バナー(横×縦)

 ・320× 50 ADNW
 ・640×100 ADNW【高解像度版】

 ・320×100 ADNW
 ・640×200 ADNW【高解像度版】

★レクタングルバナー(横×縦)

 ・300×250 ADNW
 ・600×500 ADNW【高解像度版】


インフィード形式(横×縦)

 ・ 300×300 ①_スクエア型
 ・1200×628 ②_バナー型

※掲載場所によりサイズに差異があります


スマホバナーサイズのメモの意味合いで現在出稿があるモバイル向け広告を中心にサイズ表を下記に作成しました。※2018.3.5時点のデータ

モバイル端末も「ケータイ電話」と呼ばれていたフィーチャーフォンから、スマートフォンへ移行しました。

そして、モバイル広告サイズも解像度が増えて「ドット打ち」と呼ばれる技法が有効な抽象的領域を越え、構成も通常の印刷広告のような余白のデザインが可能となりました。

参考で、かつてマス広告として絶大な広告効果を出していた、ケータイ電話モバイル広告時代の代表的な広告サイズと事例を紹介します。


フィーチャーフォンバナー

192×53 QVGA端末向け_バナー

フィーチャーフォン向けのデフォルトバナーサイズ。使用する「レスポンスフォーマット」(「CLICK!」文字入りの黒枠部分)の
カタチとサイズが決められている。2018年の現在でも運用されている代表的なバナーサイズ


384×106 VGA端末向け_バナー

「デフォルトバナー」×2倍サイズ。フィーチャーフォン向けのVGA端末向けに特化して一時的に運用されていたバナーサイズ。SB枠で使用されてましたが運用コスト減の影響からか現在は運用されていません。


192×53 QVGA端末向け_アニメGIFバナー

「デフォルトバナー」に「GIFアニメ」を使うことで複数コマの差し替えアニメーションを再現できました。コントラストに違いの大きい2つのバナーを交互に表示させるだけでも利用者の目線をバナーに向かわせることが出来、静止画バナーと比較して広告効果を大きく改善できました。


192×53 Flashバナー

「デフォルトバナー」と縦横サイズやレスポンスフォーマットは同じですが、当時のリッチ仕様としてFlashで掲載が可能でした。「5kバイト」という少ないバナー容量制限のなかで、アニメGIFバナーでは再現できない(容量が約4~10倍まで増大)細かいアニメーションが表現できる唯一の手段として、モバイル広告の表現に多大な力を与えました。

無料動画バナー:FP時代の広告面にあふれた無料訴求のバナーを一部紹介↓

※記事用にFlash形式を動画バナー(アニメGIF)に書き出ししています


最後に

以上、一部のプラットフォームとサイズについて紹介しましたが、状況に応じて修正と追加します。
スマートフォン向けのクリエイティブは情報量が多いので迷いと迷走に陥りやすいと感じますが、
明確なルールを設定して必然的で効率的な作業を続けていきます。

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

「お菓子なもじ」Photoshopで簡単作成!

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

お菓子なもじ

Photoshopを使ってクッキーにアイシングをした様なお菓子な文字を作ってみたいと思います。
今回「レイヤースタイル」を使ってエフェクトをかけますが、難しいことはいたしません。
初めて使用する人にも比較的優しい内容になっております。

文字エフェクトメイキング

※ここで紹介しております内容は、一作例となります。サイズ、比率等は説明のしやすい様に書いております。
また、エフェクトの設定の仕方などは誰でもわかりやすいようにしております。

—————————————————————–
★作成環境:PhotoshopCC2017
★動作確認:Windows10
※所要時間:15分くらい
—————————————————————–

(1)新規作成(Ctrl+N)で縦300px・横1200pxのファイルを開きます。

(2)テキストツールで文字を書きます。
文字【おかしなもじ/A-OTF 新丸ゴ Pro/U/150px】
文字の背景にクッキー部分がくるので文字幅を+300開けています。
※文字フォントがない場合は丸目の太字がおすすめです。

(3)アイシング文字の色を設定します。
パステル系統がオススメです。今回は下記色を使っています。
お:ff9dc2 菓:9fceff  子:c1ef83
な:ffffff  も:d5bfff じ:ffa6a6

(4)レイヤースタイルを加えていく準備をします。
グループを作成してその中に文字レイヤーを置きます。
※テキストレイヤーを選択した状態で(Ctrl+G)でもグループ化できます。

(5)【レイヤースタイル①】クッキー生地部分を作ります。
以下のどちらかの方法でレイヤー効果の編集画面を表示します。

表示されたら以下のように項目を設定していきます。

設定後↓

(6)【レイヤースタイル②】アイシング部分を作ります。
上記と同様にレイヤー効果の編集画面を表示します。
以下の値を設定します。

設定後↓

(7)【レイヤースタイル③】クッキー焼き込み部分を作ります。
今回は「グループ1」にレイヤー効果をかけます。
以下の値を設定します。

表示されたら以下のように項目を設定していきます。

設定後↓

焼いたクッキーの上にアイシングで飾った、クッキー文字が出来上がりました!

設定を変えて試してみました

上記のエフェクトメイキングの一部の数値を変えてみると以下のようになります。
見え方が全然変わってきますね!

上記のエフェクトメイキングの「境界線部分を10pxに変更」するとクッキー生地部分が減ってアイシングをたっぷりのせている風になりました!

ココア色にしたい場合は「光彩(内側):533a23に変更」
「境界線色:7b5e44に変更」するとそれっぽくなります。

・上記のエフェクトメイキングの「境界線部分を10pxに変更」
・文字のレイヤーを複製し、効果を各1つずつになる様にします。
その際上にベベルとエンボス、下に境界線が来るよう設定します。

・境界線の効果がある文字の色を境界線と同じ色に揃えて(今回の場合はfbdf8d)、
右クリック→「レイヤースタイルをラスタライズ」を選択しレイヤーを画像化します。

・あとはラスタライズしたレイヤー(クッキー生地部分)を文字のバランスに合わせていい感じに背景色と同じ色で塗り足します。
(今回の場合はfbdf8d)

上記のエフェクトメイキングの「ベベルとエンボス」「境界線」効果をオフにするだけです。
ピンク(苺):ffc1c6 緑(抹茶):b1d27f
黄(プレーン):ffd893

最後に

今回ご紹介したレイヤー効果の値ですが、あくまで一例ですので作成するサイズや好みに合わせて変えてみてくださいね。
また、これを参考に自分なりのもっとやりやすい方法を見つけていただけたら幸いです。
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。またお会いしましょう!

新米デザイナーが作る!バナーの作り方

こんにちは!あけましておめでとうございます。ユイPです。
今年もよろしくお願い致します。
私は学生の頃、年末年始は巫女さんのバイトをしていたので今年は久しぶりにゆっくりしたお正月を過ごす事が出来ました。
お正月が終わったら次のイベントはバレンタインですね!


さて、今回のテーマはズバリ!「バナー制作」です。

私がデザインチームに配属になって半年が経ちますが、この半年間での私の主な業務はバナー制作でした。これまで制作したバナーの数は約300個弱です。
そんな私がこの半年間でバナーについて学んだことを踏まえて、制作過程を解説していきたいと思います!

★バナー記事第二弾(2018年10月更新)→バナー制作でおさえておきたいポイント

バナーとは、広告や宣伝のために使われる下のような画像の事です。

バナーをクリックする事で見せたいページに飛ぶ事が出来るので、主に「クリックしてもらう」事が役割となります。
表示される場所は自社サービス、もしくは他社のサービス上です。
文字のみのバナー、画像と文字を組み合わせたバナー、縦型や横型と種類やサイズも色々とあります。

掲載場所やターゲットによってバナーのデザインや訴求ポイントは大きく変わります。
種類は多々あれど、「このバナーで誰に何を伝えたいのか」まずはそこをしっかりと踏まえて制作する事が大事です。

ちなみに私がバナーを作り始めた初期のバナーは大体こんな感じでした。

作り始め感満載ですね…。

今回はこのような依頼が来たという設定で制作していきます。
————————————————————————————————
▽サイズ 1080×360
▽掲載場所:自社サイト内
▽少女漫画の特集のバナー(無料試し読みあり)
▽ターゲット:女性
▽掲載文言
【もうすぐバレンタイン!青春する準備はいい?甘い恋物語10冊無料♡】
▽イラスト素材2点(どちらを使っても両方使ってもよい)

————————————————————————————————

早速作っていきますが、まずは深く考えずにキャンバスを作成してイラストや文言を何も加工せずに配置します。

とりあえず女の子のイラストのみを使用することにして、イラストは右、文言は左側かなとざっくり配置しました。フォントも普通のゴシック体のままです。
後から加工しやすいように文言はここであらかじめ分解しておきます。
色やサイズを変えそうだな…という場所は特に細かく分解します。ちょっとめんどくさい作業ですがのちのち作りやすくなりますよ。(もうすぐ/バレンタイン!/青春/する準備はいい?/甘い/恋/物/語/が/10冊/無料/♡)
素材の画像の編集(透過作業など)があればここで行っておきます。今回使用しているイラストは自前です!

また私は実際に作品を扱うバナーの際、作り始める前に公式サイトを検索してみたりどんな内容のお話なのか軽く試し読みしてみたりしています。
作品に100%合わせる必要はないですが、どんな作品か知っておくと純粋に作りやすいです。

バナーの目的はただ見てもらう事ではありません。クリックしてもらう事です。そのためには、どこに目をつけてもらうか考えて制作していかなければなりません。まだほぼ加工してないこの状態で、文言の強調したい部分を決めていきます。

見やすく、遊び心も加えながら大体こんな感じかなと文字を置いてみました。
今回まず一番強調するべき点は「無料」だと考え、無料の文字を一番サイズを大きく目立つ位置に配置しました。
あとは何が無料なのかも伝わらなければ意味がないので無料の次に「恋物語」も強調していきたいですね。恋物語と書いてラブストーリーです。

ピンクで囲ってある部分①がメインとなる目立たせたい文言、青で囲ってある部分②がそれを修飾するサブとなる文言です。
強調したい部分が決まったらフォントや背景も決めていきます。

文言のテーマ的に背景はやっぱりピンクかな~フォントは可愛らしく落ち着いたやつがいいかな~というイメージでこのようにしてみました。
あとはやはり「恋物語」の特集だし女性がターゲットならば男の子も欲しいな?いうことでイラストの配置も少し変えてみました。

強調したい部分や大体のレイアウトも決まった所でさあ色をつけていくぞ!

…といいたい所ですがその前にまずとても大事な作業があります。
「字間の調整」という作業です。

現時点でのバナーをよく見てみると…

このピンクで○した部分や線の部分、文字が詰まりすぎていたり、広がりすぎていたり…なんとなくまとまっていないと思いませんか?
見やすいバナーにするために、ここを調整していきます。調整は使うフォントを決めてからやりましょう。
(Photoshopでの細かい調整のやり方やそもそも字間って何?という方はこちらの記事をご覧ください。→たのしい文字組み 字間を調整してみよう)

調整したものがこちらになります。
細かいですが、文字のバランスが良くなって見やすくなったと思いませんか?
同時に「青春する準備はいい?」という文言の「する」や「は」や、「恋物語が」の「が」といった接続詞のひらがなを少し小さくした事で文章にメリハリがつきました。

また文字の位置の揃えも調整しました。
文章の端っこと端っこのラインをあわせてあげるとバランスよく整います。
変則的な組み方をする場合でなければ、端っこは出来るだけ揃えておく事が大事です。

文字の調整も終わった所で、次に背景を装飾していきます。
え?文字の装飾じゃなくて背景からやるの?と思うかもしれませんが、私の場合は背景の装飾を決めてからその背景の上でも見やすい文字の装飾を行っていきます。

ピンクの色合いを少し変え、キラキラしたテクスチャを載せてみました。なぜこれにしたかというとチョコレートっぽさを感じたからです。

背景が決まったところで遂に念願の(?)文字に色をつけていきます。

まず強調したい部分から色を決めていきます。
ここが強調したい部分にはやはり濃いめの色、赤や青、オレンジ…背景が黒の時は白、など目立つ色を使っていきます。

まずこのように色を置いてみました。
このようなバナーの場合、色数は多くても3~4色程度に抑えて出来るだけごちゃつかないようにしたいです。
ただこれでは色合いも同系色でメリハリがなく、白文字も少し読みづらいですし何より面白みがないですね…。
なのでメリハリを意識しつつ、遊び心も感じられるように装飾していきます!

こんな感じになりました。
茶色の地を入れて文字を黄色にした事で目立たせたい文言が更に強調されましたし、画面に締まりが出たと思います。
何よりピンクと茶色の色合いがバレンタイン感をより強めてくれました!

ここまできたらあとはもう色味や文字、イラストの位置などレイアウトを再度確認して調整するのみです。
字が間違っていないか…文字間の調整の見落としがないか…などもここで確認してしまいましょう。

微調整が終わってしまえば晴れて…完成です!
「もうすぐバレンタイン!青春する準備はいい?甘い恋物語が10冊無料♡」バナーが完成しました。


いかがでしたでしょうか。

今回の記事ではイラストを使用し、「無料」という文言を強調させるようなバナーを制作しましたが、最初に書いた通りバナーにもたくさん種類があります。今回この記事で作成したバナーは、オシャレさというよりかは「見やすさ」や「訴求力」が重視されるバナーです。
普段私はそのようなバナーを作る事が多いのですが、最初の頃はやはりオシャレに作りたくて細めのフォントを使ったり色数を少なくしたりして作ってしまっていました…。それが悪いわけではありませんが、求められているものと遠いものを作ってしまうのはいい事ではありませんよね。

最初に書いた事の繰り返しとなってしまいますが、掲載場所やターゲットによってバナーのデザインや訴求する部分は大きく変わります。
「このバナーで誰に何を伝えたいのか」ターゲットを見据え、求められているものを作る。そこをしっかりと踏まえて作る事がバナー制作において大事な事だと思います。

私もまだまだ勉強中です。日々先輩方に助けて頂いています。
これからもたくさんバナーを作ってもっと成長していきます!

長くなってしまいましたが以上、ユイPがお送りいたしました。
皆さんもこの1か月、バレンタインに向けて美味しいチョコレートをたくさん食べてください♡

★バナー記事第二弾はこちら→バナー制作でおさえておきたいポイント

————————————————————————————————

デジマースブログ公式ツイッター・インスタグラムを開設いたしました。

★Twitter https://twitter.com/digi_design_
★Instagram https://www.instagram.com/digi_design_/

記事と合わせましてこちらもよろしくお願い致します。

簡単!アニメーション GIFの作り方

こんにちは!今回のテーマは「簡単!アニメーション GIF の作り方」です。
アニメーション GIF (以下 アニメ GIF )の作り方がかわからない、上手く動かせない…とお悩みの方向けの簡単な内容になっています。

作業環境は下記の通り、Adobeのソフトを使用して作成します。

—————————-

■ Illustrator CC 2019
■ Photoshop CC 2019

—————————-

それでは早速作ってみましょう!


01.何を作るか決める

何を作るか決めましょう。
「どんなモノを作るか」だけでなく、「どんな動きをさせるか」までイメージすると作りやすいです。
例えば「ボールを作って」「上下に跳ねる動きを付けよう」とイメージすることが大事です。

私は「犬を作って」「嬉しそうにしっぽを振る動き」のアニメGIFを作りたいと思います。


02.アニメーション用の素材を作る

アニメーション用の素材を作ります。まずはラフを描き、Illustratorを使って描き起こします。
“アニメーション用”とはどう言うことかと言いますと「パーツごとに分けて作る」と言う意味です。

簡単な例えですと、「犬のしっぽを動かしたい」時は、「しっぽ」と「それ以外の部分」を分けて作ります。こうすることで、後で動きを付ける時に楽に調整することが出来ます。

分けて作っておかないと、いざしっぽに動きを付けよう!と言う時にパスで調整することになるので、非常に時間が掛かってしまいます。更に、やっぱり元に戻したいと思った時などの修正も難しくなってしまいます。

パーツごとに分けて作る際、最初からバラバラに作ると難しいと思いますので、ラフをなぞる過程でパーツごとに区切って下さいね。

パーツを分けると言っても、実際にどこをどう分けたらいいの?と疑問に思う方もいるかと思います。
基本として、まずはパーツをザックリ大枠でイメージすることが大切です。

大枠で捉えてから、動きのイメージに合わせて必要なパーツの足し算と引き算を行います。
必要なパーツの数は、どんな物にどんな動きを付けたいかによって1個~数百個に変わります。

例えば生き物の場合だと、「頭」「胴体」「上肢」「下肢」の4つが大枠のパーツになります。大枠が捉えられたらパーツの足し算と引き算を行います。
頭だけ動かしたいなら、「頭」と「それ以外」の2つのパーツが必要になります。
頭の動きと、歩行のアニメーションも付けたい場合は、「頭」「胴体」「上肢」「下肢」の4つのパーツが必要になります。

さらに、「肘や膝を曲げる」「瞬きをさせる」と言ったより繊細な動きを付けたい場合は、もっと多くのパーツが必要になります。
表現したい動きをイメージしながら、必要に応じて「腕」「手」「脚」「足」「指」「耳」「目」「口」など、細かく分けてパーツを作るとより自由に動かすことが出来ますよ。

関節や接続部分を意識するとパーツを分けやすいですが、指は?瞼は?と細かく意識し過ぎると果てしないので、イメージする動きに合わせてほどほどに分けて下さい。

今回は犬を作りますので、基本の「頭」「胴体」「上肢」「下肢」と、「耳」「目」「口」「しっぽ」の大きく8つのパーツに分けて作っていきたいと思います。
パーツを作る際のコツですが、パーツ同士が重なる部分は面積に少し余裕を持たせて作って下さい。理由としては、パーツを動かした時にスキマが出来ないようにする為です。

上記のことを意識しながら、Illustratorに新規ドキュメントを作ります。最初のレイヤー名は「01」にしておいてください。
レイヤー01のアートボードに犬を作っていきます。
実際に作った物が下の図になります。

一見普通の犬の絵ですが、分解するとパーツが沢山ありますね。
これでベースとなる素材は完成です。


03.コマを作る

素材が出来たら、次はコマを作っていきます。
アニメGIFは、複数のコマをパラパラ漫画のように再生することで動いているように見せます。

先ほど作ったレイヤー01が1コマ目になりますので、これをベースに2コマ目を作っていきます。

レイヤーパネルのレイヤー01をコピーして上に複製を貼り付けます。これが2コマ目になりますので、レイヤー名を「02」にします。
これで、アートボード上の前後に同じ絵が重なった状態になっているかと思います。

レイヤー02のパーツを動かして、2コマ目を作っていきましょう。
イメージする動きに合わせて、レイヤー02のパーツを傾けたり移動させたりします。
今回はしっぽを振るアニメーションにしたいので、まずはしっぽの位置や傾きを変えます。

位置が決まったら、これで2コマ目は完成です。
ちなみに、02のレイヤーの左側にある目のアイコンを表示させたり消したりすることで、Illustrator上でアニメーションを疑似的に確認することが出来ますよ。

この要領で、レイヤー02の他のパーツも動かしていきます。
目や口、耳なども調整を行います。

これで2コマ目も完成です。

今回は2コマを繰り返し再生するアニメーションにしますので、これで素材は揃いました。
もっと複雑な動きを付けたい場合や動きを滑らかにしたい場合は、必要なコマ数は増えていきます。

最後に、アートボードをコピペして、レイヤー01とレイヤー02をそれぞれ別のアートボードに配置します。
その後、アートボードごとにPNG形式で描き出してください。ファイル名はそれぞれ「01」「02」として下さい。


04.アニメーションさせる

いよいよアニメーションさせる作業に入ります。
ここからはPhotoshopを使います。

PhotoshopにPNGファイル「01」をドラッグ&ドロップして下さい。その上に重ねるようにPNGファイル「02」もドラッグ&ドロップします。
ここまでで、Photoshopの画面は下の図のようになっているかと思います。

一度、レイヤーパネルのレイヤー02の目のアイコンをクリックして非表示にします。
「タイムラインパネル」の「フレームアニメーションを作成」をクリックします。
すると、タイムライン上にレイヤー01が表示されます。これが1コマ目になります。

次に、タイムラインパネルのレイヤー01を選択した状態で、タイムラインパネルの右上にあるメニューを選択します。
いくつか選択肢が表示されますので、「フレームをコピー」を選択した後、「フレームをペースト」を選択します。
モーダルウィンドウが開いたら「選択範囲の後にペースト」を選びます。
タイムラインパネルに、左上に「2」と書かれたもう1つレイヤー01が表示されたかと思います。

左上に2と書かれている方を選択した状態で、先ほど非表示にしたレイヤーパネルのレイヤー02を表示させます。また、レイヤー01を非表示にしておきます。

タイムラインパネルの1コマ目と2コマ目の「ディレイ時間」を「0.5秒」に、「ループ回数」を「無限」に設定します。

これでアニメーションさせる準備は整いました。
タイムラインパネルにある再生ボタンを押してみて下さい。絵が動き出します。
実際の動きを見て、ディレイ時間やループ回数を調整してみて下さい。

「Web用に保存」でgif形式で書き出せば、完成です!


おわりに

いかがでしたでしょうか?
アニメGIFを作るのは難しいイメージがあった方も多いかと思いますが、このような単純な動きであれば簡単に作ることが出来ます。
もっと複雑で滑らかなアニメGIFを作りたい!と言う場合も、ご紹介した工程を繰り返したり増やしたりすることで可能になります。
時間は少し掛かってしまいますが、コツコツ作ることで誰でも作ることが出来ますので、ぜひ楽しんで作ってみて下さい。

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


簡単!SNSで使えるスタンプ画像の作り方!★無料プレゼント付お正月ver★

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

▼年末年始スタンプ画像

今年も残すところあと少しになりました。
新年を迎える準備で忙しくなりそうです…!
―――早速ですが前回に引き続き皆様にご使用いただけるような「SNSなどで使えるお正月のスタンプ画像」を作ってみることにしました!
量も増え、年末年始に使える仕様となっております♪
下のイラストが今回の完成図です。

▼(今回の)スタンプ画像作成の流れ

※ここで紹介しております内容は、一作例となります。サイズ、比率等は説明のしやすい様に書いております。
こちらは簡単に作れますので、簡単な作成の流れをゆるっと書いていきたいと思います。

—————————————————————
★作成環境:PhotoshopCC2017
★動作確認:Windows7
★イラスト作成:PhotoshopCC2017+ペンタブ
※所要時間は内容によりけりですが、集中して一日くらい
—————————————————————

【1】方向性を簡単に決めます。
年末年始/男女選ばす/気軽に使える
【2】大まかにどれくらいの量を作成するか決めます。
年末と年始になりますので少し多めに、今回は前回の倍、
年末年始大サービスの12点です!
【3】点数を決めたらスタンプ画像に盛り込む言葉などを考え、絞り込みましょう。

年末年始に無難に使える文言を12点選択しました!
バラエティ系も入れるといいですね。

【4】言葉が決まりましたらイラストの作成開始です。
ざっくり下書きしたものをスキャンしました。

【5】Photoshopの新規作成でファイルを開きます。
スタンプ画像なので250px×250pxサイズ位が丁度良さそうです。
【6】今回、線画や色味はペンタブで行いました。
(イラレのパスで作成するのも有りですね!)

【7】出来ましたらPNGで書き出しをして完了です。

▼プレゼント
上記でも記載しておりましたが、今回作成致しましたスタンプ画像12点を無料プレゼントさせて頂きます♪
もし1つでも気に入って頂けたら幸いです!

 

バックナンバー↓

いかがでしたでしょうか。
気軽に使って楽しんで頂ければ何よりです。
また機会がございましたら新バージョンを作成したいと思います!
(こんなスタンプ画像があったら便利なのに…というものがございましたら参考にさせて頂きます)
皆さんも年末年始、オリジナルスタンプ画像を是非作ってみて下さいね。

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

Webデザイントレンドとテクノロジーの必然的関係性

「トレンド」と書くとポジティブで先進的なイメージですが、
「流行」と置き換えると少なからずネガティブを感じます。

今回はそんな流行り廃りもあるWebデザイントレンドとテクノロジーの関係を考えてみます。


過去のトレンドとテクノロジー

まずは、
歴史ある量産性ともなう印刷技法として、
「シルクスクリーン印刷」を紹介します。

メッシュ目の素材に特殊な薬品を使って、
インクが通過する部分をつくることで版を作ります。
プリントTシャツなど単色表現、もしくは重ね合わせによる多色構成が可能な技法ですが、
その独特な仕上がりと印刷される側の自由度が高いため、
現在も活用され、1950年代後半から、商業、ポップ・アート、
芸術作品の表現手段として用いられました。
引用元:google画像検索
アンディ・ウォーホル/ マリリン・モンロー/1967年

シルクスクリーンによる表現も当時は先進的なグラフィックデザインとして捉えられ、
数多くのポップ・アートが商用利用されておりました。

重要なのは、その表現にはテクノロジー/テクニック(技術/技法)が伴っていたことです。

コンピュータの進化により、
独特な手順と工程、器具が必要であったこれらの表現も、
コンピューター上で疑似的に再現が可能となりました。

「規則的に凹凸のある紙にクレヨンで引いた線」や、
「こすれたマットな表面ながらも鈍く光るエッジを持つスチール表現」など、
デザイナーとして本質を知らなければ組み込みの発想に至らないため、
表現理論を知ることは必要です。


画面のトレンドとテクノロジー

それでは、過去のソフトウエアなどの画面表現について確認してみましょう。

画面表現は制約の歴史です。

1980年代の「8ビット」の時代は、限られた画面解像度と色パレット制限がありました。
使える色は、光の三原色をオンオフして再現可能なわずか8色
(黒、白、赤、緑、青、黄、紫、水色)でしたが、


この時代でも技術を駆使して高見を目指し、トレンド表現を作っておりました。

代表的な表現として、
少ない色数から新たな色を認識させる「タイルペイント」技法がありました。

2色をタイル状に交互に並べることで、
遠目で見ると2色の中間色を再現しています。
間隔を調整することで濃淡も再現できます。
モニターのコントラストが低く滲んでいる方が自然に見えたりもします。
この苦肉の策の技法は、現在も
「ディザ」処理(インデックスカラー256色など、少ない色数で段階の多い素材を再現する)として使われています。


テクノロジーの違いによる表現の違い

それでは最近のWeb表現トレンドである、
「グラデーション」について比較説明します。

グラデーションはGIFやPNGなどのビットマップ画像の場合、段階表現を増やし滑らかな色変化を再現するには多くの容量を必要とするため、利用できる機会が必然的にありませんでした。

グラデーション画像を運用する為には、容量を可能な限り軽くする必要があり、結果、滑らかなグラデージョンは失われ、再現できませんでした。

現在ではアイコンをはじめ多くの表現としてグラデーションが使われていますが、可能にしたのは下記要因です。

・回線情報転送量の拡大 ※【秒間】64kバイト程度 → 数メガバイト単位
・画像表示メモリ増
・演算によるリアルタイム表示 ※従来は書き出した画像での表示

CSSやSVG[Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)]
で表示出来るようになった点もありますが、
もっとも影響が大きいのは、
画像を減色等、最適化しなくても実運用に持ち込めるようになった回線速度テクノロジーの進化の影響ではないでしょうか。


高速かつ複数コア化したCPUの恩恵

回線速度の進化と並行して強力高速になったのはプロセッサ類です。
機器の処理速度をつかさどる頭脳ですが、
一旦の高速化鈍化を迎えながらも、
複数コア化によりさらに多くの情報を処理できるようにテクノロジーが進化したため、
いわゆる「力技」が出来るようになったのも大きいと考えます。

過去の非力なCPUでは画面の描画に時間がかかり、
JavaScript等による処理も足かせになって表示ストレスを生んでいましたが、
悪い意味で、無駄が多くで扱いやすい低速プログラミング言語や不適切なマークアップでも、
そこそこに見れるものが再現出来てしまう時代になりました。

結果、
段階表現がとても多く重いメガバイトレベルのグラデーション画像でも、ストレスを感じさせないレベルで運用できる環境が出来てしまっています。

不自由を感じる状況があるとすれば、
速度制限を受けたユーザー利用シーンの場合でしょうか。


まとめ

以上のように、
過去は制約上なしえなかった表現が現在のテクノロジーでは可能となり、
リッチでマテリアル感を押し出した表現ができている、
という見方もできるのではないでしょうか。
また、
最適なマークアップやプログラミングが出来ていなくても運用できることで、
専門工程職の必要性がなくなりつつあるのも時代の流れと感じますが、
Webやアプリに関係するグラフィックデザイナーに対しては、
必然的に総合スキルを求められる時代になってきたのだと深く考えさせられました。

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

簡単!合成した画像を自然に馴染ませる方法

こんにちは!今回のテーマは「簡単!合成した画像を馴染ませる方法」です。
簡単な合成は出来るけど違和感が出てしまう…とお悩みの方向けに、合成のちょっとしたテクニックをご紹介したいと思います!

今回ご紹介する小技を使えば、WEB系のサイトなど、ネットでよく見るこんな画像が作れるようになります。

作業環境は下記の通りです。

—————————-

■ Photoshop CC 2019
■ Windows10

—————————-


重ねただけでは自然な合成は出来ない

画像の合成をする時は、ただ重ねただけでは自然な合成は出来ません。
使用する画像によって明るさや色合いが違ったり、境界線が馴染んでいない為、違和感を感じてしまうからです。

例えば、今回の合成に使うこちらの2つの画像を見て下さい。

2つとも撮影条件が違う為、まったく異なるトーンの画像になっています。
これらの画像を、何の調整もせず切り取って重ねただけだと下の図のようになります。


これだと違和感がありますよね。

使用している画像についてですが、画像Aは自分でササッと撮影した物で、画像Bは素材サイトでダウンロードした物です。
簡易的な撮影や素材サイトを利用して画像素材を集めるのは、低コストで任意の画像を作りたい時によくある状況かと思います。
ですが、画像の撮影条件が大きく異なってしまう為、明るさ・色合い・影・接地面・境界線の差異や矛盾が目立ち、合成した時の違和感が強くなってしまいます。

こうならないように、基本的な明るさの調整はもちろん、色合いや境界線など細かい調整を行う必要があります。


合成した画像を自然に馴染ませる

それでは、合成した画像を馴染ませていきたいと思います!
※合成のやり方を詳しく知りたい!と言う方は、ぜひこちらの記事もご覧ください!


01.雰囲気の方向性を決める

まずは、完成した時の雰囲気の方向性を決めます。
明るい、暗い、楽しい、怖い、など決めることで、これから画像を馴染ませていく時の指針となります。
今回は、暗い雰囲気の現状から『明るく温もり』のある画像になるよう調整していきたいと思います。


02.トーンをフラットにする

画像Aと画像Bのトーンをフラットにします。
「フラットにする」とは何かと言いますと、画像の明るさや色合いを統一することです。
合成する画像はそれぞれ、明るかったり暗かったり異なるトーンを持っています。ここを統一することで、編集がしやすくなり、自然に馴染んだ合成をすることが出来ます。

いきなり完成形を作ろうとして、明るさや色合いを変えてもなかなか上手くいきません。
まずはトーンの土台を作ることを意識して下さい。しっかり土台が出来てから、肉付けしていきましょう。

それでは実践に入りますが、色合いや光源の基準となる画像を決め、その画像から調整を行います。基準にした画像を元に、他の素材も色合いの調整を行うと進めやすいです。
今回は背景となる画像Bを基準にして、調整を進めたいと思います。

画像Bに調整レイヤーの「トーンカーブ」を適用します。
元画像の赤みが強かったので、チャンネルのグリーンで少し黄色を強調してバランスを整えました。また、チャンネルのRGBで全体の明るさを整えました。

次に、画像Aにも調整レイヤーの「トーンカーブ」を適用します。
すでに調整済みの画像Bと見比べながら、明るさや色合いのバランスを合わせていきます。
元画像が暗かったので、明るくなるよう調整を行いました。

また、画像Aのスマホ部分がまだ暗いので、明るくなるように調整します。
新規レイヤーを作りスマホの形に添ってマスクを掛けて下さい。
マスクが掛けられたらブラシツールを選択し、カラーを白に設定して全体を塗り潰します。キッチリ塗り潰すより、荒めに塗ると自然な仕上がりになります。
次に、レイヤーの描画モードをオーバーレイにします。更に、バランスを見ながらレイヤーの不透明度を下げます。今回は20%に設定しました。

最初と比べると、画像Aと画像Bのトーンが馴染んできたのではないでしょうか!


03.トーンを調整する

トーンをフラットに出来たら、最初に決めた雰囲気になるようにトーンを更に調整します。
まず、レイヤー全体に調整レイヤーで「トーンカーブ」を適用します。
『明るく温もり』のあるトーンにしたいので、暖色が強調されるようにトーンカーブを調整します。

いかがでしょうか?
『明るく温もり』のある画像になってきたかと思います。


04.最終調整を行う。

完成へ向けて最終調整をしましょう。
何をするかと言いますと、注目して欲しい部分を際立たせたり、より自然な見た目になるように境界線や接地面を馴染ませたりします。

例の画像で言うと、スマホの画面が1番見て欲しい部分なのですが、今のままだと馴染みすぎていて内容がわからなくなってしまっています。
ですので、上から解像度の高い綺麗なスクリーンショットを重ねて見やすくしたいと思います。

まずは図形ツールを使い、スマホの画面の大きさに合わせて下地となる黒い長方形を配置します。細かい角度はパス選択ツールで整えて下さい。
更に、その上からスクリーンショットを重ねます。前述の黒い下地より一回り小さくなるように、自由変形で形を整えます。
スクリーンショットのレイヤーの不透明度を少し下げると自然な仕上がりになります。今回は96%にしています。

最後に、より自然に馴染ませる為の調整をします。
画像Bのレイヤーをコピーして描画モードを「オーバーレイ」にします。レイヤーのタイトルをオーバーレイに変えます。
次に、バランスを見ながらオーバーレイのレイヤーの不透明度を下げていきます。画像にもよりますが、10%~20%くらいが良いと思います。

ここまで来たら、オーバーレイのレイヤーを全てのレイヤーの上部に配置します。最上部かそれに近いところに置いてください。
今回は、スクリーンショットの色合いを変えたくなかったので、スクリーンショットの下に配置しました。
更に、オーバーレイのレイヤーに調整レイヤーで「色相・彩度」を適用します。色合いが黄色い暖色になるよう調整します。

このように、作成したレイヤー全体に色を重ねることで、統一感を増すことが出来ます。また、合成した境界線が馴染むので、より自然な見た目にすることが出来ます。

これで作業は完了です!
こうして出来た合成画像がこちらです!

最初の画像と比べてみると、明るく温もりのある、自然に馴染んだ画像になったのではないでしょうか。


おわりに

いかがでしたでしょうか?
ザックリ合成するのは簡単かもしれませんが、それを自然に綺麗に見せる為には手間と工夫が必要です。
コツは、丁寧に作業することです。やればやるほど自然な仕上がりになりますので、ぜひ試してみて下さい!

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

簡単!SNSで使えるスタンプ画像の作り方!★無料プレゼント付クリスマスver★

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

▼クリスマススタンプ画像

ひと月後にはクリスマスがやってきますね~…
せっかくなので何かできれば―――と考えた結果、皆様にご使用いただけるような「SNSなどで使えるのスタンプ画像」を作ってみることにしました!
下のイラストが今回の完成図です。

こちらは簡単に作れますので、簡単な作成の流れをゆるっとかいてみたいと思います。

▼スタンプ画像作成の流れ

※ここで紹介しております内容は、一作例となります。サイズ、比率等は説明のしやすい様に書いております。

—————————————————————-
★作成環境:PhotoshopCC2017
★動作確認:Windows7
★イラスト作成:PhotoshopCC2017+ペンタブ
※所要時間は内容によりけりですが、のんびり半日もあれば
—————————————————————-

【1】方向性を簡単に決めます。
クリスマス/男女選ばず
【2】大まかにどれくらいの量を作成するか決めます。
今回は気軽に作れてちょっとバラエティも加えたかったので6点にしました!
【3】点数を決めたらスタンプ画像に盛り込む言葉などを考え、絞り込みましょう。

少しばかりおふざけも入っていますがバラエティ系も加えたかったのでこの6点に決めました!

【4】言葉が決まりましたらイラストの作成開始です。
ざっくり下書きしたものをスキャンしました。

【5】Photoshopの新規作成でファイルを開きます。
スタンプ画像なので250px×250pxサイズ位が丁度良さそうです。
【6】今回、線画や色味はペンタブで行いました。
(イラレのパスで作成するのも有りですね!)

【7】出来ましたらPNGで書き出しをして完了です。

▼プレゼント

上記でも記載しておりましたが、今回作成致しましたスタンプ画像6点を無料プレゼントさせて頂きます♪
もし1つでも気に入って頂けたら幸いです!

   

   

   

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。またお会いしましょう!
(次更新はお正月版スタンプ画像を更新できたらと考えております!)

 

 

PhotoShopチュートリアル テキストエフェクト-炎編-

こんにちは。以前の記事でテキストエフェクトの「氷」をご紹介いたしました。はらです。
今回は第二弾としてTOP画像の「炎」エフェクトの制作方法をご紹介していきます!
また、このエフェクトはブログ用にオリジナルで考えたエフェクトなのでここでしか見れません!

※制作時間は15~30分程です。
※PhotoShopのバージョンはCC2018です。
※作業環境はWindowsです。今回はショートカットの紹介は行いません。

_______________________________________________________

●PhotoShop上部メニューバーより/「新規」→数値を入力(下記画像参照)→「作成」
●「レイヤー1」を非選択の状態で(選択していても仕上がりには影響しません)「レイヤー」パネル下部のアイコンから「ベタ塗り」を選択→カラーピッカーダイアログで「♯000000」と入力
(ベタの色は暗めの色であれば何色でも構わないのですが、今回は「♯000000」に設定)

●「横書き文字ツール」を使用しテキストレイヤーを製作。その後「あつあつ」と入力。(フォントは太めのフォントであればどのようなものでも構いません)文字サイズは220px前後にする事をオススメします。また、文字間は気持ち広めにしてください。

●文字色を「231209」に設定

●完全に一致させる必要はありませんが、今回の文字設定はこちらです

●「あつあつ」レイヤーのサムネイル・レイヤー名以外の場所をダブルクリックし、「レイヤースタイル」ウインドウを開きます

「ベベルとエンボス」にチェックを入れ下記設定に

コピー用文字:「♯511900」「♯210000」

●「シャドウ(内側)」にチェックを入れ下記設定に

コピー用文字:「♯ff1e00」

●「光彩(外側)」にチェックを入れ下記設定に

コピー用文字:「♯ff8400」

●「ドロップシャドウ」にチェックを入れ下記設定に

コピー用文字:「♯ff1e00」

●文字の効果の設定はこれで完了です

●背面の炎を作成
「レイヤー」パネル下部のアイコンから「新規レイヤーを作成」を選択し
レイヤー名を「炎1」に変更

●「パス」パネル下部のアイコンから「新規パスを製作」を選択し
「パス1」を作成

●パス1を選択した状態でペンツールを使用しパス1内にパスを製作
パスはテキスト上部の要素の下部(下記画像参照)に引きます(だいたいで構いません)

●パスコンポーネント選択ツールを使用し、引いたパスを下に下げます。
下げる目安は使用しているフォントの線幅の半分ほどです(大体で構いません)

●「炎1」レイヤーと「パス 1」を選択した状態で「フィルター」→「描画」→「炎」を選択

●下記設定に変更し「OK」

●「炎1」レイヤーを「あつあつ」レイヤーの下へ移動

●「炎1」レイヤーを選択し「レイヤー」パネル下部のアイコンから「レイヤーマスクを追加」をクリック【★1】

●ブラシ設定パネルからソフト円ブラシを選択し設定を下記画像に変更【★2】

●「炎1」に追加したレイヤーマスクを選択【★3】

●「炎1」レイヤーの炎画像内で不要な部分を「描画色を黒」にしたブラシツールで描画して隠します【★4】
※不要な部分とはあつあつの文字にかからない炎の束の部分です(書き画像参照)

●さらに炎の量を減らします
炎の束を4~5ほどにします(フォントの一番高い所を一番長めに残すとそれっぽく見えます)

これで背面の炎の製作は終わりです。

●前面上部の炎を作成します
「レイヤー」パネル下部のアイコンから「新規レイヤーを作成」を選択しレイヤーを作成。レイヤー名を「炎2」に変更

●「パス」パネル下部のアイコンから「新規パスを製作」を選択し
「パス2」を作成

●パス2を選択した状態でパスツールを使用しパス2内にパスを製作
(パスはあつあつの文字の上部の要素の中央に引きます(下記画像参照。また、だいたいで構いません))

●パスコンポーネント選択ツールを使用し、引いたパスを下に下げます。
使用しているフォントの線幅分下げてください(大体で構いません)

●「炎2」レイヤーとパス2を選択した状態で「フィルター」→「描画」→「炎」を選択

●設定を下記設定に変更し「OK」

●レイヤーの順序を画像のように整えます。その後表示を変更します

●「炎2」レイヤーを【★1】~【★4】の方法で不要な炎を削ります
※このステップでの不要な部分とは“文字の上部の要素”の“左右以外”の場所となります。

●お好みで炎の量を増やします(今回は炎の束を各文字2~4程度にしました)

●炎1レイヤーを表示させます

●これで前面上部(炎2)の製作は終わりです。

●続いて炎前面下部の製作を行います
先ほどと同様の手順で「炎3」レイヤー(マスク付き)とパス3を制作します。

●レイヤー構成と表示・非表示を下記画像と揃えます

●パス3を選択した状態でパスツールを使用しパス 3内に
パスを製作
(パスはあつあつの文字の下部に添う形で引きます(下記画像参照。大体で構いません))

●パスコンポーネント選択ツールを使用し、パスを下に下げます。
下げる目安は使用しているフォントの線幅分です(大体で構いません)

●「炎3」レイヤーと「パス3」を選択した状態で「フィルター」→「描画」→「炎」を選択
設定を下記設定に変更し「OK」

●炎が描画されました

●「指先ツール」を選択、ブラシを「ハード円ブラシ」に変更し下記設定にします

●炎の下部を指先ツールで下から上へドラッグし持ち上げます。
これにより炎が燃えている対象の下から巻き上がったように見せる事ができます

●指先ツールで炎画像下部を修正しました

指先ツールによる修正が終わりました

●「炎3」レイヤーを【★1】~【★4】の方法を使用し不要な炎を削ります
※炎の束を5~6ぐらいにするイメージで削ります
※ブラシサイズを50px程にするといいかもしれません

●非表示にしていたレイヤーを全て表示すると完成となります。

以上となります。
また、アレンジ次第でさらに雰囲気を変えることができます。

徐々に寒くなるこの季節…このエフェクトを使用して暖かい気持ちになってみてはいかがでしょうか。はらでした。

簡単!パターン素材の作り方-応用編-

今回は前に更新しました【パターン素材の作り方-基礎編-】の応用版を紹介したいと思います。
「どこがパターン素材の切れ目なの?」と思うような、より複雑な柄を使用してのパターン素材となります。

ですので初めてパターン素材を作る方は基礎編より見て頂けますとより理解がしやすいかと思います。

—————————————————————-
★作成環境:IllustratorCC2017
★動作確認:Windows7
★所要時間:20分(素材ありき)
—————————————————————-

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

[おさらい]パターン素材とは

★自分で作ったパターン素材をスウォッチに登録することで、色を選択する感覚でいつでも使える。
★作ったパターン素材は描画対象に縦横敷き詰める形で配置。

『花柄繰り返しパターン』
メイキング

上下・左右の絵柄、スペースのつながりに注意しながら作ってみましょう!
※ここで紹介しております内容は、一作例となります。
サイズ、比率等は説明のしやすい様に書いております。

【ゴール】複数の柄(モチーフ)がバランスよく入っている包装紙のようなもの。
素材の切れ目が分かり辛い。

【用意する物】花素材。以下のものをイラレで作成しました。

【1】ツールの長方形ツールで長方形を描く。
【縦180px横140px・色#132d4c】今回、見やすい背景色を選択しています。

【2】長方形に花の素材をバランスよく配置していきます。
ですが、ただ置きたいように置いてしまうと、敷き詰めたときに上下左右が繋がらなくなってしまうので手順を踏んで配置していきましょう。

【3】土台のサイズに合わせてクリッピングマスクをかけます。

【4】パターンを登録します。
【ウィンドウ】の中にある【パターンオプション】を開きます。
開いたら作成したパターン画像を選択したまま、右上のメニューを開き【新規パターンを作成】をクリックします。

【5】ポップアップのOKを押すとパターンが登録され編集画面が出てきます。
任意の名前とパターンの縦横サイズを記載します。

【6】縦横サイズを記載するとパターンの枠サイズが変更されます。
パターン素材を枠に当て込みます。

【6】当て込んだら左上の完了をクリックして閉じます。

【7】スウォッチに登録され完了です!

使ってみた

最後に

花柄繰り返しパターンの作成の際にはより壁紙っぽく見せるため素材の
それぞれが孤立しすぎないことです。
蔓を伸ばして花と花をつなぐことで全体的に滑らかな雰囲気に、また、
花のサイズの大小をつけすぎないことがポイントです。

いかがでしたでしょうか?
繰り返しパターンの応用編を紹介させて頂きました。
使用する素材のサイズがバラバラな、規則性の無い柄でもパターン素材に
することは出来ます。あくまでも、ここでの作成法は一例ですので是非
参考の上、作成しやすい方法を試みてくださいませ!
以上スガがお送りいたしました。

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

関連リンク  * * * * * * * * * * * * * * * * * * * * * * * *

パターン素材の作り方-基礎編-

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *