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着色編]でお会いしましょう!

*簡単!Illustrator素材を作ろう『さくら』編*

こんにちはもしくはこんばんは!
デザイン業務に関わっております、スガです!
春を迎え、お店にはさくらをテーマにした限定グッズを見かけますね。

さぁ今回はそんな『さくら』をIllustratorで簡単に描くメイキングを
書かせて頂きます。簡単にできます。角度が上手くいかない!
問題ございません!1つ作ると多用できますのでとても便利かつ
今の時期には持ってこい、な内容になっております。
—————————————————————-
★作成環境:Illustrator CC(作成に於いてCSシリーズも対応)
★動作確認:Windows7
★所要時間:12分(慣れると5分)
—————————————————————-
*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼ラインナップ

今回ご紹介します『さくら』のタイプは3パターン。
基本作成の仕方は同じです。最後の調整のみ変わります。

▼『さくら』メイキング

■【Ctrl+N】またはファイルの新規よりA4のアートボードを開きます。
 今回、カラーモードはRGB

■ツールの楕円形ツールで円を描く。
【縦100px横60px・色#ff99c3】(基本的に楕円であれば何でもOK)

■ツールのアンカーポイントツールを選択し、上下のポイントをクリック。
(ペンツールを長押しで項目が出てきます)

■ツールのアンカーポイントの追加ツールを選択し、下記の様に2箇所に
ポイントを追加します。
(ペンツールを長押しで項目が出てきます)

■ツールのダイレクト選択ツールを選択し、下記の様に頂点のポイントを
少し下へ下げます。ここで花びらの形が決まります。

■花びらを五枚にする。以下好きな花の形へお進みください。

▼最後に

以上でさくらの完成です。いかがでしたでしょうか?
あくまでも数字は参考なので、いろいろ自由に試してみて下さいね!

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

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

こんにちは、デジマースのはらです。
今回はTOP画像の「氷」エフェクトの制作方法をご紹介していきます!
ステップは簡単10ステップ!! 氷エフェクトはきっと夏でも冬でも使えるはずです。
※制作時間は15~30分ぐらいです。
※PhotoShopのバージョンはCC2017です。
※作業環境はWindowsです。今回はショートカットの紹介は行いません。

●PhotoShop上部メニューバーより/新規→数値を入力→OK

●「レイヤー」パネル下部のアイコンからベタ塗りを選択
ベタの色は何色でもかまいません。今回は♯bcbcbcに設定

●グループ「グループ1」を作成
“その中に”テキストレイヤー(文字サイズ200 px)を作成(入力テキストはひんやりとします)、その後「ひんやり1」と名前を変更
フォントはどのようなものでも構いませんが、太めのフォントがオススメです。

●「ひんやり1」レイヤーをコピーして「ひんやり2」レイヤーを作成
色はそれぞれ
「ひんやり1」 b0e6ff/「ひんやり2」 53d3d1 にします。

●ひんやり1に「ベベルとエンボス」と「光彩(内側)」を適用

A 8ce8ff B 68ddff

●「自動選択ツール」で背景の“余白部分”をクリック
注:テキストをクリックして選択範囲を作成すると仕上がりが悪くなります。

選択範囲が作成されました(“ひんやり”は一発で全ての余白を選択できますが、それ以外の切れ目のない空間のある文字(「あ」や「の」)などは内側も選択してください)

●上部メニューバーから「選択範囲」矢印「選択範囲を反転」を選択

●「グループ1」を選択し、パネル下部「レイヤーマスクを追加」アイコンをクリック

レイヤーマスクが作成されました

●レイヤーマスクを“選択したまま”
上部メニューバーより「フィルター」→「変形」→「波形」を選択

下記赤枠部分を入力+チェック

●「ひんやり1」レイヤーにドロップシャドウを追加
(色は白 ffffff です)

完成!

パッと見たところ味気ないですが、文字のエフェクトはこれで完成です。
詳しい方ならこれ以降の説明は特に不要だとは思いますが、簡単にアレンジ方法をご紹介いたします。

●「ひんやり2」を複製して「ひんやり3」を作成し、レイヤーの描画モードを乗算に変更。その後、「グループ」1の外に出してベタ塗りの一つ上に配置し、色を白に変更

●「グループ1」のレイヤーマスクサムネールにカーソルを合わせ右クリック→「選択範囲とマスクの共通範囲」をクリック。またはcommandキー(win:Ctrl)を押しながらレイヤーマスクサムネールをクリック

●メニューバーから/「選択範囲」→「選択範囲を変更」→「縮小」→縮小量に「1」と入力しOK

●「ひんやり3」を選択し、パネル下部「レイヤーマスクを追加」アイコンをクリック

●「ひんやり3」にレイヤースタイル→「ドロップシャドウ」を適用
(色やサイズはお好みでどうぞ)

●「ひんやり2」レイヤーの不透明度を45%に変更
(不透明度やレイヤーの描画モードを変更することによって雰囲気を調節できます)

●「ひんやり3」レイヤーの下にお好きな背景を配置

完成!

他にも文字の上に雪をのせたり、少し溶かしてみたり、冷気を加筆したり…。様々なアレンジ方法がありますが、全部紹介すると本が書けてしまうのでこれでアレンジ完了としたいと思います。
それではまた次回。

手描きスタンプ~byフォトデコレ~

こんにちはもしくはこんばんは!
デザイン業務に関わっております、デジマースのスガです!
早いもので2017年も2月半ばにさしかかろうとしておりますね。

そして寒さも全国的にピークといったところでしょうか。
毎日ブランケットが欠かせません…!

さっそくですが今回は株式会社デジマースが提供しております写真系ツール「フォトデコレ」の手描きスタンプ特集と作成の流れを共に紹介したいと思います。

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

▼手描き素材

人気ですよね!写真を装飾するのにあるととても便利です。
さらっと描いたようなものから細々と書かれた物など様々ありますが手描きの良いところは写真装飾でいう所、メインの写真を主役にしたまま
何気ないワンポイントを加えられる所です!

▼フォトデコレで配信「手描きスタンプ」


スタンプやフレーム等、白黒反転カラーをご用意。(計62点)

実際にこれらのスタンプを使用した図はこちら↓

▼素材はどうやって?

やり方は様々あるかと思いますが、今回作成にあたり使用した物は以下です。
カンタンに流れを紹介します。ものすごくカンタンです。

・ボールペン
・白い紙
・スマホ(撮影用)
・パソコン(編集用)

①【描く】思うがままに白い紙にイラストを描く。
ここではテーマや個数等を決めておいた方が描きやすいですね。


ボールペンだと描き直しが出来ないのが大変ですね笑

②【パソコンへ取り込む】描いたらパソコンに取り込みますが、
今回はスマホで写真を撮ってパソコンに送ります。
スキャンでも大丈夫ですが画像サイズは大きく取り込んだ方が良いですね。

③【整える】取り込んだイラストの背景抜きや必要サイズへのサイズ変更や
色味の調整を行います。あえて調整しないってのも味があるかもしれません。
※調整部分は割愛致します。

④【完成】※一部

最後に

手描きそのままの素材になりますので、システムチックな固いイメージは受けにくいですね。
イラスト自体もラフっぽくなっていますので、自然な感じが写真とマッチします。
そうです、写真に浮かずさりげなく馴染むところが手描きの強みですね!

いかがでしょうか?
装飾が苦手。不器用なんです。問題ございません!
誰でもカンタンに、写真を華やかに出来ちゃいます!
ちょこっと装飾をしたいときに持って来いの手描き素材。
用途によっては写真以外(メッセージ風等)にも使えるかもしれませんね。
興味のある方は是非使用してみて下さいませ!

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

★対応OS

ios、Android対応

auスマートパス / スゴ得コンテンツ / 月額300円(税抜)

⇒「フォトデコレ」で検索!

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

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