簡単・時短【Illustrator】芝生とコルクテクスチャーの作り方

Illustrator内でどうにかそれっぽい芝生とコルクを作れないかなと試行錯誤していたところ、簡単!時短!な方法を見つけたので紹介していきたいと思います。
どちらもメイン画像に扱う(芝生やコルクを主役にして扱う)というよりは、背景にそっと使用したい場合に向いているかなと思います!
さくっと作ってみましょう!

※あくまでも個人的な主観で書いております。
※動作確認/環境:Windows10/IllustratorCC2021

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

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

▼芝生の作り方

①下準備

※説明がしやすいようにある程度のサイズを決めております。

・縦600px横900pxの長方形を[長方形ツール]から用意します。
・長方形の色を[04a82b(緑)]にします。

②効果をつける1

・[効果]→[ピクセレート]→[点描]を選択しセルの大きさを10にします。

③効果をつける2

・[効果]→[効果ギャラリー]→[ブラシストロークのストローク(スプレー)]を選択し、ストロークの長さ20、スプレー半径23、ストロークの方向を右上から左下にします。


この段階で、遠目から見たら芝生っぽく見えてきていますが近くで見るとガビガビしているので違和感のないように整えていきます。

④効果をつける3

・[効果]→[ぼかし]→[ぼかし(ガウス)]を選択し、ぼかし下限を0.5にします。(容量が気になる人はこの単元を飛ばしても問題はありません)

⑤整え

このままでも良いのですが、よく見ると白い部分がまばらにあるので色味調整をしていきます。
・再度同じ大きさの長方形を作成します。
・色は[8de55a]
作成したら、先ほど効果をつけた芝生のオブジェクトの上に重ねます。(整列ツール使うと便利です)

・上に重ねた長方形のオブジェクトを選択し、透明パネルの乗算を選択します。透明パネルがない場合は[ウィンドウ]→[透明]で開いてください。

▼コルクの作り方

①下準備

※説明がしやすいようにある程度のサイズを決めております。

・縦600px横900pxの長方形を[長方形ツール]から用意します。
※完成後は上下左右に一部白い部分ができるので、少し大きめに作成し、最後にマスクをかけることをお勧めします。
・長方形の色を[d1a882(薄めの茶)]にします。

②効果をつける1

・[効果]→[効果ギャラリー]→[光彩拡散]を選択し、決めの度合い4、光彩度0、透明度10にします。


ぱっと見て分かり辛いですが、一面塗にすこしボツボツした点が追加されました。これを起点に効果を掛けていきます。

③効果をつける2

・[効果]→[効果ギャラリー]→[アーティスティックの塗料]を選択し、ブラシサイズ1、シャープ8、ブラシの種類を幅広(ぼかし)にします。

④効果をつける3

・[効果]→[効果ギャラリー]→[アーティスティックのパレットナイフ]を選択し、ストロークの大きさ9、ストロークの正確さ3、線のやわらかさ3にします。

⑤効果をつける4

・[効果]→[効果ギャラリー]→[ブラシストロークのはね]を選択し、スプレー半径25、滑らかさ15にします。


▼さいごに

実際にはIllustrator上でPhotoshopの機能であるフィルタギャラリーを使用していますが、イラレ上で完結できると思いのほか便利です。
色々試して自分のやりやすいようにしてみてください!
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

【PowerPoint】資料作成【わかりやすいレイアウト/分かりやすい資料】

今回は、PowerPoint(パワーポイント/パワポ)などの資料作成について、極力シンプルで情報量少なくわかりやすいレイアウトを紹介します。


目次


テキスト構成

まずはページに乗せるテキスト情報を箇条書きで設定します。
載せる情報を先に「メモ帳」などで作成してまとめ、決めておくことで、効率的にレイアウト作業に集中出来ます。

文字量は多めにしておき、後ほど短く集約して伝わる(読んでもらえる)文章量に落とし込みます。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる

箇条書きしていた文章をコピペしてザックリと配置していきます。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる

各項目名の文字サイズを説明文より一回り大きく変更して優先度を高くします。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる

さらに、各項目名の中でも優先度順に文字サイズを一回り大きくします。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる

説明分の方にも優先度順に文字サイズを変更してしき、長めに用意していた文章を要約して短くして伝えられる文章量に落とし込みます。

表題やキャッチコピーは1行で、

大項目は2行で、

その他の説明文も最大3行~4行でまとめる意識を持てれば、伝わる文章量の出来上がりです。
※みっちり長々と書かれた文章は読む気力を削いでしまいます。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
この状態でテキストの設定は完了です。

続いて、目線の誘導と関連項目のグループ化がおこなえる、余白設定(ホワイトスペース)を施します。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
余白設定はレイアウトの要です。
詰め込みがちな資料に十分な空間を持たせることで、読み手(資料を確認する人)に「わかりやすさ」と「親しみやすさ」をイメージしてもらえます。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
ここまでシンプル化出来れば必然的にわかりやすい文章量とレイアウトになり、装飾が無くても伝わる状態になっています。


面と線を使った装飾

それでは、「面」と「線」を使った装飾に移りますが、
構成のNG例を展開します。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
面を使った題名の装飾例ですが、
「圧迫感」「威圧感」があり、構成も一辺倒なため、固い印象を与えてしまいます。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
こちらは、やってしまいがちな枠線の入れ子オンパレードです。

目が回りますし、注力ポイントも判別できず、不鮮明で不安な印象を与えます。

【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
こちらは、装飾表現は被りもなく特徴的/説明的で問題ないですが、テキスト文章量の要約を怠った際に見られる状態です。

多くを伝えよう、よりよく分析しようと気持ちが先行すると、読み手を意識出来ない圧倒的な文字量を構成してしまいます。

そうなると、「読みたくない」「読まれない資料」が出来上がってしまい、プレゼンの際にも文字を追うことで気が飛び、頭に入ってきません。

表現の被り、「面」と「線」の優先度/訴求力に注意して装飾すればレイアウトの完成です。
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
「面」と「線」の優先度については、塗りの面積量で判断できます。

塗り面積の狭い「線の表現」は、
塗り面積の広い「面の表現」には勝てません。

より目立たせたい項目には塗りの表現を施し、文字を白抜きしてコントラストを高めて存在感を増します。

装飾が完了したら、最後に色で華を添えて仕上げです!
【資料作成】シンプルでわかりやすいレイアウトを面と線で仕上げる
「ブランドカラー」「サービスカラー」をメインカラーとして多くを使い印象付けをし、挿し色アクセントカラーで「トピックポイント」際立てます。

「赤」は警戒色/警報色ですので、適切に使って親しみやすさを維持させましょう。

「見やすく」「わかりやすく」「親しみやすい」資料に見えますでしょうか。


さいごに

資料を作るとき、多くを伝えたくなり、それぞれ情報の優先度が平均化してしまいます。

取っ掛かりのワードをストレスなく見てもらうことで、次の優先度の訴求に関心が生まれ自然と目が移動します。

細部の細かい文字や説明まで読んでもらえれば十分な訴求が完了していることと思われます。

今回の情報が、毎日の資料制作にプラスになれば幸いです。
次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

【Photoshop】簡単!Adobe Camera Rawで荒い画像を綺麗にする方法

こんにちは、藻です。
今回のテーマは 「【Photoshop】Adobe Camera Rawで荒い画像を綺麗にする方法」です。

撮った写真やネットでゲットした写真素材を使おうと思ったとき、
「あれ…画像、荒くない?」ということに直面したことはありませんか?私はよくあります。綺麗に撮れるはずのiPhoneで撮影したのになんだかぼんやりかすんでいる…。暗い…などなど!

そこで、Photoshopのプラグイン、Adobe Camera Rawでノイズ軽減をして簡単に画像を綺麗にする方法を紹介します!

今回はサンプル用に画質をガビガビにしたこちらのパンの画像をきれいにしていこうと思います。

※フリー素材です。

またおまけ程度ではありますが、このツールを使用して写真としての
クオリティをあげるコツも紹介します。

使用するソフト
■Photoshop 2020
※Camera Rawフィルターはもともと入っているプラグインです。


目次


1.Adobe Camera Rawとは?

Adobe社が提供しているPhotoshopのプラグインです。
本来はデジタル一眼レフなど高品位な写真編集を行い、
Rawデータを現像するためのツールです。(※Rawデータは現像用データのことです!)
しかしながらこのツールではjpegといった通常の画像も編集することが可能です。
画像の編集に特化しており、バーを触って調整していくだけで
機能に詳しくなくとも美しい画像を作る ことができます。
ちなみにAdobeからはLightroomというRawデータ現像用ソフトも出ており、似たように写真の編集・色合い調整が可能です。が、Camera rawはそのままPhotoshopの加工にも入れるところが魅力ですね。Photoshopのみで編集を完結することができます!

2.Adobe Camera Rawでノイズ軽減をしよう

先ほど載せたiPhoneで撮影した画像を綺麗にしていこうと思います!
Photoshopにノイズを軽減するフィルター自体はあるのですが、
Camera Rawの方が詳細に設定ができるためより綺麗に画像を補正できます。
フィルターでCamera Rawフィルターを起動するとこのような画面が表示されます。

今回使うのはここ、ディテール欄!

確認しながら作業するためにこのように100%以上に拡大して作業するようにしましょう。
それにしても画像の荒さが余計にわかりますね…。

ノイズがかっていてこれではおいしそうなパンのアピールができません…。
さっそく補正していきましょう。

個人的には[カラーノイズの軽減]→[ノイズ軽減]→[シャープ]の順に調整してから
全体の調整をすることがおすすめです。
操作方法は簡単で、スライダーを右に少しずつずらしていくだけです。
一気に右にずらしてしまうとむしろ不自然になってしまうこともあるので、
様子を見ながら行います。

写真の中でも暗い箇所にはノイズが発生しやすいため、漏れなく画面全体を注意していじります。

だいぶ軽減されましたね!

さて、全体を見てみます。

全体は記事だとわかりにくいかもしれませんが;;当初のような荒い印象はなくなりました。
数値は写真によってまちまちのため参考程度ではありますが、こんな感じになりました。

画質がきれいになるまででいいや!という方はここでOKを押して完了となります。あっという間ですね!

3.さらにちょっとした手間で写真のクオリティを上げよう

画質自体はだいぶ改善されましたね。しかしなんとなく写真自体としてはまだいまいちなのは事実です。ほんの少し手を加えるだけでより雰囲気の良い写真にすることができます。
次に使うのはここ、基本補正欄 です。

項目が多くあるのですが、今回は絞ってこの4つのみで行いましょう。
ここだけでも十分に調整できます(*•̀ᴗ•́*)و ̑̑

あとは様子を見ながら先ほど同様にスライダーを左右に動かして自分好みに仕上げてください!実際に触ってみれば直感的に行えるはずです。
私はパン屋さんらしい温かみを出したかったため色温度を黄より(右側)に調整しました。そうして出来上がった画像がこちらです。

だいぶ雰囲気も変わったのではないでしょうか?
アイキャッチに使用したのはこちらの補正後のものなのですがなかなかいいはず…!

今回は4つの項目のみで補正しましたが、他の項目も慣れてきたら触ってみるとさらに表現の幅が広がるかと思います!

4.最後に

いかがでしたでしょうか?
Adobe Camera Rawを使うことでPhotoshopで通常通り補正するよりも一気に、かつ簡単に様子を見ながら画像の補正ができます!
せっかく用意した画像がうまく撮れていない…といったときにあきらめず試していただけたらと思います٩(๑^o^๑)۶
以上、最近寒さに勝てていない藻でした。

【Illustrator】和風柄 簡単!パターンの作り方

今回は和風柄パターンの作り方を紹介していきたいと思います!
年末年始や、もちろん普段から和風柄を使いたいなと思ったときに和風柄パターンが自分で用意できると便利ですし、アレンジもできるので楽しいですよ!一度作ってしまえば、編集したりして改修できるのでまずは作ってみましょう!

※個人的な主観、作り方で書いておりますので参考にどうぞお役立てください。

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

◎目次◎

縁起の良い末広がりの意味も込めて、今回は8種類の和風柄パターンの作成手順を紹介していきます!
見たい柄を選んでくださいね♪

1.市松2.鱗3.鹿の子4.七宝つなぎ(線ver/塗ver)5.青海波6.麻の葉7.毘沙門亀甲8.矢絣

さいごに

いかがでしたでしょうか?
一部の和風素材を作るだけで、簡単にパターンが作れました!
和風柄は今回紹介した以外にもたくさんあります!
こちらの記事を参考に様々な和風柄にチャレンジして自分だけの和風柄パターンを作ってみてくださいね♪
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

和風柄パターン 8.矢絣

8.矢絣

柄の意味
射た後の矢は戻ってこないことから婚礼の際の縁起物として用いられたり、破魔矢のように邪気を払う意味も込められている。

作り方

※説明がしやすいようにある程度のサイズや色を決めております。

【1】横30px 縦100pxの長方形(色992032)を1つ用意します。
【2】右側の上下アンカーポイントのみ選択し、縦の半分のサイズ下に動かします。今回は50pxになります。

【3】オブジェクトと同じくらいの長方形を作り、オブジェクトの右側垂直に、ほんの少し重ねます。(この部分が矢絣の真ん中の部分になります。)

【4】次にそのまま1つ複製し、元の画像は長方形を消し、複製した方はパスファインダーの交差で型抜きします。

【5】型抜きした方が上に来るようにして右下ぞろえをします。
整列ツール使うと楽です。

【6】[Ctrl+K(環境設定→一般)]で30(横幅)を入力します。
・オブジェクトを選択し[Alt+→(右矢印)]で複製。
・[Alt+O+T+E→垂直(オブジェクト→変形→リフレクト→垂直)]でオブジェクトを反転させます。

【7】背面のオブジェクトと真ん中のオブジェクトが左右それぞれバラバラになっているので、パスファインダーで合体します。

【8】[Ctrl+K(環境設定→一般)]で100(最初に用意した長方形の縦)を入力します。
・オブジェクトを選択し[Alt+↓(下矢印)]で複製。
・色の調整をしました。(追加色ea738a)

【9】作成した素材をスウォッチに登録します。
オブジェクトを全選択し[スウォッチ(なければウィンドウから表示)]にドラッグします。


【10】スウォッチに登録したものをダブルクリックし、スウォッチオプションを開きます。

一言でいえば、矢のとんがりは初めに用意した長方形の縦半分のサイズを動かす場合のみ有効って感じですね。(私のやり方なので他にいい方法があるかもしれませんが…)
上手くいかない場合はパターンオプション編集時に、プレビューで
見えてる部分を拡大してオブジェクトのズレを調節することをお勧めします。


→戻って他の柄を見る


和風柄パターン 7.毘沙門亀甲

7.毘沙門亀甲

柄の意味
亀甲とは亀の甲羅を言い、長寿の意味を持っている。
七福神の毘沙門天の鎖鎧に三盛亀甲をつなげた形から毘沙門亀甲と呼ばれるそう。

作り方

※説明がしやすいようにある程度のサイズや色を決めております。

【1】角の部分が上に来るように高さ120pxの六角形(色c8beed)を用意します。
【2】用意したら横幅のサイズを確認して[Ctrl+K(環境設定→一般)]に数字を入力します。今回は、103.923です。
・オブジェクトを選択し[Alt+→(右矢印)]で複製。

【3】複製して六角形が2個並んでいる状態を、グループ化[Ctrl+G]してさらに複製します。複製したら、片方のオブジェクトを
[Alt+O+T+E(オブジェクト→変形→リフレクト)]で画面を開き、角度の部分に120と入力してOKします。(正三角形の集まりなので)

【4】以下の二つの画像を、三角形になる様に合わせた時に上に六角形1個、下に2個来るように整列ツールで揃えます。

【5】パスファインダーの合体で1つのオブジェクトにします。

【6】線の淵を使って毘沙門亀甲の柄を入れましょう。
ここでは線の位置をすべて内側に揃えます。
・内線8px(色b7a780)を追加しました。

【7】今作ったオブジェクトを1つ複製します。
線の幅をより太くして、(今回では)紫の部分が良い感じにほっそりする様に調整します。今回は内線44pxにしました。

【8】次に[オブジェクト→パス→パスのアウトライン]で分解、
[パスファインダー→分割(左下にある)]でオブジェクトを分割します。
そしたら、真ん中のオブジェクトをダイレクトツールでコピー&ペーストし、元のオブジェクトはいらないので消しちゃいます。


【9】内線8pxのオブジェクトが下になる様に、整列ツールで中央に揃えます。この時、真ん中のオブジェクトの色を淵と同じ(色b7a780)にしました。

【10】作成した素材をスウォッチに登録します。
オブジェクトを全選択し[スウォッチ(なければウィンドウから表示)]にドラッグします。

【11】作成した素材をスウォッチに登録します。
オブジェクトを全選択し[スウォッチ(なければウィンドウから表示)]にドラッグします。


→戻って他の柄を見る


和風柄パターン 6.麻の葉

6.麻の葉

柄の意味
麻の葉は成長が早くまっすぐに成長することから、子供の健やかな成長を願う意味が込められている。

作り方

※説明がしやすいようにある程度のサイズや色を決めております。

【1】以下の図形を用意します。
・角の部分が上に来るように、
 高さ120pxの六角形(色8fc31f)→淵幅2px/塗なし
・角の部分が上に来るように、
 高さ120pxのスターツール(色8fc31f)→頂点6個/淵幅2px
※星の頂点の数は[ドラック状態+↑(上矢印)]で増やせます。
を用意します。

【2】六角形の向かい合う点同士をパスで三か所線を引きます。
(向かい合う点をクリックする感じで)

【3】スターツールの図形の方も、谷側の向かい合う点同士をパスで三か所線を引きます。(向かい合う点をクリックする感じで)

【4】六角形もスターツールも引いた線は淵の色に合わせます。
そのあと、2つのオブジェクトを選択した状態で角の形状を「丸」にします。(既に丸の状態でも念のため)

【5】整列ツールで、垂直、水平方向を中央に揃えて2つのオブジェクトを重ね合わせます。
背景が欲しい場合は、同じサイズの六角形(色009944)を作成し、最背面に配置します。

【6】作成した素材をスウォッチに登録します。
オブジェクトを全選択し[スウォッチ(なければウィンドウから表示)]にドラッグします。

【7】スウォッチに登録したものをダブルクリックし、スウォッチオプションを開きます。


→戻って他の柄を見る


和風柄パターン 5.青海波

5.青海波

柄の意味
穏やかな波がずっと続く様子から永く続く幸せや平和な暮らしへの祈りが込められている。

作り方

※説明がしやすいようにある程度のサイズや色を決めております。

【1】同心円グリッドツールから以下のオブジェクトを用意します。
見当たらない場合は「/(直線ツール)」の中、それでもない方はツールバーの一番下にある「…」をクリックし出てきた画面の右上の「三」
から詳細設定選んで探してみてください。

【2】作成された同心円の線の淵6px 線の色8cdaf9にします。
今回は最背面に塗3fa9eaの丸を配置しました。

【3】作成した素材をスウォッチに登録します。
オブジェクトを全選択し[スウォッチ(なければウィンドウから表示)]にドラッグします。

【4】スウォッチに登録したものをダブルクリックし、スウォッチオプションを開きます。


→戻って他の柄を見る


和風柄パターン 4.七宝つなぎ(線ver/塗ver)

4.七宝つなぎ(線ver/塗ver)


柄の意味
四方のどの方向にも永遠に続き,縁起のよいことから、「四方」→「しっぽう」→「七宝」と呼ぶようになった。
円(縁)が繋がり続けていることから、円満や調和などの願いが込められている。

作り方(線ver)

※説明がしやすいようにある程度のサイズや色を決めております。

【1】150px(色ff99cf)の丸→淵幅2px/塗なし
を用意します。実はこれでもう準備OKです。
【2】作成した素材をスウォッチに登録します。
オブジェクトを全選択し[スウォッチ(なければウィンドウから表示)]にドラッグします。

【3】スウォッチに登録したものをダブルクリックし、スウォッチオプションを開きます。


        

作り方(塗ver)

※説明がしやすいようにある程度のサイズや色を決めております。

【1】150px(色ff99cf)の塗りあり、淵なしの丸を用意します。
【2】[Ctrl+K(環境設定→一般)]で150を入力します。
・オブジェクトを選択し[Alt+→(右矢印)]で複製。
・複製したオブジェクトを選択し[Alt+↓(下矢印)]で複製。
・さらに複製したオブジェクトを選択し[Alt+←(左矢印)]で複製。
※オブジェクト同士が並んで複製されればやり方は何でもOK

【3】[Ctrl+K(環境設定→一般)]で半分の75を入力します。
・どれか1つオブジェクトを選択し、4つの丸の真ん中に来るように1つ複製します。

【4】[パスファインダー→切り抜き)]をします。
この時、真ん中の図形が一番上に来るように重ね順を調整してください。

【5】作成した素材をスウォッチに登録します。
オブジェクトを全選択し[スウォッチ(なければウィンドウから表示)]にドラッグします。

【6】スウォッチに登録したものをダブルクリックし、スウォッチオプションを開きます。


→戻って他の柄を見る


和風柄パターン 3.鹿の子 

3.鹿の子

柄の意味
鹿の背の斑点に似ていることから鹿の子と名づけられている。

作り方

※説明がしやすいようにある程度のサイズや色を決めております。

【1】以下の図形を用意します。
・50px(色eb6100)の正方形→淵幅10px/塗なし/角丸10
・正方形の中に適度なサイズの丸を配置

【2】オブジェクトを全選択し絞りのクシュっとした感じを
[効果→ラフツール]で少し加えます。

【3】[オブジェクト→アピアランスの分解]
   [オブジェクト→パス→パスのアウトライン化]をします。
※編集が出来なくなるので注意です。
【4】オブジェクトを45度回転させます。

【5】作成した素材をスウォッチに登録します。
オブジェクトを全選択し[スウォッチ(なければウィンドウから表示)]にドラッグします。

【6】スウォッチに登録したものをダブルクリックし、スウォッチオプションを開きます。


→戻って他の柄を見る