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

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

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

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もよろしくお願いします!


スマホ広告バナーサイズ表_無料動画バナー紹介!

スマートフォンバナー


ネットワーク系バナー

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

 ・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個弱です。
そんな私がこの半年間でバナーについて学んだことを踏まえて、制作過程を解説していきたいと思います!

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

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

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

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

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

今回はこのような依頼が来たという設定で制作していきます。
————————————————————————————————
▽サイズ 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の作り方

新年、あけましておめでとうございます!
2018年もどんどん情報発信していきたいと思いますので、デジマースブログをどうぞよろしくお願い致します!

余談ですが、みなさん初詣は行きましたか?
私は毎年初詣に行きます。年末年始のまったりした雰囲気が大好きなので、それを味わいに行っています。
昼間に行くのも良いですが、出店や神社に明かりが灯る遅い時間に行くのがオススメです。
参拝客の混雑も若干緩和されていますし、出店から立ち上る湯気や明かりで非日常感が増し増しでワクワクします。

さて、今回のテーマは「簡単!アニメーションgifの作り方」です。
アニメーションgifに興味があるけどどうやって作るのかわからない、思ったように上手く動かせない…とお悩みの方向けの簡単な内容になっていますので、ぜひ試してみて下さい。

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

—————————-

■ Illustrator CC 2018
■ Photoshop CC 2018

—————————-

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


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形式で書き出せば、完成です!


おわりに

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

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


簡単!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 2018
■ Windows7

—————————-


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

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

例えば、今回の合成に使うこちらの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つでも気に入って頂けたら幸いです!

   

   

   

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