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つでも気に入って頂けたら幸いです!

   

   

   

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

 

 

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】スウォッチに登録され完了です!

使ってみた

最後に

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

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

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

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

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

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

 

 

趣味の写真加工にぜひ!Photoshopで行う画像の切り抜き+合成 【切り抜き編】

こんにちは。今回ご紹介するテーマは
「趣味の写真加工にぜひ!Photoshopで行う画像の切り抜き+合成【切り抜き編】」です。

趣味でPhotoshopを使う、あるいは使ってみたいという方は沢山いらっしゃるかと思います。PhotoShopを使ってまず何をしてみたいか…最初に思い浮かぶことはおそらく切り抜きや合成ではないでしょうか?色調補正では?とも思ったのですが、最近は皆さんスマートフォンで補正をおこないますよね…!?
と、言う事で、私の今回と次回の更新で切り抜きと合成(フォトコラージュ)についてご紹介したいと思います。今回ご紹介する切り抜き方法は一見複雑に見えますが、特別な知識・技術は必要ありません。基本、ただなぞるだけの作業となります。

前置きはいいのですぐに切り抜きたい方は コチラ!>

切り抜きを行う前に…切り抜きについて

切り抜きは、フォトコラージュだけではなく、補正のためにも行われます(厳密にはパスやマスク、選択範囲の作成が目的)。
また、言わずもがなですが切り抜きの精度は制作物の仕上がりに大きく影響します。切り抜きが甘いと安っぽかったり…怪しかったり…と、印象が悪くなってしまいます。そしてなにより合成時の違和感が大きくなります…。(ネタ画像などは雑な方が味が出る場合がありますが…)自然な合成を行いたいのなら正確な切り抜きは必須です。

画像の切り抜き方法の種類

画像の切り抜きが初めての方は「どうやってやっているのだろうか?」と思うかもしれません。実は切り抜き方法は、簡単なものから、少しコツのいるものまで沢山あります。
どの切り抜き方法を行うのかは、画像や使用する場所によって判断するのですが、今回はペンツールなどの使い方を知らない方でも切り抜く事のできる方法を一つご紹介いたします。

今回行う切り抜き方法について

今回の切り抜き方法は「選択範囲とマスク」機能を使用した方法です。
この切り抜き方法は手動+自動検出により選択範囲を指定し、マスク(後ほど補足します)をかけて切り抜くという方法です。この方法は主に髪の毛やふわふわした犬・猫などの輪郭の複雑なものの切り抜きに適しています。
切り抜きたい物と背景の境界があいまいな画像には適していません(切り抜けないわけではありません)。また、境界がはっきりしている画像に関してはパスで切り抜く方法がオススメです。

切り抜き手順

では早速、作業手順をご紹介していきます。

PhotoShop上部メニューバーから「ファイル」→「開く」で切り抜きたい画像を選択し「開く」をクリック

画像が開きました。今回はこちらの猫の写真を切り抜きます。

「選択範囲」→「選択範囲とマスク」をクリック

選択画面に切り替わるので、表示モードをオーバレイに切り替えます

「クイック選択ツール」をクリックします。ツール選択後、切り抜きたいもの(残したい物)をドラッグします。すると自動で対象の輪郭が選択されます。

選択範囲がはみ出してしまった場合は、はみ出した部分をAltキーを押しながらドラッグします。(細部は次の工程で調整するので多少荒くても構いません)

クイック選択ツールによる大まかな選択が完了しました。

「境界線調整ブラシツール」を選択し、切り抜き対象の境界をドラッグでなぞります。余計に選択した場合はAltキーを押しながらドラッグして調整します。

境界の選択が完了したら、「出力設定」をクリック→出力先を「レイヤーマスク」に変更→「OK」をクリック


切り抜きが完了しました。

「ファイル」→「保存」でタイトル(今回は“ねこ”としています)を入力→「ファイルの種類をPhotoshop(PSD)」に設定→「保存」をクリック

以上で切り抜き作業の完了です。

おまけ:スマートフォン用の壁紙画像を作ろう!

PhotoShopで先ほど制作した切り抜き画像を開きます。

レイヤーパネルで「塗りつぶしまたは調整レイヤーを新規作成」アイコンをクリック→「ベタ塗り」を選択→カラーピッカーでお好きな色を選んで「OK」をクリック

追加された「ベタ塗りレイヤー」をレイヤー0(ねこ画像)の下にドラッグ&ドロップ で移動

切り抜き画像の背景に色がつきました。

切り抜きツールを選択。
バウンディングボックスをドラッグし、スマートフォンで使用したい範囲を選択→「Enter」をクリック。※画像の表示範囲設定は端末の設定画面で行ってください。

補足:サイズを指定したい場合は上部にあるオプションバーより「幅×高さ×解像度」を選択→幅と高さに数値を入力します。

その後「ファイル」→「別名で保存」→ファイルの種類を「JPEG」に設定→「保存」→「JPEGオプション」で画質を8に設定(好みの画質で構いません)→「OK」をクリック

完成です!
あとはコチラの画像をお手持ちのスマートフォンに送信し設定をするだけです!

いかがでしたか?PhotoShopでは輪郭の複雑な写真でも、ただなぞるだけで切り抜く事ができます!次回はこちらの切り抜き画像を使用してネタ要素の強い合成写真の作り方を説明していきたいと思います。

手描きイラスト「ふわふわパステル」~byフォトデコレ~

こんにちはもしくはこんばんは!
皆さまゴールデンウィークはどうでしたか?
家族や友達との遠出の旅行や日帰り旅行、またはのんびりお家で過ごされた方もいらっしゃると思います。
写真も普段より沢山撮られた方なんかもいらっしゃるのではないでしょうか♪

さっそくですが今回はそんな思い出の写真をふんわり変身させられるスタンプを使用例と共に紹介したいと思います!
※株式会社デジマースが提供しております写真系ツールフォトデコレの「ふんわりパステル」スタンプになります。

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

▼「ふんわりパステル」

「ふんわりパステル」は手描きですので、写真の被写体の邪魔をせず自然な感じに装飾が出来ます。
メインの写真を主役にしたまま、ふんわり仕上がります。
スタンプ自体がパステル調のため、少し濃いめの部分に装飾するのが良いですね。

▼フォトデコレで配信「ふんわりパステル」

スタンプやコロコロ、フレーム等、ご用意。(計49点)
実際にこれらのスタンプを使用した写真はこちら↓

▼メッセージカードにも!

撮った写真だけでなく、ちょっとしたメッセージカードの装飾にも合います!
―――――洒落たメッセージを送ってみませんか?

手順
①メッセージを書いて写真を撮ります。
※撮るときは余白を空けるのと、なるべく明るくすると装飾がしやすいです。
②『フォトデコレ』内で画像を選択し、まずはフィルターでより自然な
感じに加工をします。
③思うように装飾!
※あくまでも文字がメインなので文字の邪魔にならない様装飾するのがコツです。


手順
①『フォトデコレ』内に白く撮った画像を用意します。
※撮るときは明るく白くなる様にすると良いです。お好みでフィルター加工を。
②テキスト入力と装飾をします。

▼最後に

パステルカラーなのでほんわか装飾が出来ます!
装飾が苦手な人でもカンタンに出来るので是非試してくださいね!

▼『フォトデコレ』は以下で使用できます。
—————————————————————————————————————————–

—————————————————————————————————————————–

▼過去紹介分はこちら

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

簡単! ゆるゆるイラストチュートリアル②[PhotoShop着色編]


お久しぶりです!第34回ブログ更新担当のはらです!
今回は前回の記事「簡単! ゆるゆるイラストチュートリアル①[Illustrator線画編]」の後編「簡単! ゆるゆるイラストチュートリアル②[PhotoShop着色編]」をご紹介したいと思います。
本日も前回同様この方にお越しいただきました。イラスト大好き「イラストちゃん」さんです!

お…お久しぶりです。今日はテンション高めですね。何か良い事でもあったのですか?

がんばってくださいね。

と、言う事でPhotoShopでの着色方法の紹介をお願いします。


1. 前回作成した線画ドキュメントをPhotoShopで開きます
PhotoShop上部メニューバーより「ファイル」→「開く」を選択。
[Illusutlator編]で制作したAIデータを選択し「開く」をクリック。

2. 「PDFの読み込み」ダイアログボックスで下記情報を入力し「OK」をクリック(サイズは用途に合わせて変更してください)

画像が開きました

3. レイヤーパネル下部の「塗りつぶしまたは調整レイヤーを新規作成」アイコン→「ベタ塗り」を選択→色をffffff(白)に変更

4. 制作した「べた塗り 1」レイヤーをレイヤー1の下に移動

5. レイヤーパネルでべた塗り1レイヤーを選択した状態で「新規レイヤーを作成」アイコンをクリックしてレイヤー2を作成→レイヤー2を選択した状態でレイヤーの描画モードを「乗算」に変更

6. ツールパネルから「ブラシ」を選択。カラーパネルの描画色を設定をダブルクリック→カラーピッカーに数値(b4eaff)を入力し「OK」をクリック(色は何色でも構いません)

7. 「ウィンドウ」→「ブラシ」でブラシパネルを表示「ブラシパネル」内で「楕円(ソフト)11」を選択し数値を入力

8. Illustrator上部コントロールパネル内の「不透明度」を40%に変更

9. レイヤーパネルの「レイヤー2」を選択した状態で色を塗ります。(今回は行いませんがパーツごとにレイヤーを分けると修正が楽になります)

10. イラスト全体の塗りが終わったら、次は線の色を変更していきます。レイヤー1(線画レイヤー)をダブルクリック

11. レイヤースタイルダイアログで「カラーオーバーレイ」にチェック→描画モードを「スクリーン」に変更。その後、好きな色を選択(今回は#7d7a7fに変更)「OK」をクリック。

12. 完成

ポスター怪しいですね…

思い返してみるとWEBや紙媒体などには大抵イラストや写真が入っていますね。これだけ使われているということは、今後もイラストが必要な機会は沢山ありそうです…。そんな時に今回知ったイラスト制作方法を“読んでもらえる資料”や“引きの強い広告”制作に役立てていきたいと思います!

こちらこそありがとうございました。早速会社のブログ制作に使ってみますね!
ということで皆さんも機会があれば描いて見てくださいね!そでれはまた次回の更新でお会いしましょう。


今回ご紹介した作画方法で制作したイラスト(細かい設定は少し変えていますが…)が、求人情報サイト「ジョイジョブ」twitterアカウントで使用されています。
興味のある方は「ジョイジョブ」twitterアカウントhttps://twitter.com/joyjob_jpを覗いてみてください。


 

初心者OK ファイルサイズを小さくしたい!~PNG・GIF・JPEG編~

さてさて作成したデータが完成した後にあまりにも容量が大きすぎて困ったことはないですか?
ex.メールで送れない…、ファイル数多い上にデータ重いとか…

私は困りますね!(キッパリ)
というのは、もちろん受け取る側でも、送る側でも、個人で保存に至っても出来る限り容量は軽い方が良いですよね。
通信時間かかるし…、メモリー食うし…

まぁ…作成する内容によってはどうしても容量を下げられない時もありますがそれはそれとて、今回は、そういうものを除いた、「PNG・GIF・JPEG」ファイルの容量をパソコンで下げる方法を書きたいと思います。

※※完全に個人の主観が入っております故ご了承くださいませ※※

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

▼ラインナップ

・PNGファイルの場合
・GIFファイルの場合
・JPEGファイルの場合
※動作Windows/Photoshop CC/Fireworks CS6
※それ以前のソフトでは見え方が違う場合もあるかもしれませんが、流れとしては変わりません。

▼PNG形式ファイルの場合

WEB用にバナーの画像を作成しました。

プロパティなどで容量を確認してみると、「83.5KB」ありました。
まずはファイルサイズがこれ以上小さくできるか簡単に確認してみましょう。

①確認したい画像を開き、下記のファイルから項目を選びます。

②PhotoshopもFireworksも「PNG24またはPNG32」になっていたら「PNG8」を選択して保存!
PNG8にすることで色数は減りますが、グラデーションを沢山使用している等の余程の事が無い限り見た目は変わらないと思います。

容量削減完了。


▼GIF形式ファイルの場合

WEB用にアイコンの画像を作成しました。

プロパティなどで容量を確認してみると、「14.1KB」ありました。
減色を行い、容量を軽くしてみましょう。


①確認したい画像を開き、下記のファイルから項目を選びます。

容量削減完了。

▼JPEG形式ファイルの場合

使用したい写真を用意しました。
容量が大きいが、サイズは変えずにイメージが変わらない程度に容量を下げたい。

プロパティなどで容量を確認してみると、「2MB」ありました。
減色を行い、容量を軽くしてみましょう。

①減色したい画像を開き、下記のファイルから項目を選びます。

②割愛してますが、プレビューも出ていると思いますので、変化を見ながら減色することをお勧めします。

容量削減完了。

▼最後に

簡単に容量を下げられる簡単なやり方をご紹介させて頂きました。
まだまだカラーロックしたりと様々な方法がありますが、今回は初心者OKな内容ですので割愛しています。
知ってるよ!な内容かもしれませんが;少しでも参考になれば幸いです。

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

簡単! ゆるゆるイラストチュートリアル①[Illustrator線画編]

こんにちは!第30回ブログ更新担当のはらです!
今回はデザイン業務や資料制作の際に「フリー素材で欲しい素材が見つからなかった…」「オリジナリティを重視した素材が欲しい!」という場合に使える簡単イラスト制作方法をご紹介いたします。イラストのテーマは「ゆるめ」です。
また、今回はスペシャルゲストと一緒に紹介していきます。
※IllustratorCC 2017を使用しています。

それでは早速ですが、本日のゲスト…「イラストちゃん」さんです!パチパチ

………………はいっ。 よろしくお願いします。
イラストちゃんにイラストを紹介してもらう前に、簡単にイラストについて質問をしてもよろしいでしょうか?

印刷物やWEB、資料などに入れるイラストにはどのような効果がありますか?

もっとわかりやすくお願いします。

なるほど、普段何気なく見ているイラストにはそんな効果があったのですね。
イラスト制作の技術があればデザイン業務や資料制作に役立ちそうです!ますます制作方法を知りたくなりました。
それでは紹介をお願いします。

1. 新規ドキュメントの作成
Illustrator上部メニューバーより「ファイル」→「新規」を選択。画像を参考に数値入力(ドキュメントサイズやカラーモードは使用用途に合わせて変更を行ってください。)

2. ブラシの設定を行います
Illustrator上部メニューバーより「ウィンドウ」→「ブラシライブラリ」→「アート」→「アート_カリグラフィ」を選択

3. カリグラフィパネルが開くので「5pt楕円」を選択

4. ツールから「ブラシツール」を選択

5. 作画
(作画中、少し気に入らない部分があっても気にせず進めてください、修正は描画後まとめて行います)

6. ツールから「ダイレクト選択ツール」を選択。

7. ダイレクト選択ツールでパスを修正し、線画完成
(線幅が気にいらない場合は上部メニューバーより「ウィンドウ」→「線」を選択し、線パネルから線幅を調節してください)

あ…二回に分けるんですね。

わかりました!お忙しい中ありがとうございました。
と言う事でまた次回、簡単! ゆるゆるイラストチュートリアル②[Photoshop着色編]でお会いしましょう!