簡単! ゆるゆるイラストチュートリアル②[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を覗いてみてください。


 

Pocket

たのしい文字組み 字間を調整してみよう

こんにちは。デザイン業務に関わっております、コンです。

みなさんお花見はしましたか?会社の近くの桜はもうほとんど葉桜になってしまいました。
桜が満開になってくると、大抵大雨が降ってすぐ散ってしまうので、毎年気が気ではありません…

さて、今回のテーマは「文字組み」についてです!
前回は文字組みの「字間と行間」について基礎的な部分のお話をしましたが、そのレベルアップ版で「字間」についてもう少し掘り下げていきたいと思います。

これから新入社員やデザイナーになる方に向けて、字間の調整方法や、漢字や記号などそれぞれの特徴に合わせた字間の空け方を書いていきます。
文字組みに気を配ることで、読んでもらう人にスムーズに内容を理解してもらうことが出来ます。デザイン作りはもちろん、日頃のプレゼン資料作りにも役立ちますので是非ご一読ください!


“字間を調整する”とは?

字間とは、文字通り「字と字の間」を指す言葉です。
字間の調整方法には、「字送り(トラッキング)」「カーニング」「文字ツメ」があります。


トラッキング(字送り)

テキスト全体の文字間隔を一定に整えるのに適しています。テキスト全体の中から一部を選択して任意の部分だけ間隔を調整する、と言う使い方も出来ます。
トラッキングの設定の値をプラスにすると間隔が広がり、マイナスにすると間隔が縮まります。

カーニング

2文字(文字とそれに隣接する文字)の間隔を調整するのに適しています。調整方法として、自分で数値を選択・入力して整えることが出来る他、Adobeソフトなどでは自動で文字組みを調整してくれる機能「和文等幅」「オプティカル」「メトクリス」があります。
カーニングの設定の値をプラスにすると間隔が広がり、マイナスにすると間隔が縮まります。

文字ツメ

そのままですが、文字を詰めるのに適しています。0%から100%の値を選択して文字と文字の間を詰めます。設定の値が100%に近づくと、組み合わせによっては隣り合う文字がくっついてしまいますので注意が必要です。
文字詰めの設定の値をプラスにすると間隔が縮まります。


そもそも字間を調整したい時はどこで編集すればいいの?と言う方は下記を参考にしてみて下さい。
よく使用される代表的なソフト2つ、「Adobe Photoshop」と「Microsoft PowerPoint」の字間の設定画面です。


文字の特徴に合わせて字間を調整しよう!

文字には、漢字、ひらがな、カタカナ、英語、記号など様々な種類があります。更に同じひらがなの括りの中でも、丸っこい字、四角い字、細い字など形も様々です。
種類や形の組み合わせによって、字間が広かったり狭かったりと変わることがあります。
まずは全体の字間はどれくらい広げようかな?と目的を定めます。「ゆったり読めるようにしたいから広げよう」「既定のサイズに収めたいから縮めないと」など、ざっくりでいいのでいいので決めます。

それでは早速、下記の例文のバランスを見てみて下さい。また、この例文を調整する目的は「デフォルトの設定を元に、バランスを均一になるように調整する事」です。

デフォルトの設定で文字を打ち込んだままだとこのようになります。
まず「、」と「家」の間が開きすぎているなと思った方も多いのではないでしょうか。
、。「」などの記号は、デフォルトの設定だと字間が広いくなってしまいますので、調整が必要な事が多い部分です。
特にタイトルや短い文章で記号を使う際は、記号の前後の間隔が広いと不格好さが目立ってしまいます。その為、全体のバランスを見ながら調整してあげましょう。

では、実際に字間を調整してみます。
今回は「、と家の字間が広すぎる」ので、カーニングで調整します。

そもそもテキスト全体のバランスをまず変えたい…と言う方は、カーニングを弄る前に、トラッキング設定を行いましょう。全体を整えてから、細かい微調整を行うイメージです。
例えばもう少しテキスト全体の字間にゆとりを持たせたいと言う方は、トラッキングの値をプラスすることで選択した全ての文字の間隔を広げることができます。

話を戻しまして、今回使用している「小塚ゴシック Pr6N 36px」のカーニング設定を変更して文字を詰めたいと思います。

「、」と「家」の間のカーニングの値を、0pxから-400pxにしました。ここだけ飛び抜けて字間が広かったのが、周りと均衡が取れるようになりました。
私はカーニングをよく使うのですが、詰めるだけなら文字ツメの値を変更するやり方でも大丈夫です。むしろ文字ツメの方が早くて使いやすい!と言う方もいるかもしれないので、自分の使いやすい方で調整してみて下さい。

次に「W」と「は」、英文と和文の字間です。細かい部分ではありますがここも若干広くなっていますので、カーニングで調整を行います。「W」と「は」の間のカーニングの値を、0pxから-150pxにしました。

余談として応用編にはなってしまいますが、どうしても綺麗に組めない、納得いかない時は、フォントから調整する必要があります。英文には欧文フォントを使用した方が綺麗に組むことが出来ます。また、和文がゴシック体なら英文にはサンセリフ体を使用する、線の太さや雰囲気が似ている物と組み合わせるなど、フォントから気を配ることが望ましいです。
例えば「HGSゴシックE」は、デフォルト設定では下記の図のように英文が半角で表示されてしまいます。比率が縦長の文字と正方形の文字が並んでいてバランスが悪く、見る時に違和感を感じてしまいますね…
そんな時こそ欧文フォントに変えてみて下さい。和文で使用しているゴシック体に合うように、欧文フォントはサンセリフ体の「Myriad Pro(フォントの太さ:Semibold)」を使用します。

文字のバランスが統一されて、自然で読みやすい文字の並びになったのではないでしょうか。
もちろん、和文フォントをそのまま使用する事も間違いではありませんよ!あくまで見易さの観点からバランスを考える時、こだわりのデザインを表現したい時に考慮してみて下さい。

また和文フォントと欧文フォントを組み合わせる際の注意点ですが、同じフォントサイズでも欧文フォントの方が小さく見えることがあります。
その為、欧文フォントは少し大きめに設定してあげると綺麗に見えます。今回は「GW」の部分だけ、「小塚ゴシック Pr6N 36px」から「小塚ゴシック Pr6N 38px」にちょっと大きくします。

微妙な変化ではありますが、バランスが良くなったのではないでしょうか。特に英文と漢字の大きさを比べるとバランスが改善されたのがわかるかと思います。

他にも字間の特徴は様々で、デフォルトだと漢字は少し詰まり気味、ひらがなは開き気味などもあります。隙間のバランスをどこに合わせるのかを決めて、広げたり縮めたりしてみましょう。
上記を踏まえて、最後に例文の微調整をしてみたいと思います。

これで目的達成です!
まったく字間を調整しなかった場合より、調整してあげた方が全体のバランスが統一されて見やすくなったのではないでしょうか。
ちなみに字間の調整を行った箇所は全部で6ヵ所になります。

もしここまで来て「やっぱり全体の字間を広げたい…」「縮めたい…」と思ったら、トラッキングの値を変えてイメージに近づけて下さいね。


おわりに

いかがでしたでしょうか?
バランスは文字や文章によって様々ですし、美的感覚も人それぞれなので具体的な数字で正解を出すことが難しくもあります。だからこそ、まずはやってみることが大切でもあります。
A4の紙の中で組むのか、幅640pxのバナーで組むのかなど、様々な条件や目的に応じてやってみることで、適切なバランスに作っていくことが出来ます。
興味を持って頂けた方は、今回の例文などを参考にぜひ試してみてください!


↓↓前回のおさらいがしたいなという方は、ぜひこちらもご覧ください!↓↓

たのしい文字組み―字間と行間―


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

Pocket

初心者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な内容ですので割愛しています。
知ってるよ!な内容かもしれませんが;少しでも参考になれば幸いです。

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

Pocket

[必然的な利用シーン]環境/需要との接触

あなたが関わっているサービスの、UX設計上の「利用シーン」はどんな状況でしょう。

「テレビで聴いた楽曲を購入したくなったとき」など唐突にサービスを使用している場面が多いと思われますが、
初めてサービスに接触する「その時」の環境と需要を意識出来ていることが重要です。

と、さすがにこんな具体性なく都合よくあなたの関わるサービスを見つけ使ってくれる状況は、そこまでに至る過程を省きすぎだと理解いただけるとは思います。

「何に困っているのか」「何を欲しているのか」「どう接触してきたのか」
という利用者の抱える問題を踏まえた「必然的な利用シーン」がある上でサービスのUX設計をしていく必要があります。

今回は、
「ペルソナ設定/行動シナリオ」の設計フェイズでも方向性がぶれないように
開発起案段階での「環境」「需要」などの「接触要素」と過程の理解を考えてみます。


環境ありきの「接触」

サービスと利用者が「接触」できる環境(状況)を正しく認識するために「ターゲット」を知る必要があります。

近年、マス(大衆/集団)だけでセグメントをすることは適切でなくなり、
「何」に関心があり何に関心が無いのか、
また、どういった移動手段をつかうのか、どういった趣向をもっているのかという、「心理的変数」「行動変数」など動向別にセグメントすることが有効になってきました。

「心理的変数」
・価値観、ライフスタイル、性格、好み、将来の希望

「行動変数」
・利用方法/手段、購買意欲、購買履歴、商品への忠誠/親密度(ロイヤルティー)

上記のワードを常に意識してサービス起案の方向性を決めていれば、
提供者視点を避けられそうです。

つまり、
人々の考え方を神のように常に把握していれば「究極マーケッター」に成れそうですが、現実は難しいので仮説の元、細々と都度データで確証を得てターゲットの行動を理解していくしかないようです。
地味な作業がやっぱり大事なんですね。

ターゲットの行動が見えてくると、どのような環境下でサービスとの「接触」が行われるかが見えてきますので、
初めてサービスに接触するその時の「利用シーン」の具体的な過程がわかってくるのではないでしょうか。

下記は、
状況によって「起こり得る/起こり得ない接触」「環境」の例です↓


「隠れた需要」との接触

「需要」を考える場合、ユーザーから直接聞くことが適切と思われますが、
その「聞き出した需要」はそのままでは必ずしも適切ではない場合が多いようです。

私たちが世の需要を掴みにくい状況は、「利用者側が発する声」にも表れ、
本人も本質が見えていないため、例えば、必要だと思って買った商品が結局使われないまま埃をかぶることは良くあることです。

その時の状況を思い返すと、
単純にタイムセールの商品で限定感で買ってしまったり、
モデルやタレントへの憧れから同じ洋服を買ってしまっていたり、
忠誠心/信仰心から、同じ系統(系譜)の商品を惰性で買っていたりと、
つまり「間接的な要因による需要」があることを認めざるを得ないわけです。
よって、「利用者の声」には「本当の需要」が隠されています。
一度寝かせて落ち着いたタイミングで、広い視点で分析、有効活用していきましょう。

必然的な利用シーン

以上を踏まえて、改めて冒頭の利用シーンを考えてみると、下記のような行動をする利用者も設定できるのではないでしょうか(あくまで手段の一つ)。

上記は今回の説明のために極端にセグメントをして必然性を上げているので母数は限られますが、
具合的な接触ポイントの必要性を理解いただけるのではないでしょうか。

次回も、サービスUX設計の話題をしたいと思います。
以上、サービスデザインに関わっているデジマースのネモトでした。

/////////// 関連記事はこちら↓ ///////////

UX(ユーザー・エクスペリエンス)を解釈してみた


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket