Photoshop – インクループ株式会社|神奈川県相模原市 ホームページ制作、WEBマーケティング https://incloop.com インクループ株式会社は、お客様の顧客獲得をマーケティングを活用して支援する会社です。 データ分析、市場調査に基づく企画立案、コンテンツ制作、運用を通じてお客様の目標を実現します。 Thu, 19 Nov 2020 00:59:16 +0000 ja hourly 1 https://wordpress.org/?v=4.9.19 【Adobe Capture CC】手描きのイラストをキャプチャしてカンタン線画抽出! https://incloop.com/adobe-capture-cc/ https://incloop.com/adobe-capture-cc/#respond Mon, 22 Oct 2018 07:45:35 +0000 https://incloop.com/?p=18006

イラストレーターの友人とかと話をすると 「Adobeさんは正直絵描き向きじゃない」 「ペンタブと相性が悪い」 […]]]>

イラストレーターの友人とかと話をすると

「Adobeさんは正直絵描き向きじゃない」
「ペンタブと相性が悪い」
「デジデジしい(デジタルで描きました、的な)絵にしかならなくて手描き感がない」

などなど酷評を聞くことが結構あります。
彼らが使っているのはCLIP STUDIO PAINTとかPixiaとか王道でPainterとかSAIとかでして、あんまりPhotoshop使っている人に会わないような……?

 

手描き感を出したいなら手描きのイラストを使えばいいのでは?

最近自分もお仕事で絵を描くことが増えました。
常はIllustratorで一発描きをしているのですが、やはり「手描き感」は捨てがたいところで、雰囲気がでないことに悶々としていた部分がありまして、クロッキー帳に100均のペンであれこれ描いては写メを取り、PCに取り込んで画像調整をし、Illustratorにもっていって画像トレース……という面倒くさいことをしていましたが、スマホにあるアプリを入れることで全部解決しました。

そのアプリがこちら。

Adobe Capture CCです。

APPストア

Googleplay

2018年10月現在の機能は以下の通り。

  • モバイルカメラで撮った写真からアナログの絵、写真やロゴを、ベクターアートへ。
  • このフォントはなんだ! フォント発見器。(日本語は厳しいですが……)
  • モバイルカメラで撮った写真からカラーテーマ作成(AdobeColarの機能)
  • モバイルカメラで撮った写真からデジタルブラシ作成
  • モバイルカメラで撮った写真からシームレスパターン・ベクターパターンを作成
  • モバイルカメラで撮った写真から3DのPBRマテリアル生成

神か?
2018年10月に来たAdobe全般のアップデートもスゴイ通り越してスサマジカッタのですが
神か???

ではAdobeCaptureでどこまでアナログの再現ができるかレッツチャレンジ。

 

モバイルカメラで撮った写真からアナログの絵、写真やロゴを、ベクターアートへ。

AdobeCaptureCC

画面下部のイメージアイコンorカメラアイコンを利用することでアプリを利用できます。カメラアイコンをタップし、モバイルカメラを起動します。

AdobeCaptureCC

ちなみに描いたのはこんなイラスト。ハロウィンですからハロウィン描きました。所要時間は10分程度です。

AdobeCaptureCC

「シェイプ」のコマンドに合わせた状態で、シャッターを切ります。スライドバーを左右に移動させると、撮影部分のレベル補正ができます。

AdobeCaptureCC

シャッターを切ると、画面が切り替わります。この状態で「消しゴム」と「ブラシ」が利用できるようになります。軽くゴミをとったり、必要な線をつけ足したりすることが可能です。ピッチアップで拡大ができます。

AdobeCaptureCC

特に何のレベル補正もしていなかったのですが、アナログで使った消しゴムの線まで残るほどの再現度の高さ。
消しゴムやブラシのバーを左右にスライドさせると、消しゴムやブラシのサイズを変更することが出来ます。

AdobeCaptureCC

右上にある「スムーズ」をクリックすると、ベクターパスの生成がはじまります。少し時間がかかります。

AdobeCaptureCC

完成したファイルはSVGで保存されます。

 

AdobeCaptureCCとAdobeCreativeCloudの共有

これらのファイルはすべてAdobeCreativeCloudで共有されるので、PhotoshopやIllustratorとのファイルのやりとりがとても簡単。
もしAdobeCreativeCloudが「会社」と「個人」で違うんだー! Cloudでの共有がうまくできないんだ……。なんて方は、AdobeCaptureCCで「マイライブラリ」画面から該当のキャプチャ画像右下の詳細アイコンを選択するとこんな画面がでてきますので、

AdobeCaptureCC

いずれかの方法でライブラリにアクセスが可能になります。

  • 共有>シェイプのリンクを共有(項目「共有先」でメッセージや各種アプリケーションに接続できます)
  • 書き出し形式>形式指定>カメラロールに保存(あとはメッセージなりなんなりで共有可能)

AdobeCaptureCC

 

AdobePhotoshopで開いてみる

AdobeCaptureCC

きれい!!

メニューの選択範囲>色調選択(許容量30)で線画抽出するとこんな感じ。

AdobeCaptureCC

これくらいならレイヤースタイル>カラーオーバーレイでこうできちゃいます。

AdobeCaptureCC

あとはもうちまちまゴミとりをするだけです。もともと大きいサイズで書き出しされているので、印刷に使わないWEBだけの媒体ならもうこのまま着彩してもいいくらいでした。

 

AdobeIllustratorで開いてみる

AdobeCaptureCC

そこまでパスにしてくれるの?! というくらいこまかーくベクターアートにしてくれます。これはAdobeCaptureCCの段階でしっかりレベル補正&ごみ取りをしておくべきですね!

AdobeCaptureCC

ライブペイントと組み合わせるとここまでの所要時間、なんと一時間です。(手抜き着彩なので多々荒がありますがキニシナーイ)

絵を描いて、写メって、ちょっと加工して色を付けて、それが拡大縮小自由自在なベクターアートにできるまでが一時間。

えっ。すごくないですか。
ちょっと感動レベルなんですけど。

 

AdobeCaptureCCを利用した所感

Adobeを使っているなら入れておくべき。

これまでPC作業ばかりだったのでスマートフォンとの連携という点ですっぽ抜けている部分がありましたが、これでかなりの作業効率化が出来そうです!
是非お試しくださいませ!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/adobe-capture-cc/feed/ 0
コーヒーフィルタに印刷するだけ!ラテアート機能付きコーヒーメーカーを開発しました! https://incloop.com/%e3%83%a9%e3%83%86%e3%82%a2%e3%83%bc%e3%83%88%e6%a9%9f%e8%83%bd%e4%bb%98%e3%81%8d%e3%82%b3%e3%83%bc%e3%83%92%e3%83%bc%e3%83%a1%e3%83%bc%e3%82%ab%e3%83%bc/ https://incloop.com/%e3%83%a9%e3%83%86%e3%82%a2%e3%83%bc%e3%83%88%e6%a9%9f%e8%83%bd%e4%bb%98%e3%81%8d%e3%82%b3%e3%83%bc%e3%83%92%e3%83%bc%e3%83%a1%e3%83%bc%e3%82%ab%e3%83%bc/#respond Fri, 31 Mar 2017 15:00:38 +0000 https://incloop.com/?p=11539 ラテアート付きコーヒーメーカー【エイプリルフール】

おしゃれなカフェに入ってカフェラテをオーダーしてみたら、白いカップにとってもカワイイ&キレイなラテアー […]]]>
ラテアート付きコーヒーメーカー【エイプリルフール】

おしゃれなカフェに入ってカフェラテをオーダーしてみたら、白いカップにとってもカワイイ&キレイなラテアート。

そんなオシャレなラテアートを簡単に作りたいっ!!

という声にお応えするべく、インクループのコーヒー好きが集まり開発すること約1年。。。

誰でも簡単にラテアートを楽しめるコーヒーメーカーを開発してしまいました!

使い方はカンタン! オシャレなラテアート機能付きコーヒーメーカー

今回の開発したコーヒーメーカーですが、使い方はとっても簡単です。

1.まずラテアートにしたいイラストをコーヒーフィルターに印刷します。

え

2.イラストが印刷されたフィルタをコーヒーメーカーにセットして、コーヒーを入れます。

※レギュラーコーヒーは大さじ4杯(1杯10g目安)です。

ラテアート付きコーヒーメーカー【エイプリルフール】 ラテアート付きコーヒーメーカー【エイプリルフール】 ラテアート付きコーヒーメーカー【エイプリルフール】

3.カップを置いてスイッチを入れて少し待ちます。

ラテアート付きコーヒーメーカー【エイプリルフール】

4.ゆっくりとカップをおろせば完成です!!!

コーヒーフィルタに印刷したイラストのラテアートができました!!!

ラテアート付きコーヒーメーカー【エイプリルフール】

使い方も通常のコーヒーメーカーと同じ、必要なのはイラストのテクニックだけです。

とーっても簡単にラテアートが作れてしまうコーヒーメーカーがインクループでは大活躍です!

おひとついかがでしょうか??

 

 

 

 

 

 

 

 

 

 

 

 

 

・・・

・・・・・・

・・・・・・・・・

そもそもコーヒーフィルターにイラストを印刷するってどうやればいいの??

( ^ω^)・・・

 

毎年恒例といっても、インクループとしては2回目のエイプリルフールネタでした!

フィルタに印刷するだけでラテアートができるコーヒーメーカーあると面白いかも!?ってことでネタにしてみました。

ちなみに昨年はこんな感じでした。

うそです。すみません。エイプリルフールだから……って某氏にそそのかされて……。・゚・(ノД`)・゚・。でも意外とスキンヘッドもかっこいいですよ、社長。そんなわけで簡易に人物写...
【Photoshop】インクループ社長が髪を切ったようです。 - incloop.com

今回のラテアートはPhootoshopで作ったので、作り方を紹介いたします。

Photoshopによる写真素材を利用した修正ブラシツール・スタンプツールの使い方

会社にコーヒーメーカーが導入されてからというもの、午前中は事務所にコーヒーの大変良い香りが広がるようになりました。

無類の人気を誇るレギュラーコーヒー、最近ではコーヒーマイスターが増えて、インスタントコーヒーを飲んでもこれは本当にコーヒーなのだろうか?と疑問に思う日々を送っています。

本日は火曜日担当の田中氏のイラストを使って簡単なラテアートを作成していきたいと思います。

主なポイントとなるのは

修正ブラシツールスタンプツール

ラテアート付きコーヒーメーカー【エイプリルフール】ラテアート付きコーヒーメーカー【エイプリルフール】

コーヒーの写真と、ラテアートのある写真を用意する。

ラテアート付きコーヒーメーカー【エイプリルフール】 ラテアート付きコーヒーメーカー【エイプリルフール】

これらの主要箇所をコピーして一つのファイルにします。特にラテアートの写真はナカしか使いませんので、上手にくりぬきましょう。

ラテアート付きコーヒーメーカー【エイプリルフール】

必要な部分にシェイプツールを置いて、Ctrlキー+シェイプツールレイヤークリック(Macの場合はCommandキー+シェイプツールレイヤークリック)で、シェイプツールの色の乗っている部分が選択範囲として選択されます。

Ctrlキー+レイヤー(Commandキー+レイヤー)は「レイヤーの中の要素を選択範囲として取り込む」ショートカットキーです。多用しています。便利です。

配置したら形を整え、スポット修正ブラシツールでいらないところをぐりぐりする。

ラテアート付きコーヒーメーカー【エイプリルフール】ラテアート付きコーヒーメーカー【エイプリルフール】

スポット修正ブラシツールは、塗りつぶした範囲を周辺の色味に合わせて自動的に修正できるツールです。写真を修整するときにはごみとりなどにとても有効で、顔についたニキビもぺしっと一発で消せます。塗るだけです。とても簡単。女性にわかりやすく言うとコンシーラー的なものです。

「なんかうまくいかないな」と思う場合も、ブラシのサイズを大きくしたり小さくしたりしてちまちま塗っていきましょう。パンダの顔はキレイに消えてしまいます。

選択範囲の「色域指定」

ラテアート付きコーヒーメーカー【エイプリルフール】ラテアート付きコーヒーメーカー【エイプリルフール】

頂いたイラストから線の部分だけを引っ張りたいので、選択>色域指定から線の黒をピッカーで取ります。

そうするとげじげじみたいなものがぐるっと黒い線を囲みます。そのままコピーして、ラテアート部分にペーストして配置を整えます。

コピースタンプツールを使って線をぽちぽち。

ラテアート付きコーヒーメーカー【エイプリルフール】 ラテアート付きコーヒーメーカー【エイプリルフール】

コピースタンプツールは、Altキーを押しながらスタンプしたい箇所を一度クリックすると、押した場所を基準に別の場所へコピーしてくれます。

文字で読んでもよくわからないと思いますので、コピースタンプツールを選択したのち、適当な場所でAltキー+クリックして、別の任意の場所でぐりぐり塗ってみましょう。どんなふうになるのか体感してみてください。

このコピースタンプツールを使って、先ほどコピーしたイラストの線の部分をぽちぽちしていきます。レイヤーを変えるのを忘れずに! 順番としては、

  1. コピースタンプツールで元レイヤーの任意の箇所をコピーする
  2. イラストの線の上にレイヤーを作成し、線上にコピースタンプツールでなぞっていく
  3. うまくできなかったら元レイヤーに戻って別の場所をコピーする
  4. 再び一番上に配置したレイヤーにスタンプしていく

こんなことの繰り返しになります。

出来上がったら一時的に下のレイヤーにクリッピングマスクしましょう。Altキー+レイヤーとレイヤーの間をクリックでクリッピングすることができます。

選択範囲を使ってリアリティを出す

ラテアート付きコーヒーメーカー【エイプリルフール】ラテアート付きコーヒーメーカー【エイプリルフール】

黒い線の状態になったイラストのレイヤーを「Ctrl+クリック」で選択範囲として読み込みます。このまま選択>拡張をクリック、1ピクセルだけ範囲を拡張します。これをそのまま選択>境界線をぼかすで選択範囲をぼかします。

そのまま選択範囲が効いた状態でレイヤー下のマスクレイヤーラテアート付きコーヒーメーカー【エイプリルフール】をクリックします。

その状態でクリッピングマスクを解除しましょう。

ラテアート付きコーヒーメーカー【エイプリルフール】

できました!

こうやって作るとイラストを使ってラテアートができますよー。

ぜひお試しください!

また来年のエイプリルフールもお楽しみにっ!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/%e3%83%a9%e3%83%86%e3%82%a2%e3%83%bc%e3%83%88%e6%a9%9f%e8%83%bd%e4%bb%98%e3%81%8d%e3%82%b3%e3%83%bc%e3%83%92%e3%83%bc%e3%83%a1%e3%83%bc%e3%82%ab%e3%83%bc/feed/ 0
Photoshopのテクスチャを使って一平ちゃんすっぱムーチョの香りを表現してみた https://incloop.com/photoshop%e3%81%ae%e3%83%86%e3%82%af%e3%82%b9%e3%83%81%e3%83%a3%e3%81%a7%e3%81%99%e3%81%a3%e3%81%b1%e3%83%a0%e3%83%bc%e3%83%81%e3%83%a7%e3%82%92%e8%a1%a8%e7%8f%be/ https://incloop.com/photoshop%e3%81%ae%e3%83%86%e3%82%af%e3%82%b9%e3%83%81%e3%83%a3%e3%81%a7%e3%81%99%e3%81%a3%e3%81%b1%e3%83%a0%e3%83%bc%e3%83%81%e3%83%a7%e3%82%92%e8%a1%a8%e7%8f%be/#respond Fri, 09 Dec 2016 03:01:05 +0000 https://incloop.com/?p=9723 一平ちゃんすっぱムーチョ

カップ焼きそばの定番ともいえる一平ちゃん。 最近ではショートケーキ味が出たのが話題になりましたね。 弊社事務所 […]]]>
一平ちゃんすっぱムーチョ

カップ焼きそばの定番ともいえる一平ちゃん。
最近ではショートケーキ味が出たのが話題になりましたね。
弊社事務所のA氏は、ショートケーキ味を求めて何件も何件も、
コンビニやスーパーに探し回り…

そして、

やっと見つけて嬉しすぎたのか、ショートケーキ味の焼きそばをキラキラさせていました(笑)

昨日発売した「一平ちゃんショートケーキ味」を仕入れてテンションが振り切れています!網干です!見てくださいこの包装!クリスマスにふさわしいデザインがたまりませ...
JavaScriptで星のように輝くエフェクトを表示して一平ちゃんショートケーキ味の画像をキラキラさせる方法 - incloop.com

おかげでここ何日かはお昼の事務所がいちごと焼きそばの絶妙な香りが漂っていました(;’∀’)(笑)

一平ちゃん梅味?いや、すっぱムーチョ味だ!

一平ちゃん梅味
出典:明星 一平ちゃん夜店の焼そば すっぱムーチョさっぱり梅味

実は私、梅が大好きなんです。
すっぱムーチョ大好きなんです!!!
あの甘じょっぱさ…たまんないですよね(*´ω`)

 

スーパーで見かけた瞬間、つい手にとってカゴに入れてしまいましたっ(笑)

そして…楽しみにしていたこの瞬間。お湯を注いで3分!!
一平ちゃん梅味

ふりかけをかけた瞬間、

「すっぱムーチョの香り…!」と歓喜(*´ω`)
すっぱムーチョの袋を開けた、あの瞬間のふんわりいい香りが…!

 

…あぁ、この梅の香りをなんとか表現したい!

なにかいい方法はないか…?いや、あの方法があるではないか!!!

一平ちゃん梅味の香りをPhotoshopのフリーテクスチャで表現してみよう

Photoshopで梅味の香りをテクスチャを用いて表現するために、
おすすめの「梅」Photoshopフリーテクスチャをご紹介します。

Photoshop梅テクスチャ

出典:和風柄

Photoshop梅テクスチャ

出典:Asian Patterns

Photoshop梅テクスチャ

出典:Ume10

Photoshopのフリーテクスチャをダウンロードし、読み込ませる

Photoshopのフリーテクスチャをダウンロードしたら、Photoshopでパターンの読み込みが必要になります。
読み込ませるための方法は以下になります。

    • Photoshopのフリーテクスチャをダウンロードする

Photoshopのフリーテクスチャ

    • ダウンロードしたファイルを解凍する

Photoshopのフリーテクスチャ

    • ファイルの拡張子が「pat」になっていることを確認する

Photoshopのフリーテクスチャ

    • Photoshopの「塗りつぶし」ツールを選択

Photoshopのフリーテクスチャ

    • パターン⇒パターンの読み込みを選択

Photoshopのフリーテクスチャ

    • 読み込みたいパターンを選んで読み込みをする

Photoshopのフリーテクスチャ

    • パターンテクスチャの読み込み完了!

Photoshopのフリーテクスチャ

Photoshopのフリーテクスチャの使い方

今回は「すっぱムーチョの香り」を演出したくて、ふんわりやわらかいイメージ&赤みを出すような
表現をしてみました。
Photoshopのフリーテクスチャの使い方は様々あり、いろいろなやり方を紹介しているサイトもたくさんあるので
ぜひ検索してみてくださいね!
私は今回以下の方法でPhotoshopのフリーテクスチャを使ってみました。

  • 焼きそばの写真を選択した状態にします。
  • Photoshopテクスチャの使い方

  • 下のメニュー「fx」を選択し、レイヤースタイルを追加します。
  • Photoshopテクスチャの使い方

  • レイヤースタイルの中の「パターンオーバーレイ」を選択します。
  • Photoshopテクスチャの使い方

  • 描画モードを「乗算」、不透明度を「40%」、パターンを「梅柄」を選択します。
  • ※プレビューにチェックをつけるとプレビュー画面が見れるので便利です。比率は大きいほど柄が小さくなり、比率が大きいほど柄が大きくなります。(お好みでOK)
    Photoshopテクスチャの使い方

  • 完成!
  • ふんわり梅が香る気がします(*’▽’)(笑)
    一平ちゃん梅味

いかがでしたか?
これで思いのまま、梅の香りが表現できるはずです…!

 

☆一平ちゃん梅味すっぱムーチョのお味の感想☆

すっぱ~~~~ムーチョ!!!(*´ω`)でした。
酸味もあっておいしかったです。

あと一回くらいは食べたいかも?
(やっぱり普通の焼きそばがいい)

 

ご馳走様でした!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/photoshop%e3%81%ae%e3%83%86%e3%82%af%e3%82%b9%e3%83%81%e3%83%a3%e3%81%a7%e3%81%99%e3%81%a3%e3%81%b1%e3%83%a0%e3%83%bc%e3%83%81%e3%83%a7%e3%82%92%e8%a1%a8%e7%8f%be/feed/ 0
スクリーンショットPC版のおすすめフリーソフトはこれだ!【私のお気に入り♪】 https://incloop.com/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88pc%e7%89%88%e3%81%ae%e3%81%8a%e3%81%99%e3%81%99%e3%82%81%e3%83%95%e3%83%aa%e3%83%bc%e3%82%bd%e3%83%95%e3%83%88%e3%81%af/ https://incloop.com/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88pc%e7%89%88%e3%81%ae%e3%81%8a%e3%81%99%e3%81%99%e3%82%81%e3%83%95%e3%83%aa%e3%83%bc%e3%82%bd%e3%83%95%e3%83%88%e3%81%af/#respond Thu, 17 Nov 2016 08:44:51 +0000 https://incloop.com/?p=9351 スクリーンショットフリーソフト

パソコンを使う上で必ずといっていいほど活用するスクリーンショット。 最近ではスマホでもスクリーンショットをする […]]]>
スクリーンショットフリーソフト

パソコンを使う上で必ずといっていいほど活用するスクリーンショット。
最近ではスマホでもスクリーンショットをする機会が増えてきた気がします。
「その画面スクショしといて」なんて略した言葉も
50歳をすぎた母にも伝わるようになってきました(;’∀’)
あぁ、デジタルな世界になったもんだと実感してしまう今日この頃です。

無料で使えるスクリーンショットのフリーソフトは豊富にある

検索すればたくさんのフリーソフトがでてきて、どれにしようかな…と迷ってしまうほど
たっくさんありますよね。私も今までいろんなソフトを使ってきましたが、
今は一つのソフトに絞ってそれを愛用させてもらってます。

今日はその便利なソフトをご紹介しますね。

PCでスクリーンショットするならフリーソフトの「screenpresso」!

検索しても実はなかなか出てきません。私もインクループに入社してから初めて知りました。

まだあまり浸透されていないようですが、その実力は私の中ではNO.1でございます。
インクループのスクリーンショットに関する記事は以前にもいくつかご紹介しています。

パソコンの画面をキャプチャしてブログに貼り付けたり、パワーポイントに貼り付けたりする機会って非常に多いと思います。以前、ブログで紹介した「WinShot」もキャプチ...
画面をキャプチャしてすぐに矢印や文字などの注釈を書き込める「SCREENPRESSO」が便利すぎる - incloop.com
何かと弊社ではパソコン画面のスクリーンショットもといキャプチャすることが多いです。画面を撮るために、キーボードにあるPrintScreenキーを押して~フォルダ開いて~...
「スクリーンショット」でパソコンの画面を簡単にキャプチャ(撮る)方法! - incloop.com
スクリーンショットscreenpressoの特徴

  • 画面のキャプチャ(範囲指定、全画面、全スクロール画面も可能)
  • 動画のキャプチャ
  • キャプチャした画面の編集(書き込み、トリミング、ぼかしなど)

screenpressoインストール方法

screenpressoのダウンロードはこちらからできます。

http://www.screenpresso.com/

インストールの方法はこちらの記事でご紹介しているので、ぜひご参考下さい。

パソコンの画面をキャプチャしてブログに貼り付けたり、パワーポイントに貼り付けたりする機会って非常に多いと思います。以前、ブログで紹介した「WinShot」もキャプチ...
画面をキャプチャしてすぐに矢印や文字などの注釈を書き込める「SCREENPRESSO」が便利すぎる - incloop.com

screenpressoを使って画面をキャプチャしてみた

screenpressoがインストールできたら、早速画面のキャプチャをしてみましょう。

1.キーボードの [Print Screen] キー ([Prt Sc] キー) スクリーンショットボタンを押します。
(キーボードの右上に位置しています)
スクリーンショットのPCボタン

2.範囲を選択して画面をキャプチャできます。
こんな感じにキャプチャしたものを自由に編集できちゃいます!
screenpressoで画像を加工した

screenpressoの編集ではいろんなことができます!

  • 矢印
  • 四角の枠、円の枠の挿入
  • テキストの挿入
  • 吹き出しテキストの挿入
  • 番号付け
  • マーカー
  • ぼかし
  • 画像を挿入
  • ルーペ
  • 波括弧の挿入

screenpressoの使い方

画面キャプチャをしたら、ワークスペースの中に自動的に保存されます。
スクリーンショットを簡単にできる

キャプチャした画像をダブルクリックすると編集画面がでてきます。
スクリーンショットを簡単にできる

あとは自由に編集して、ツール左上にある「確定」を押せば出来上がりです♪
スクリーンショットを簡単にできる

screenpressoではオプション機能も豊富!

screenpressoにはSNSと連携ができる機能がついていたり、
保存する画像の形式(PNG、IMG、GIFなど)の変更もできたりします。
ワークスペースの保存先の設定を変更や動画キャプチャのマイクの設定など
高度な設定をすることができます。
2016-11-17_11h58_27
スクリーンショットは、「簡単」「早く」「便利」が全部そろっていることが本当に使いやすい条件だと思ってます。
まさにscreenpressoは全部を満たしてくれるソフトだと日々ありがたく使用させて頂いております(*’▽’)!

無料で使えるおすすめの画像加工ソフトもご紹介

screenpressoはスクショや簡単な編集でよく愛用させてもらってますが、
アイキャッチやバナー作成などもできる無料画像加工サイトもここでちょっとご紹介しちゃいます!

>アイキャッチ作成に便利!ブラウザ上オンラインサービスで画像の文字入れや編集ができるサイト「BANNER KOUBOU.com」と「fotor」こちらの記事でfotorについて取りあげ...
知ってる?おしゃれかわいい!Facebook・Twitterのプロフィール画像を誰よりも最速で作れるサービス「fotor」を使いこんでみた - incloop.com

これはデザイナーの久保田さんが作ってくれたもので、
写真をこのようなデザインに加工することができます。(無料でここまでできちゃいます!)
スクリーンショットを簡単にできる

しかも!お役立ち編集機能として、シミ取りや美肌、目元のメイクまでできちゃいます。
こういったものはフォトショップでしかできない機能だと思ってたので、本当に驚きです。
ブラウザ上で加工するので、動作も軽くて本当に使いやすいですよっ(*’▽’)

 

ぜひみなさまもご活用くださいませ!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88pc%e7%89%88%e3%81%ae%e3%81%8a%e3%81%99%e3%81%99%e3%82%81%e3%83%95%e3%83%aa%e3%83%bc%e3%82%bd%e3%83%95%e3%83%88%e3%81%af/feed/ 0
【Photoshop】モノクロの魅力と美しい白黒写真の作り方 https://incloop.com/%e3%80%90photoshop%e3%80%91%e3%83%a2%e3%83%8e%e3%82%af%e3%83%ad%e3%81%ae%e9%ad%85%e5%8a%9b%e3%81%a8%e7%be%8e%e3%81%97%e3%81%84%e7%99%bd%e9%bb%92%e5%86%99%e7%9c%9f%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9/ https://incloop.com/%e3%80%90photoshop%e3%80%91%e3%83%a2%e3%83%8e%e3%82%af%e3%83%ad%e3%81%ae%e9%ad%85%e5%8a%9b%e3%81%a8%e7%be%8e%e3%81%97%e3%81%84%e7%99%bd%e9%bb%92%e5%86%99%e7%9c%9f%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9/#respond Fri, 23 Sep 2016 03:41:26 +0000 https://incloop.com/?p=8398 白黒写真の作り方

白黒映画の女優さんの口紅は、今だとあきれるくらいドギツイ赤か黒リップだったというお話があります。某映画では赤い […]]]>
白黒写真の作り方

白黒映画の女優さんの口紅は、今だとあきれるくらいドギツイ赤か黒リップだったというお話があります。某映画では赤い椿を表現するために椿を黒く塗った、なんて逸話も存在します。

白黒映画の照明は基本太陽光で、まあ、もう、それだけでいろいろお察しなくらい大変な撮影現場だっただろうと思うのですが、白黒映画って魅力的ですよねぇ。

モノクロが人に与える視覚的効果とは

色彩情報が一切ない状態を白黒と言います。つまり、ここでの白と黒は色ではない、ということです。「白い絵の具も黒い絵の具もあるじゃん!」ということもありますので、あえて「ここでは白も黒も色じゃないんだよー」って言います。

じゃあなんなんだよ、って言われたら「光」と「影」という回答が一番しっくりです。

 

浮世絵から派生して漫画に親しんでいる我々日本人は、すべてのものの中に「線」を見るのですが、西洋のほうではそういった文化がなく、色の濃淡ですべてを表現していました。向こうの人々が浮世絵にハマったのは19世紀の仏万博あたりからですが、日本人の「光」と「影」の間を見極める目は至極面白いものと思っています。

この光と影のあわいにはこの世ならざるものが棲みやすい、とか言われる傾向もあって、墨文化だった日本は、カラーの油絵文化の西欧よりも「美しい白と黒の対比」に反応しやすいんですね。

白黒写真やモノクロ映画が「ノスタルジックだ」「昔のような」あるいは「ちょっと怖い」なんて言われるのはこのあたりが結構根幹です。もちろん、写真技術のスタートが白黒写真だったから、ということもあるのでしょうが、日本人の光と影を見極める能力というのは結構高いんじゃないかと個人的には思っています。

白黒写真のよさは「光と影」つまり「明暗」で決まる

フルカラーの写真でも、必ず「明暗」つまり「明度」が存在します。写真内における明度の差が大きければ大きいほど、白黒写真は美しいものが多いです。(個人の感性によりますが、何せ当方ビビット&バリット、が大好きな人間でして)

実は白黒写真だけでなく、フルカラーの写真でも「明暗がくっきりしている」=「明度の差が大きい」ものは実にはっきりくっきり見えます。明度の差が大きい、ということは、光と影の差がはっきりしているということで、これは物の形を強調します。

形の強調されたものは人にとって明瞭さとなります。印象深い白黒写真はこの明瞭さゆえに心に残りやすいと言えなくもないですね。

 

Photoshopで加工してつくる白黒写真

いくつか方法がありますが、ただ調整レイヤーで彩度を落としただけだとまったくもって味気ない写真になります。彩度だけ落とすとこんな感じ。

 

2016-09-23_11h26_10

「明度」によって良しあしが変わるのであれば、この明度をコントロールしていきましょう。例えばフルカラーのままコントラストを上げて、これの彩度を引っこ抜くとこんな感じ。

 

白黒写真の作り方

 

明度を変化させてみる、というポイントさえ押さえれば、やり方っていろいろあるんですね。

白黒調整レイヤーを使用した加工のポイント

上記の大半をまるっとやってくれるのが白黒調整レイヤーです。適応させるとこんな画面になります。

白黒写真の作り方

ベースとなるカラーは水の色と金魚の赤。このうち、金魚の赤をより暗く、水の揺らめきをより白くします。応じてカラーバーをコントロールしてみてください。こんな感じ。

白黒写真の作り方

だいぶ雰囲気変わりましたね。

これに広告業界お得意の一色サシ色、なんてことをやるとこんな感じ。

白黒写真の作り方

もうちょっと頑張って奇麗にするとこんな感じ。

白黒写真の作り方

もう少し頑張りましょう、な加工ですが、単に適応した調整レイヤーにマスクをかけただけなので、誰でもできちゃいますね。

「マスクってなんだよ!」って方もいらっしゃるかと思いますが、それはまた今度。ちなみに色を乗せるだけなら、オーバーレイか覆い焼き、スクリーンでこんなこともできます。

白黒写真の作り方

ちなみに「赤」と「黒」の相性はすこぶるよく、白黒映画の時代には艶やかで鮮やかな赤を出すためによく黒が使われたそうです。なので、白黒写真に一筋の赤、というのもやっぱり似合うのですね。もちろん、赤だけにとどまりません。プレミアムモルツのCMの鮮やかな金と青を目立たせるための「モノトーン」は、毎回早くおうちかえってビール飲みたい症候群にさせますね。

白黒写真の作り方白黒写真の作り方

ちなみにこんなやり方も。

簡単3ステップ!Photoshopで白黒写真を作る

黒のエッジを生かしたい場合はこちらもすごい綺麗ですが、グレースケールを生かしたい場合はちょっと不向きかもしれません。

加工でどうにかなるとしても、白黒写真の「モト」も大事。

そもそもPhotoshopによる写真加工は、もとの写真がそこそこいいことが条件です。いくらPhotoshopでもボケた写真を商品撮影されたような形でくっきりさせることはできませんし、向こう向いている人をこっち向かせる、なんて魔法もできません。(意外とこれをわかってくれない人は多いのです)

白黒写真を広告などで使うメリットは「形の強調」「物の強調」にあります。商品の形や、訴えたい絵面の形、その光と影、色彩情報を排除してなお訴えられる「自信」の意味も含まれます。逆に言えば自信がないなら白黒はやめとけ、ってことですね。

 

あと、あれ、なんだ。かっこいいじゃないですか、白黒って。

そういうシンプルなの、大事ですよ。ええ。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/%e3%80%90photoshop%e3%80%91%e3%83%a2%e3%83%8e%e3%82%af%e3%83%ad%e3%81%ae%e9%ad%85%e5%8a%9b%e3%81%a8%e7%be%8e%e3%81%97%e3%81%84%e7%99%bd%e9%bb%92%e5%86%99%e7%9c%9f%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9/feed/ 0
Photoshopのオーバーレイをもっと深く考えてみる https://incloop.com/photoshop%e3%81%ae%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%83%ac%e3%82%a4%e3%82%92%e3%82%82%e3%81%a3%e3%81%a8%e6%b7%b1%e3%81%8f%e8%80%83%e3%81%88%e3%81%a6%e3%81%bf%e3%82%8b/ https://incloop.com/photoshop%e3%81%ae%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%83%ac%e3%82%a4%e3%82%92%e3%82%82%e3%81%a3%e3%81%a8%e6%b7%b1%e3%81%8f%e8%80%83%e3%81%88%e3%81%a6%e3%81%bf%e3%82%8b/#respond Fri, 02 Sep 2016 06:49:15 +0000 https://incloop.com/?p=7706

以前こちらの記事で >【Photoshop】レイヤーの描画モードにあるオーバーレイって何? オーバーレイは魔法 […]]]>

以前こちらの記事で

【Photoshop】レイヤーの描画モードにあるオーバーレイって何?

オーバーレイは魔法の描画モードなのです、と言っておりました。

実際写真加工やイラスト編集などをしていると、オーバーレイというのは本当に魔法のような機能で、CLIP STUDIO PAINTやIllust Studio、SAIなどのお絵かきソフトでも必ずと言っていいほど搭載されている機能です。

 

が、実際のところこいつの機能をきちんと把握して使ってらっさる方は結構少ないんですね。

設定の仕方や適応の仕方は結構あちこちで説明されているのですが、もう少し詳しくオーバーレイというものについて考えてみようと思います。

 

オーバーレイとは「乗算」と「スクリーン」を組み合わせた機能である

だいたいどのソフトでもオーバーレイは「乗算」と「スクリーン」を組み合わせた機能である、と説明されます。

じゃあ何に対して「乗算」して何に対して「スクリーン」するの? 結果どうなるの? ってとこなんですが、その前に前提としてこの仕組みを理解するには必要な知識がいくつかあります。

 

「基本色」と「合成色」の定義

2016-09-02_15h15_59

基本色

レイヤーに乗せられた色のことです。写真であれば、ファイルを開いた時点の背景レイヤー、イラストであればブラシで色を乗せたレイヤー、とにもかくにも「加工対象」であるレイヤーにのっている色のことを「基本色」といいます。

合成色

加工対象であるレイヤーに対して、加工要素を持っているレイヤーにのっている色のことです。基本色ののっているレイヤーの上に大概は配置されます。

描画モードの切り替えにより、加工要素を持つレイヤーは下の加工対象のレイヤーに影響を及ぼします。このとき影響を及ぼす側の色を「合成色」といいます。

 

基本色はケーキのスポンジみたいなもので、合成色はデコレーション用のいちごとかチョコレートとかそんな感じです。油絵を描くときのカンバスが基本色、上に乗せる色が合成色、という言い方もできます。

 

「RGB」と「CMYK」と色の「混合」

RGBとCMYKの違いについてはこちらで

WEBサイトの色や配色を決めるときに役に立つWEBサービス5選

一度記事を書きましたが、改めて簡単に言うと、

 

RGB

光の三原色。レッド・グリーン・ブルーの頭文字をとってRGB。全部混ぜると白になります。

 

CMYK

物理的に存在する色。シアン・マゼンダ・イエロー・ブラックの頭文字や末文字を引っ張ってCMYK。全部混ぜると黒になります。

RGBvCMYK

今回覚えていただきたいところは

  • RGBは全部混ぜると白になる=カラーバーの数値がMAXだと白になる
  • CMYKは全部混ぜると黒になる=カラーバーの数値がゼロだと白になる

ということです。もっと言い方を変えると、

  • RGBは全部混ぜると白になる=カラーバーの数値が高いものがハイライトの扱いになる
  • CMYKは全部混ぜると黒になる=カラーバーの数値が低いものだとハイライトの扱いになる

という逆の性質を帯びるということです。

「シャドウ」と「ハイライト」とは

上記のRGBとCMYKの特性から、

 

  • RGB=「合計数値の高い色がハイライトとしての特性が強く、低い色がシャドウとしての特性が強い」
  • CMYK=「合計数値の低い色がハイライトとしての特性が高く、高い色がシャドウとしての特性が強い」

 

ということです。

オーバーレイの「乗算」と「スクリーン」が適応される範囲

じゃあ結局オーバーレイの乗算ってどこにかかって、スクリーンってどこにかかるの? ということにお答えすると、計算式を出さなければならなくなります。

すっごい詳しく説明していただけているのがこちらのサイトさま。

 

Photoshopの描画モード(ブレンドモード)を理解するための、画像合成は計算だという話 | 俺CG屋

 

「乗算」と「スクリーン」の機能を同時に扱えるオーバーレイは、「コントラストをあげる機能」を持っている、と言い換えることができます。

でもそれだけなら調整レイヤーでトーンカーブでS字つくっときゃなんとかなるんです。あとほかにもいろいろ調整レイヤーでコントラストなんかいくらでもあげられますからね。

オーバーレイを使うメリットは「色を使える」という点になります。(誤解がないように言うと、トーンカーブでも色味をつけることは大いに可能で、これ一本あれば大概のことはできちゃうのですが、今回は割愛)

 

オーバーレイを使った色彩を加えたコントラストの表現をいくつかご紹介。

 

まず原本がコチラ。右下にあるカラーがオーバーレイ100%の合成色です。

0001

0002 0003

0004 0005

 

オーバーレイの特徴の一つとして「輪郭がかすまない」というのは取り上げられるべきところかと思います。ホワイトや高いハイライトでスクリーンをかけたときほどラインが消えないのは、オーバーレイの「暗い部分を乗算する」機能のおかげです。

また、ブレンドモードの「カラー」や「色彩」、調整レイヤーの「色相」からカラーの統一などの機能を使わずとも、たやすく画面全体に「色味」が持たせられるのも特徴です。

 

次にコチラ。同じく右下にあるカラーがオーバーレイ100%の合成色です。

006

007 008

009 010

 

わずかな色味の変化でもずいぶん異なる表情を持たせることができます。うまくやれば朝昼晩に異次元と、一枚の写真で数多くのバリエーションを持たせることができます。

もちろんレイヤー一面に同じ色、ではなく、グラデーションを使ったり、ブラシツールでピンポイントに別の色をオーバーレイさせることもできます。細やかな変化が可能なのは、感性の自由度の高いPhotoshopのレイヤー機能ならではですね。

 

画面上の空気や統一感を出したいとき、コントラストの微細な変化を出したいとき、オーバーレイはやっぱり魔法じみた効果を出してくれます。

 

 

 

……といっても、私どっちかってゆうとトーンカーブ派なので、オーバーレイってあんまり使わないんですけどね……絵を描く人には結構重宝される機能だって、偉い人が言っていた気がします。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/photoshop%e3%81%ae%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%83%ac%e3%82%a4%e3%82%92%e3%82%82%e3%81%a3%e3%81%a8%e6%b7%b1%e3%81%8f%e8%80%83%e3%81%88%e3%81%a6%e3%81%bf%e3%82%8b/feed/ 0
【Photoshop】複数、多量の画像を一度、一括で処理する方法 https://incloop.com/%e3%83%90%e3%83%83%e3%83%81%e5%87%a6%e7%90%86/ https://incloop.com/%e3%83%90%e3%83%83%e3%83%81%e5%87%a6%e7%90%86/#respond Fri, 26 Aug 2016 03:03:48 +0000 https://incloop.com/?p=7537

WordPressのテーマにこういうのがあります。 http://wp-shotoku.com/ 可変グリッド […]]]>

WordPressのテーマにこういうのがあります。

http://wp-shotoku.com/

Shotoku

可変グリッドレイアウト、あるいはリキッドレイアウトフレキシブルレイアウト、と呼ばれています。ギャラリー、ポートフォリオといったコンテンツとはすこぶる相性のいいレイアウトです。

 

ポートフォリオ

英語直訳だと書類を運ぶ平らなケースのこと。紙入れ、札入れといったものですが、ファイルや書類ケースとほぼイコールで、美術業界、デザイン業界では「自己作品集」、金融業界ではリスク管理のための「金融商品の組み合わせ」のことを言います。ここでのポートフォリオは「自己作品集」に近い意味合いです。

 

jsによってレスポンシブが成り立つこのレイアウトですが、この間このレイアウトを実行したときに、「同じサイズの画像を使っているはずなのに、どうにもこうにも並び順がきちんと順番通りにならない」という現象に出くわしました。

 

バグかなぁ、なんて某シンプルオーダー開発者A氏や某WEB上女優Y氏と話をしていたのですが、今朝になって某A氏が「やっぱり画像サイズでした」とさくっと解決してくれましたブラーヴォ! まーべらす! すみませんその画像サイズつくったの私です!

 

たった1ピクセル画像サイズが違うだけで、可変グリッドレイアウトはきちんと作動しない場合があるということが判明しました……。

(使ったWordpressテーマはこちら>>gridsby フリーバージョン)

 

そんなわけで今回は「Photoshopで多量の画像を一括処理する」方法です。

 

Photoshopで複数ファイルを一度に操作できる「一括処理」「自動処理」「反復処理」

 

Photoshopのメニューから「ファイル」を選択すると、下のほうに「自動処理」という項目があります。

今回使うのは以下の項目。

 

バッチ

いわゆるBatch処理というやつで、意味としては「ひとたば」みたいな感じです。複数の段階を踏む処理をひとたばにして、これを繰り返し自動的に適応し連続処理をしていくこと。なお、複数の段階を踏む処理のことを、Photoshop上では「アクション」と定義しています。

 

ドロップレットを作成

上記であったバッチ処理をアイコン化し、ドラッグ&ドロップするだけでバッチ処理を開始してくれるようになります。バッチ処理をまとめて「ここにおいてくれたら実行するよー」的なやつですね。

Dropが「落とす」という意味でDropletsは水滴のような意味です。

 

手順

  • アクションを作成する
  • バッチ処理を適応する
  • 【応用】バッチ処理をドロップレットにする

アクションとはその名の通り「action」で「行動」を主に示します。Photoshop上で行ったすべての行動を全部丁寧に記録してくれる機能です。

今回は引っ張り出してきた画像をすべてモノクロの画像に変換する、というアクションを作ります。

2016-08-26_11h35_38

  1. 画像を開く
  2. アクションパネルの下にある「▶」再生ボタンをクリック
  3. 調整レイヤ―>白黒>プリセット>ブラック最大
  4. 調整レイヤ―>トーンカーブ
  5. レイヤーをダブルクリック>レイヤースタイル>パターン「乗算」適応
  6. 画像を任意のフォルダに保存して閉じる
  7. アクションパネルの下にある「■」停止ボタンをクリック

以上でアクションの作成が終了です。

 

バッチ処理を適応する

  1. メニュー「ファイル」>自動処理>バッチをクリック
  2. 「実行」で繰り返すアクションを選択。(セット>アクションはアクションパネルを参照)
  3. 「ソース」で自動処理を行いたいファイルを選択(オプションは任意で選択)
  4. 「実行後」で任意の処理を選択(ここではフォルダを選択し選択したフォルダに保存する)
  5. 「ファイルの名前」でファイルドキュメントの名前や拡張子、シリアル番号などの指定ができるのでこちらも任意
  6. OKで実行。任意のフォルダにバッチ処理が適応されたファイルが生成されていく

 

【応用】バッチ処理をドロップレットにする

2016-08-26_11h35_49

  1. ドロップレットを保存する場所を選択する
  2. ドロップレットにドラッグ&ドロップしたときに実行するバッチ処理をアクションから選択する
  3. 「実行後」で任意の処理を選択(ここではフォルダを選択し選択したフォルダに保存する)
  4. 「ファイルの名前」でファイルドキュメントの名前や拡張子、シリアル番号などの指定ができるのでこちらも任意
  5. OKで実行。ドロップレットの上に任意のファイルをドラッグ&ドロップすると、任意のバッチ処理が実行される。

 

ただ単に画像だけ処理したいのであれば、バッチ処理のほうが便利。

Photoshopの画像アセット生成機能を利用しても、似たような画像の生成は可能ですが、全ての画像をモノトーンにしたい、すべての画像に同じようなフレーズを同じ位置に入れたい、なんて時にはバッチ処理のほうが断然便利です。邪道ですがすべての画像を一定の基準に基づいてリネームをしたい、なんてときにもバッチ処理は便利です。

ちなみにIllustratorでもバッチ処理は可能です。ドロップレットはないんですけどね。

 

毎回毎回なんか同じ作業してるー! という方は、バッチ処理、便利ですよ。

とりあえず画像を全部同じサイズにするところからスタートしてます、なんて人は、ドロップレットを専用で作っておいて、「あ、写真きた? じゃあ作業しますねー」な感じでさっくりドロップレットに写真をドラッグ&ドロップしてからコーヒーとか淹れちゃって、戻ってきたらもう画像がそろってます、なんて、とても優雅。それやりたい。

 

同じサイズの画像を使うときには、何が起こっているのかわからないので、洗い出しのつもりでドロップレットかけておいたほうがいいかもしれませんね、ということがわかった今回のあれそれでした。

 

そのサイトの公開は九月いっぴになるそうです。わあい。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/%e3%83%90%e3%83%83%e3%83%81%e5%87%a6%e7%90%86/feed/ 0
チラシやパンフレットといった紙媒体の広告を打ちたいと思ったときに知っておくと得をする紙媒体の広告ツールの種類 https://incloop.com/%e7%b4%99%e5%aa%92%e4%bd%93%e3%81%ae%e5%ba%83%e5%91%8a%e3%83%84%e3%83%bc%e3%83%ab/ https://incloop.com/%e7%b4%99%e5%aa%92%e4%bd%93%e3%81%ae%e5%ba%83%e5%91%8a%e3%83%84%e3%83%bc%e3%83%ab/#respond Fri, 19 Aug 2016 04:48:52 +0000 https://incloop.com/?p=7440

電子媒体が主力となりつつある今でも、意外と需要があるチラシやパンフレット。地域や業種によってペラの一枚チラシが […]]]>

電子媒体が主力となりつつある今でも、意外と需要があるチラシやパンフレット。地域や業種によってペラの一枚チラシが有力だったり、三つ折りのきちんとしたパンフレットが有力だったりしますが、「いったいウチは何を作ったらいいのだろう」とお悩みの企業さんは多いのではないでしょうか。

 

そもそもパンフレットとリーフレットとフライヤーとポップとカタログとチラシの違いってなによ、と思っている方も多いかと思います。そもそも何を作ればいいのかわからない、ってそりゃ専門じゃないなら当然でございますな。

 

今回は紙でできる「広告宣伝のための紙媒体広告ツール」の有名どころをご案内しようかなぁと思います。

意外と、ポスティングのチラシだけが広告ツールじゃないんですよ。

0001

 

短期の告知に有効的なチラシ

新聞に挟まれていたり、路上でキャッチのおにいちゃんおねえちゃんが配っていたりするアレです。語源は「散らし」で、もともとは路上で配ることが目的として刷られた印刷媒体のことです。

似たようなものに「ビラ」がありますが、これはチラシのような印刷物ですが、その使用用途が異なり、壁に張るものとして使われていました。が、今では「ビラ配り」という言い方もされるようになり、チラシとビラはほとんど同じものとして認識されています。

 

チラシやビラは基本的に1枚の紙で構成されるため、折ることを前提としない場合は、業界によっては「ペラ」と呼ばれます。「ペラいち構成です? 両面?」なーんてよく口にしますがこれは「両面デザインでチラシ一枚構成ですか?」って聞いているのとイコールです。

 

ちなみに両面のことを略して「リャン」というデザイナーにもあったことがあります。麻雀好きだったんですかねぇ。

 

チラシの平均サイズ:A4~B2版(多いのはA4とA3)

チラシの目的:ポスティング、チラシ配り、新聞折り込み

チラシの寿命:1週間~1ヵ月(紙の厚さがそんなにない+情報の劣化が早いため)

多量の情報提供に有効的なパンフレット

0002

装丁がされたりハードカバーがつけられたりしていない「冊子」こと。装丁があったりハードカバーがあったりした場合は「書籍」になります。

UNESCOでは「表紙を除いて5ページから48ページまでのもの」というのが定義のようです。

 

パンフレットの中でも高級な紙を使用したり、特色を使ってキラキラにしたり、エンボス加工などを施したりする、ちょっとリッチなデコっちゃってるパンフレットのことをブローシャーといいます。

 

会社案内や事業部説明、商品やサービスの細かい説明をするときに非常に有効的な広告ツールで、会社全体のやつが一つあると営業さんがやりやすいアレです。観光地などにも頻繁に置かれていますが、掲載情報量が比較的多めの場合は、パンフレットを利用するといいと思います。

 

パンフレットの平均サイズ:A7~A3(変形アリ)

パンフレットの目的:会社案内、企業説明、商品説明、サービス説明、マニュアル

パンフレットの寿命:半年~2年(情報内容に安定性があれば割と長寿です)

情報量はないけれどチラシよりはしっかり作りたい場合のリーフレット

0003

パンフレットとは異なり、1枚の紙を折りたたんで制作する簡易的なパンフレットのようなもの。「葉」が由来なのでコンパクトなのが特徴です。A4三つ折りサイズが平均的ですが、最近では変形や四つ折り、蛇腹のように長くなっているものまでさまざまです。

 

その特性から「会社案内ほどではないけれどしっかり写真や情報を伝えたい」といった時に非常に重宝します。情報量は少ないけれど写真を魅せたい、写真数は少ないけれど文字量がそこそこ、といった時は、パンフレットよりリーフレットのほうがリーズナブルになるケースが多いです。非常に汎用性の高い媒体と言えます。

 

リーフレットの平均サイズ:A5~A3(変形アリ)

リーフレットの目的:メニュー、特定の商品案内、簡易的な会社・サービス案内、イベントの告知、施設のマップ等

リーフレットの寿命:3ヵ月~2年(情報内容に安定性があれば割と長寿です)

チラシと同じだけどちょっとリッチなフライヤー

過去は飛行機やらヘリやらでまいていたために「フライヤー」だそうです。今そんなことをやったら法に触れます。だいぶ迷惑な所業です。

 

現在では、ほぼほぼチラシと同意味になりつつありますが、フライヤーは比較的コンパクトかつ厚みのある紙を使用するのがテンプレです。チラシがポスティングや路上での配布に使用されるのであれば、フライヤーはお客様に「持って帰っていただくもの」「手に取ってもらうこと」を目的としています。今ではフライヤーも配りますけどもね。サイズ的にはA4以下の場合がとても多く、形も定型にこだわりません。丸とか花とかあります。

 

なので、チラシ・ビラ・フライヤーは、現段階では「ほとんど違わないよ!」と言えます。外国産チラシがフライヤーです。

でもインクループにご依頼いただけるときはニュアンスの違いで私が混乱するので、使い分けていただけるとすごくありがたい。

 

フライヤーの平均サイズ:A4以下(変形アリ)

 

フライヤーの目的:イベント宣伝、割引券、特定商品の簡易案内

 

フライヤーの寿命:1ヵ月~半年(チラシよりかは長寿です。紙しっかりですから)

商品を並べてご説明!品目を紹介するカタログ

0004

いわゆるパンフレットの一つなのですが、「商品や展示物などの品目を整理して書き並べたもの」という点で、通常のパンフレットとは使用目的が一線を駕して異なった独自の発展を遂げたツールです。目録、とか、説明書、とか、そんな感じですね。

 

なので、UNESCOの「表紙を除いて5ページから48ページまでのもの」という前提にとらわれません。某有名通販のカタログなんか何百ページあるんだよ状態ですし、結婚式の引き出物によくあるアレも50ページのお話じゃございません。

もちろん品目が並べられているのであれば「カタログ」なので、ペラいちでもカタログです。夏の限定の品ぞろえとかはペラいちで十分ですね。

 

カタログの平均サイズ:A3以下(変形アリ)

カタログの目的:商品の品目紹介、案内、説明。

カタログの寿命:1ヵ月~2年(サイズや情報量、紙質によって異なります)

固定ユーザーにダイレクトに届けるDM

0005

ダイレクトメールです。おはがきですね。普通は割引がついていたり、特典がついていたりします。住所がないとどうにもならないので、固定客を持っていらっしゃる企業様対象になります。

 

型抜きや、折を入れたり穴をあけたりする加工タイプのものもあり、割とバリエーションは豊か。箱に入れて届けるのもアリです。ダイレクトメールがはがきでなければならない理由なんてどこにもないんですね、ようはポストに入ればいいのです。

あんまり大きかったり立体だったりするとコストはかさみますが、インパクトには残ります。ポスティングをしたときに、他のチラシに交じって捨てられないようにするには有効的なツールかもしれませんね。

 

DMの平均サイズ:A4以下(変形アリ・投函可能サイズ)

DMの目的:特定のイベントや商品の告知

DMの寿命:1週間~3ヵ月(DMは基本的に単発です。期限付きの集客をしたいときに)

ブランディングのデザイン的象徴にもなるショップカード

「もう一回行きたいけどあのお店なんだっけ」と名前も電話番号も検索したワードもすっぽぬけたお客様のために、一枚用意しておくと潜在的リピーターのロスが少なくなる、飲食系業者様にわりと必須なのではないかと思うカードです。私みたいにデザインがよければひたすら収集癖があるやつもいます。

 

地図とショップ名、連絡先、QRコードくらいで構成されるカードは、割とデザイン勝負なところがあります。チェーン展開しているなら各店舗の紹介も必須。特にショップのブランディングに一役買ってくれるカードです。

 

余談ですけどショップカードの整理にお薦めなのがコチラのアプリ

>Eight サイトのムービーがめっちゃ面白い。

 

ショップカードの平均サイズ:名刺サイズ(財布に入るサイズがベストです)

ショップカードの目的:ショップの告知

ショップカードの寿命:1年~(お店のコンセプトを変えるまで)

みんな知ってるPOP

Point Of Purchase advertisingの頭文字をとってPOPなので、「ポップ」と呼ぶのは本来間違いなのですが知ったことか。ポップはポップです。

色々な種類があることで有名なPOPですが、目的が「買うときのポイントを示す広告」であれば全部POPです。卓上スタンド、パネル、プライスカード、商品説明カード、タペストリやのぼりといったサインディスプレイも厳密にいえばPOPで、正直商品を売るために作られた広告は全部POPです。

 

サイズや媒体によって寿命もさまざま。定型もないので、「こんなの作れないのかしら」があると結構割となんだって作れます。

お店を持っているならチェック!サインディスプレイ

上記でのぼりタペストリ、と書きましたが、それだけにはとどまりません。店先にある商品サンプル食品サンプルをはじめとし、LED看板、エスカレーターの手すりの装飾や天吊り、立体看板、店頭で動画を流せるデジタルサイネージ、パネル、ターンテーブルの展示台からライトアップから水を使ったアクションまで、サインディスプレイは進化し続けています。

 

興味がある人は最新のジャパンディスプレイ行ってみるとよろしいかと。

>SIGN & DISPLAY SHOW 2016 9/1~9/3

入場券はメールを送ると招待券をもらえて無料になります。それ以外の場合は500円(税込)

 

 

いっぱいありましたね。疲れました。

 

でもここに紹介したのは広告媒体のしかも紙媒体のごくごく一部でして、WEBを含めるとまだまだいっぱいあるのです。次はWEB系で何かまとまったツール紹介をしてみたい……。

これから何かチラシを作ろうと思っている方は、一度「何を作るのか」「どんな目的か」「どれくらいの内容量か」「どのくらいの期間つかうのか」というのを見直し、媒体選択に不安があれば、デザイナーに相談してくださいませ。全く答えられないデザイナーに頼むのはやめたほうがいいと思いますな。

 

しかしそろそろWEBのこと話したらどうですかね、私。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/%e7%b4%99%e5%aa%92%e4%bd%93%e3%81%ae%e5%ba%83%e5%91%8a%e3%83%84%e3%83%bc%e3%83%ab/feed/ 0
フォントの基礎と知っておくべき有料和文フォントについて https://incloop.com/%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%81%ae%e5%9f%ba%e7%a4%8e%e3%81%a8%e7%9f%a5%e3%81%a3%e3%81%a6%e3%81%8a%e3%81%8f%e3%81%b9%e3%81%8d%e6%9c%89%e6%96%99%e5%92%8c%e6%96%87%e3%83%95%e3%82%a9%e3%83%b3/ https://incloop.com/%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%81%ae%e5%9f%ba%e7%a4%8e%e3%81%a8%e7%9f%a5%e3%81%a3%e3%81%a6%e3%81%8a%e3%81%8f%e3%81%b9%e3%81%8d%e6%9c%89%e6%96%99%e5%92%8c%e6%96%87%e3%83%95%e3%82%a9%e3%83%b3/#respond Fri, 08 Jul 2016 05:48:57 +0000 https://incloop.com/?p=6432

>「現在メンテナンス中のため… 」WordPress エラー 対処 でT氏が頑張って >【Photoshop】 […]]]>

「現在メンテナンス中のため… 」WordPress エラー 対処 でT氏が頑張って

【Photoshop】背景を透過した状態で燃えるロゴを作成するチュートリアル を作ってくれたようですが

どうにもわかりにくかったようで、ううん。人に伝えるというのはかくも難しい事なのですね……

T氏、「桜焔」でやるならこれくらいやらんと。

img001

一時間タイムアタックしたトレス作業は最後のほうにぺっと動画のっけておきますネ。

T氏のそもそもの失敗はアレ、フォントのチョイスが間違っているっていう点です。

22.Owen

なんかの行書体だとは思うんですがどれかなー。

そもそもフォントとは何か

フォントというのは書体データのことで、日本語だけでも数多くのフォントがあります。有料から無料まで様々ですが、ローマ字フォントと違って日本語フォントは割高です。なぜなら日本語フォントは「ひらがな」「カタカナ」「漢字」と、必要とする最低限のデータの量が圧倒的に多いためです。

常用漢字以外にもデータを保有しているフォントはますます割高になります。名前でも「高」のハシゴダカと普通のタカでは別のデータになるわけですし、頭株やツメ文字などさまざまな文章のルールがある日本語は、きっちりフォントデータを作ろうと思うと果てしない年月がかかるのです。

フォントファミリーとフォントウェイト

フォントファミリー:フォントの種類になります。MSゴシックだったりMS明朝だったり、小塚ゴシックだったり小塚明朝だったり。

フォントウェイト:フォントの太さになります。エキストラライト、ライト、レギュラー、ミディアム、ボールド、ハイボールド、エキストラボールド、ウルトラボールド等といった表記のほかに、数字のカウントアップだったりします。

これだけは知っとけ有料和文フォント5選

新ゴ|モリサワ

交通安全の表記なんかにもよく使われる代表的なゴシックフォント。困ったらこれ使っとけば8割どうにかなる。

マティス|フォントワークス

知る人ぞ知るエヴァンゲリオンのタイトルで使われているフォント。隠れてエヴァフォントなんて読んでました。今はマティスよりもモリサワのリュウミンを愛している浮気者です。

ヒラギノ|株式会社SCREENホールディングス

マッキントッシュのデフォルトフォント。ゴシックと明朝両方あります。愛しています困ったらこれ使っとけば8割どうにかなると思っているフォントその2。

小塚|Adobe

Adobe先生御用達の小塚さん。ゴシックと明朝両方あります。割と使い勝手はいい子ですが、大人しめなのでシチュエーションは選びがち。

平成明朝|ダイナコムウェア株式会社

すっきりとした日本語のための日本語フォント。ゴシックと明朝両方あります。こちらもわりと使い勝手が良いのですが、すきっとしすぎているのでシチュエーションを選びます。

文字を加工するときのフォントの選び方

【Photoshop】背景を透過した状態で燃えるロゴを作成するチュートリアル でも申し上げました通り、フィルターというものはピクセル上にしかかかりません。つまり「ピクセル範囲の小さいもの」にはあまり効果が見えないものなのです。

したがっていくらレイヤースタイルの「境界線」や「ドロップシャドウ」を広げてピクセル範囲を広げても、前面にくるフォントサイズとかみ合わないのでマッチングしないのですね。

また、行書体というのファミリーは日本語独特の「縦に書く」文字に特化したフォントです。はらいや留めが柔らかいこのフォントは、基本的に横に力が働かず、流れるようなイメージを人に与えます。言ってしまえば水のようなフォントなんですね。

そんなフォントがファイヤされるとどうなるか、がT氏のものになるわけです。

そんじゃ上手に焼けましたできるフォントはどんなものなのか、というと

  • 肉厚であること(焼ける肉はデカければデカいほどリッチ)
  • 重々しくあること(重いフォント=フォントウェイト=太いフォントは存在感を増します)
  • 華やかであること(ファイヤさせるならフラワさせて花火してるほうが華やかです。とくに和イメージなら)

イチオシはコレ。

名称未設定-1

ファイヤさせるとこう。

名称未設定-2

ちなみに同じ色にすると私でもファイヤしません。

名称未設定-3

邪悪な何かの波動をビシバシと感じますね。

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%81%ae%e5%9f%ba%e7%a4%8e%e3%81%a8%e7%9f%a5%e3%81%a3%e3%81%a6%e3%81%8a%e3%81%8f%e3%81%b9%e3%81%8d%e6%9c%89%e6%96%99%e5%92%8c%e6%96%87%e3%83%95%e3%82%a9%e3%83%b3/feed/ 0
【Photoshop】背景を透過した状態で燃えるロゴを作成するチュートリアル https://incloop.com/%e3%80%90photoshop%e3%80%91%e8%83%8c%e6%99%af%e9%80%8f%e9%81%8e%e3%81%a7%e7%87%83%e3%81%88%e3%82%8b%e3%83%ad%e3%82%b4%e3%82%92%e4%bd%9c%e6%88%90/ https://incloop.com/%e3%80%90photoshop%e3%80%91%e8%83%8c%e6%99%af%e9%80%8f%e9%81%8e%e3%81%a7%e7%87%83%e3%81%88%e3%82%8b%e3%83%ad%e3%82%b4%e3%82%92%e4%bd%9c%e6%88%90/#respond Fri, 01 Jul 2016 01:30:38 +0000 https://incloop.com/?p=6327

先日ふらっと背後に立ったY氏がさらりとこんなことをおっしゃいました。 「ロゴ燃やしたいんですけど……」 「あー […]]]>

先日ふらっと背後に立ったY氏がさらりとこんなことをおっしゃいました。

「ロゴ燃やしたいんですけど……」

「あー、ありますなぁどうにもダッサいロゴってホント消滅すればいいのにって心の中で嘆くこと!」

「いやあの本当に燃やしたいんです」

やだな電子の世界をライターであぶるのは無理ですよ。あぶるのはエイヒレだけにしましょうか。

WEB上ではpngを中心にgif、最近はSVG等背景が透過された状態でのロゴが重宝されます。いちいち背景色に合わせてjpeg画像を作るのは骨がぽっきんこですからね。

チュートリアルだけみたい!って方は一番下に動画ぺっと貼っておきますね。

前提として覚えておくと応用が利くこと

ピクセルで構成されているPhotoshopデータはいかようにでも動かせる

テキストやシェイプ、Illustratorデータから持ってきたベクタースマートオブジェクト、Photoshop上で形成したスマートオブジェクトデータを、ピクセルの状態に落とし込むことをラスタライズといいます。

炊いた米(編集可能なテキストやシェイプ、スマートオブジェクト)を五目炊き込みご飯(ピクセル)にするような感じです。五目炊き込みご飯はあとは食べるだけでそれ以上の加工ができない(いやおにぎりにすることはできるでしょうがここはひとつできないってことにしてください)状態です。

ピクセルになったデータは油絵のキャンバスにのっている絵具と同じような扱いができます。上に重ね塗りしたり伸ばしたりすることが「自由に」できるんですね。

Photoshopのフィルター適応範囲

フィルターは基本的に「ピクセルデータ」の上にしかかかりません。透明な部分やテキストデータにはかけられないんですね。

最近はスマートオブジェクトにかけられる「スマートフィルター」というものがあり、あらゆる要素をスマートオブジェクト化しとけば何とかなったりします。今回はスマートフィルターではなくて通常のフィルターを使ってやっていきます。

ドロップシャドウでフィルターが適応される範囲を広げる

ドロップシャドウで枠を形成

フィルターがピクセルデータの上にしかかからない原理を利用して、とりあえずフィルターをかける場所を作成します。ドロップシャドウで文字の外側に、上へ立ち上る炎を想定した枠を作ります。

テキストとレイヤースタイルをラスタライズし、ピクセルデータにフィルターを適応する

フィルターをかける

作成したドロップシャドウのついたテキストデータをラスタライズ、さらにレイヤースタイルもラスタライズします。右クリックで項目が出ます。

作ったデータを90度傾け、フィルターから「風」を適応。

フィルターをかける

さらにガウスを適応。

この工程を2回ほど繰り返し、90度傾けたオブジェクトをもとに戻します。

指先ツールで動きをつけて炎を表現する

指先ツール

指先ツールで、強度を変更しながら適当に炎の動きを表現します。ペンタブでやってもいいとは思いますが、別にそこまでしなくても結構いい感じになります。

指先ツール

こんな感じで

2016-07-01_09h36_43

ハイこんな感じ。

レイヤースタイルで着色する

2016-07-01_09h37_00

光彩(内側)でグラデーションを選び、「エッジ」にチェックを入れてグラデーションをコントロールします。オレンジですが当然青い炎も作れます。

うおおおおおもえろおおおおお

こんがり上手に焼けましたー!

2016-07-01_09h37_54

背景に黒を置いていますが、ご覧のようにきちんと炎ともども自由に動けます。

場合によっては「ロゴを燃やすなんて不謹慎よー!」なんて言われてしまうこともありますので、TPOを把握したうえでのご使用をどうぞ。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/%e3%80%90photoshop%e3%80%91%e8%83%8c%e6%99%af%e9%80%8f%e9%81%8e%e3%81%a7%e7%87%83%e3%81%88%e3%82%8b%e3%83%ad%e3%82%b4%e3%82%92%e4%bd%9c%e6%88%90/feed/ 0