デザインの学校 DTPデザイン基礎編 デザイナーに必要なスキルとは

今回はDTPとは何なのでしょうか。DTPの仕事をするにあたって必要になるスキルを紹介します。

●DTPとは何でしょうか。
昔のDTPという仕事内容は活版印刷(印画紙、新聞など)、写植、刷版、レイアウター、校正(色校正)など、各担当部署によって分かれて作業を行っていました。しかし、現在では上記のものを全てを担って「DTPデザイナー」という職業となっています。

●色の三原則

○色光の三原色 RBG(データ・web)

赤(RED)、緑(GREEN)、青(BLUE)を混合させて表示します。
色の重なり合う部分が白に反映するために中心が白く反映します。
主にテレビやパソコンに使用されています。

○色材の三原色 CMYK(紙・印刷)

青(CYAN)、赤(MAGENDA)、黄(YELLOW)を混合させて表現します。
色が重なるところが混合すると色が変わります。
この三色に黒(BLACK)を重ねてCMYKとなります。
黒を英語にするとBLACKとなりますが、BLUEと頭文字がかぶりますのでBLACKの「K」と表記されます。
主に雑誌やポスターに使用されています。

○RBGとCMYKの2次元(データ)と3次元(印刷物)に対しての反映

RBGとCMYKと発色の仕方が異なりますので、実際の印刷物にしていくためには次の注意が必要になります。

○リッチブラックとは

データで制作しますとK100%をただ乗せただけでは印刷すると透けて印刷されてしまいます。
これをスミベタといいます。
それに対し、一般的にC 40%、M 40%、Y 40%、K 100%をデータ上に乗せた上で仕上がる黒をリッチブラックといいます。リッチブラックの方が深みのある黒に印刷されます。

ただし、CMYKで印刷をするので薄い紙ではインクが重なりすぎてきれいに仕上がりません。
CMYKで印刷をするためには厚手の紙でならばより一層実現できます。

●プリンターについて

RBGとCMYKは発色の仕組みが異なりますので、PCで確認したカラーと印刷されたカラーでは色味に違いが生じます。

カラーマネージメントシステムという大手でしか扱っていない機械があります。この機械で印刷をすればRBGとCMYKの矛盾を克服することができます。ですが、高値なのであまり扱っている企業は少ないです。

現在ではPCの発色の性能が良くなっているためにRBG・CMYKの印刷の矛盾が改善されつつあります。

そして、現在のインクジェット式プリンタはパソコンの色に合わせて各印刷会社が発色よく、RBGに近いインクをつくっています。家庭用プリンタではかなりの明るさで印刷されるので、印刷物の色味テストには非常に不向きです。

○印刷するにあたり何の色を信用していけばよいのか

正しいカラーチャート(紙の色見本)を印刷所に見せながら印刷したい色を指定して発注します。
なぜならばカラーチャートに印刷されている色が、実際に印刷される色だからです。

そのほかに、印刷においてプロセスカラー(CMYK)では再現できない色を表現するために調合されたインクのことを特色といいます。蛍光、メタリックカラー、パステルカラー、鮮やかなオレンジといった鮮やかさにこだわらなければ再現することが可能です。また、色の指示をすれば指定カラーで印刷をすることもできます。

●プロダクトデザインとは

製品のデザインを指します。このなかに家具、電化製品、日常用品、などがあります。
こういったもに対してポスター、チラシ、のぼり、看板などにも印刷ができます。

●DTPに必要なスキルは何か

○0から1を生み出す能力、形の無いものから形をつくるスキルが必要になります。

○DTPの現場ではルーチンワークで同じ作業を繰り返す現場も多いのが事実です。
実務経験1年以上と表記されている求人広告が多いのですが、実際に1年の実務経験があったとしてもルーチンワークの少ない実務経験では本当に必要なスキルは身につきません。
ですので、多種多様に技術の幅を広げていき、実務経験1年以上のスキルがわかる作品を30点以上くらいひたすらを制作し続けて、スキルを上げて就職先の心を魅了できることの方が重要になります。

●デザインをするにあたって必要とされるスキル、条件

○行動について

心がけなければならない3つの行動があります。

Plan(計画する)
作品、製品をつくるためには何を作るかが決まらなければ何も生み出せません。
どういったものをつくっていけばいいのかをあらかじめ計画します。

Do   (実行する)
計画が決まったら実行します。言葉のままですが、指示を受けて動くことは簡単ですが自ずから考えて実行することは容易ではありません。
自分の力で動いていく力が必要になります。

Check (機能していくのか、していないのか確認する)
仕上がったら、きちんとした製品として依頼者に見せられるものかどうかを確認します。
自己満足で終わってしまえば意味がありません。依頼者に満足していただけてはじめて仕事として成立します。

○具体的な運営管理

1,調査(どうやってターゲットを選ぶか)
仕事を上手に運営していくためには競合相手の条件、自分が幅を広げたいお客層に何が受け入れられるのかを調査します。

2,企画(フライヤー、ペーパー、エリア、ターゲットをしぼる)
調査の内容を踏まえた上でどこの地域で、どういったお客様を対象にしていくかを更に追求します。

3,デザイン(形に起こしていく)
形に起こすためには技術がともわなければ満足していただけません。
技術があればあるほどお客様への対応の幅が広がります。

4,開発   (パッケージ、工業開発)
この工程はパッケージなどのデザイン製作に密着している工程であります。どのような形、素材が良い!

デザインの学校 ウェブデザイン応用編 ムービー編集制作例

皆さんこんにちは。今回はムービー編集について解説いたします。
編集素材となるのが、前回ウェブデザイン応用編の記事でも紹介した、山梨県甲府市国玉町にある「長泉寺」の晋山結制の動画です。

Youtubeにアップロードできるサイズで、この動画のダイジェスト版を制作します。
今回はMac、Windowsそれぞれの動画編集方法をご紹介いたします。

◎Macでの動画編集
Macで動画制作をする場合、「iMovie」を使うのが一番簡単な方法です。このソフトは無料で、しかも最初からインストールされているので、気兼ねなく使うことができます。
ですが、無料版ではいくつかの機能がオミットされてしまっているため、使いづらい所も。

本格的に使うのであればApple Storeで1,300円の正規版を購入しましょう。一般的な動画編集ソフトの相場が6,000円~10,000円であることを見れば、非常にリーズナブルです。

Apple-iMovie



◎Windowsでの動画編集

Windowsの場合は「Windowsムービーメーカー」を使用します。こちらも最初からWindowsのOSにインストールされているソフトで、既存の動画編集ソフトにも引けをとらない高性能なものです。

Windows7のムービーメーカーはリボンインターフェイスを採用しています。
タイムラインに素材となる動画や静止画をいれます。
放り込んだ後は、ドラッグ&ドロップで順番入れ替え可能です。
タイムラン内でカーソルをドラッグすると、動画のシークが可能。シーク速度も軽く、作業がしやすくなっています。

HDビデオなどの場合は、一時ファイルの作成にかなりの時間が掛かかります。
2時間の1440x1080サイズのh264動画の場合、おおよそ50~60分待つ必要があります。

不要な部分は「編集タブ」を開いて、カット&トリム。
フェードイン・フェードアウト、動画の再生速度調整などもこのタブで行います。

「視覚効果」タブで動画にエフェクトを追加できます。
各ボタンにマウスを乗せると、効果を適用した動画が再生されるので確認がしやすくなっています。
モザイク、回転、カラー調整等、26種類の効果の中から、様々な効果を使用できます。

「アニメーション」タブには、シーンチェンジで用いるエフェクトが約60種登録されています。
複数の動画を自然につなぎ合わせる際に利用します。

最後は「ホーム」に戻って保存を押すと保存ができます。

WindowsLiveのIDを取得・ログインしていれば、そのままYouTubeやSkyDrive、FaceBookなどにアップロードも可能です。

高い動画編集ソフトを使わなくても内臓されているムービーメーカーで簡単に動画編集ができてしまします。編集してすぐに共有することが出来るので、是非お試しください!

デザインの学校 DTPデザイン応用編 パッケージデザイン制作例

皆さんこんにちは。今回はペットボトルのパッケージデザインの制作をご紹介します。

「サントリーBOSS ZERO STYLE」のパッケージのコピーを制作しました。

DTP応用 パッケージデザイン

1.ボトルサイズを測る
まずはボトルのサイズを測定します。
ボトルによって周囲や高さが違いますので、作りたいボトルの正確なサイズを出しておくことが大切です。

今回は350mlのくびれているボトルです。
くびれているボトルでも、長方形でデザインしていきます。
ペットボトルのように、フィルムがぴったり張り付いているものは、「シュリンク包装」といって、熱収縮性プラスチックフィルムを熱で被包装物にぴったり貼り付けています。
デザインするときは熱を当てる前の長方形で作っていきます。

2.ガイドを作成
ボトルのサイズが測れたら、ガイドを作成します。
このとき、必ず等倍で作成します。
ラベルは貼り付けるので、当然のりしろが必要になってきます。
のりしろ部分をきちんととっておかないと、文字が切れてしまったり、写真が中途半端に・・・なんてことがないよう注意しましょう。

3.文字やイラストを描く
パッケージの顔となるのがフォントやイラスト。
今回は完全コピーを目指すので、できる限り似ているフォントを使っていきます。
シアーやサイズ、配置など細かいところまで似せていきます。

ボスの場合は、ロゴマークにもなっているパイプをくわえた男の人をペンツールでトレスしていきます。一見簡単そうに見えますが、手書き風に見えるよう、パス(アンカーポイント)を多めに作ってトレスします。パスが少ないと角がカクカクしてしまったり、細かいところをうまく表現できないので丁寧にトレスしていきます。

4.裏面を作る
さて、表ができたら裏面を作っていきます。
裏面は成分表示や商品の詳細な情報が載っています。
文字ばかりなので簡単かと思いきや、文字端をそろえるのが結構大変。カーニングトラッキングを駆使してきれいに揃えていきます。
行送りのポイントも均一にして、小さい文字でも読みやすくなるようにします。

リサイクルマークの「PET」や「プラ」はフリーのベクター素材があるので、それをダウンロードして配置します。
バーコードもWEBで簡単に作成できるものがあるので、それを利用します。

5.印刷が何色でされているのか確認する
パッケージデザインで大切なのが印刷色数。
パッケージの印刷に使われる色の殆どが特色です。
色指定がきちんとされていないと正しく印刷されないので、印刷色見本帳などで近い色を探っていきます。

色指定について
例えば特色(DICやPANTONECOLOR)を使った印刷物であれば、特色の部分をほかの色に置き換えて指定します。
例えば特色DIC619を使いたい場合は、
DIC619をシアンに置き換えてデータを作成します。
入稿データには、C=100→DIC619 と記述します。

また、ペットボトルのラベルは透明なフィルムに印刷しますので、白い色を出したい場合は、白を指定しなければいけません。ここが紙の印刷物と異なります。いつもの印刷物と同じようにデータを制作したら白いはずの部分が透明に・・・なんてことがないよう、白を指定したい部分にはきちんと白を指定しましょう。
また、分かりやすいように、透明の部分も透明と書いておくと良いでしょう。
普段自分が飲んでいるもののラベルが何色印刷なのか?
ちょっと注意して観察してみるとパッケージデザイナーとして目が養われていきますよ!

デザインの学校 ウェブデザイン応用編 ECサイトについて

皆さんこんにちは。本日は通販サイト―――ECサイトの制作について解説していきます。

ECサイトとは、自分の商品やサービスをネット上にある独自運営のウェブサイトで販売するサイトのことを指します。一般的にネットショップと呼ばれているものです。
昨今は企業はもちろん主婦の方まで、ECサイトを運営している人は幅広く、これからもっと伸びる市場だと期待が集まります。

ジュエリーと言えば、やはり女性が身につけるもの。このサイトでは主に若い女性をターゲットにしているので、サイトのメインカラーをピンクに設定。特徴的なロゴと「格安ジュエリー通販は宝石の町、甲府から!」という文句を大きく入れ、一目でここがどんなサイトかわかるように制作しましょう。ECサイトで使う文句は主に格安、高品質などがベター。そこに甲府という場所やエンゲージリングなど扱っている商品の中でも自慢の商品を据えて、このサイトだけの売り文句を作りましょう。

ウェブデザインスタジオ ECサイト バナー

上図には会員のログイン、会員のMYページ、新規会員登録、カゴの中身を見るという項目が並んでいます。少し画面をスクロールして左右を見ると同じ所に飛ぶ場所はありますが、一番目に行くサイト上部に項目を用意することでよりスムーズに顧客がサイト内を行き来できます。

ウェブデザインスタジオ ECサイト 広告 ブログ

中央にあるのは広告とブログです。
広告は大きく表示することでより顧客の目を引くことができます。サイトを見る人の目の動きは、最初に最上部のバナーを見て、興味を持ったら下にスクロールし、そこで広告を目にします。ここで顧客が求めている、興味を持つような広告を表示することで顧客を商品ページに誘導する(広告には必ずその商品へのリンクを貼りましょう)ことができるのです。サイト制作に慣れてきた人は、広告に横スクロールの機能を付けて複数の広告を表示するという工夫をしてみてもいいかもしれません。
ECサイトでのブログは、実は意外と注目される要素です。通常の店と違い、ECサイトは今営業しているのか、ここはちゃんとした店なのか、判断が難しいものです。せっかく気に入った品物があっても、届くまでに時間がかかったり、不良品が送られてきて損をした、という話は後を絶ちません。そうしたECサイトの判断基準として、ブログの更新があげられます。ブログがきちんと定期的に更新されていれば、そこはちゃんと人が管理しているという証明になるのです。また、ブログの更新はサイトの宣伝にも直結しますので、ECサイトを運営する際にはブログもセットで制作しましょう。

ウェブデザインスタジオ ECサイト カゴ

左には買い物カゴと商品の一覧、お問い合わせなどの各種情報を掲載。

ウェブデザインスタジオ ECサイト ログイン 検索

右には会員のログインフォーム、検索フォーム、営業カレンダーを載せています。
どれもサイトに合わせ、そして誰が見てもわかりやすいデザインを心がけたものです。前回、前々回のアイコンやバナー制作の内容などを駆使しましょう。

◎サイト
こうしたECサイトを提供しているサービスは数多くあります。
ここでは上からオススメ順にサイトをご紹介。

・楽天市場 出店・開業―ネットショップ出店をサポート!資料請求も無料!―

・Yahoo!ショッピング – ネットで通販、オンラインショッピング

ネットショップでの開業、開店から販売、成功まで『ショップサーブ』

・日本発!ECオープンプラットフォーム EC-CUBE

◎アップロード
今までサイト情報のアップロードに使用するFTPサーバはFFFTPを使うのが一般的でしたが、最近は高性能なFileZillaが主流になりつつあります。

・FileZilla – The free FTP solution

・FileZilla プロジェクト日本語トップページ -SourceForge.JP

元は英語サイトですが、有志の方で日本語化が進んでいますので問題なく使用できます。
FTPだけでなくSFTPやFTPSにも対応。ファイルの転送速度は比較的速く、待たされることや途中で止まることはありません。また右クリックからファイルを開いたり、編集したり、アップロードすることが可能ですので、スムーズな作業が可能となります。
もちろん無料で利用できますので、是非導入してみてください。

ECサイトにはウェブサイトを構築する上で必要な要素が多数そろっています。
参考などにするだけではなく、是非一度どんなものなのか触れてみてはいかがでしょうか。

デザインの学校 ウェブデザイン応用編 アイコン制作について

皆さんこんにちは 今回のWEB応用ではホームページやブログで使用されているアイコンの制作について解説していきます。

ページ間の移動や記事のアクセントなどで使用されているアイコンは、前回説明したバナーとは違い、大きいものから小さいものまで様々な形のものがあります。そこで今回は、代表的なアイコンの例を取り上げて説明していきましょう。

◎図形

 ウェブデザインスタジオ アイコン 吹き出し

円と三角形を組み合わせることで作ることができる吹き出しのアイコン。ですが、ただ重ねただけは粗が目立ちます

 ウェブデザインスタジオ アイコン 吹き出しウェブデザインスタジオ アイコン 吹き出し

こうした図形を重ねる物を制作する時はパス結合を忘れずにおこないましょう。統合すれば重ねた図形が1つの図形になるのできれいなグラデーションを入れることができます。

小さいサイズのアイコンを作る際には、図形のエッジを立たせるなどの工夫が必要になります。小さくなるほど表現するドットの数が少なくなり粗さが目立ちますが、こうした処理をすることでしっかり見えるアイコンを作ることができるのです。

 ウェブデザインスタジオ アイコン 角丸  ウェブデザインスタジオ アイコン 角丸

また角の丸い図形を作る際には角丸ツールを使うのではなく、四角形ツールのプロパティにある角丸の半径の数値を操作して制作しましょう。数値を変えることで、自由な角丸を作ることができるためです。

ウェブデザインスタジオ アイコン 矢印

矢印を制作する際には先端が尖るよう、手を加える場合があります。特に小さい矢印を作る時には先端部分が1ドットになるようドット数を奇数で作りましょう。極小の物を作る時はエッジがぼける効果は外して作ります。ドットの数が多くないのであれば、鉛筆ツールで1ドットずつ作る方が確実です。

◎効果
ドロップシャドウなどを入れる時は、ぱっと見た目に効果がかかっているかいないか判別できないくらいの微妙なラインでまず入れましょう。2/20/2/-(変更せず)が大体そのラインにあたる数値です。そこから徐々に効果を上げていきましょう。

ウェブデザインスタジオ アイコン

ウェブデザインスタジオ アイコン 文字

右が通常、左がドロップシャドウの効果を加えたアイコンです。

また、プロパティにある効果に頼らずに、こういった効果を得ることもできます。

ウェブデザインスタジオ アイコン 丸

図形の上に黒で塗りつぶした別の図形を置き、上に置いた図形に透明処理を施すと上図のような効果が出ます。下地になっている図形にバックアップを取ったら、2つの図形を選択してパス統合の項目から切り抜きを選択し色が変化している部分だけを抽出します。後はバックアップを取っておいた図形を組み合わせて完成です。

これらを含めデザインに欠かせない効果ですが、制作するアイコンが小さいのであれば気を付けて使いましょう。ドット数などの関係でそこまで大きな変化が起きないからです。むしろ悪いデザインになってしまうので、使わないことも考えましょう。

◎文字

ウェブデザインスタジオ アイコン 文字

フォントの太さはDFP系統であればW5が標準です。サイズはアルファベットであれば10、日本語であれば12までが妥当なサイズとされています。また前回のバナー制作でも触れた内容は、アイコン制作でも大いに役立つので是非使ってみて下さい。

アイコンなどのブログパーツはよく無料配布されているので、参考に探してみると良いでしょう。皆さんも、是非自分だけのアイコンを作ってみてください。

デザインの学校 ウェブデザイン応用編 バナー制作のコツ

皆さんこんにちは 今回のWEB応用ではバナーの制作のコツについて解説していきます。

バナーはウェブ上での広告、宣伝に使われる重要なアイコンです。そのため何よりも目立たせ、サイトにやってきた訪問者の目に留まるようデザインするのが必要となります。

制作する前に少しバナーのサイズについてふれておきましょう。
普段様々なバナーを目にすると思いますが、これらのバナーはある程度サイズが決まっています。
その中から、下に代表的なサイズをあげてみました。
用途やレイアウトに応じてどんなサイズが良いのかまず考えることが大事ですね。

では、先日の授業で制作されたバナーをご覧ください。

完成図

写真、図形、文字を様々な配色で配置してありますね。1つ1つ解説していきましょう。

◎写真
ここでの写真はドロップシャドウで効果を付けてあります。ここでの設定値は数値順に7/20/7/ー(変更せず)です。これにより写真により立体感を持たせる事が出来ます。 写真はバナーに限らず、人の目に留まりやすいものです。拡大して他の図形や文字とは区別をつける、左側など文字を読み始める所に配置するなど、人の視線を意識した配置を考えましょう。

◎図形
四角や円、三角などの基本形以外の図形も積極的に使用しましょう。線ツールで描いた太線から作れるマーカー線、星形ツールから作る事の出来るイガグリ型の図形などはその一例です。
バナー内容に沿った図形を使うよう心がけましょう。スキルアップ、能力向上といった内容であれば上向きの矢印を使うといった具合です。これらを文字と組み合わせる事で、このバナーが何を宣伝しているのか、その内容を?みやすくなります。
またここで使われているTwitterやFacebookのアイコンは、無料で使える素材として公開されているものです。有名なのは海外サイトのiconspediaなどです。

◎文字
広告の中でも特に強調したい文章は、テキストツールで1文をそのまま入力するのではなく文字にリズム感をつけて、目立たせていきましょう。
まず、「ソーシャル時代」と「攻略セミナー」の部分は変形を使い、文字を斜めにしてみましょう。少し角度がつくことで、右上がりに上昇するような印象がつきました。
「!」などの記号も単体で入力する事で、より文章に馴染みやすいよう加工する事が出来、これにより文字の表現の幅が大きく広がります。
また一つ一つの文字の大きさを変えることでリズム感をつけています。
次に「SNS」の部分です。それぞれ文字をうって、今度が右下がりに配置しました。
英語や数字は英語圏のフォントであるArial、Arial Blackなどがより綺麗に表現できます。
全体的に全て右上がりではなく緩急のついた目立つものになりましたね。

◎配色
使用する色はできるだけ統一させましょう。あまりにも別系統の色を混ぜ込んでしまうと、あまり目にしたくないデザインになってしまいます。色相環の補色の関係を意識し、目立ちながらも目に優しいそんな配色を作っていきましょう。 どうしても配色で悩む、という方は専門書やネット上にある配色見本を参考にすると良いでしょう。また日頃から様々な所にある広告や景色を見ては、その配色をインプットしてデザインに活かせるようにしておきましょう。

バナーはどれだけ人の目を引く事が出来、内容を読んでもらうかが重要です。 皆さんも様々な工夫を凝らして、より人目を集める広告作りを目指してください。

【EXCEL上級】条件付き書式 データーバー

こんにちわ。

今回は条件付き書式 データーバーの使い方をご説明しますね。(^_-)

データーバーを使うとセルの値の高さがバーの長さに比例して表示されるので、一目で値の比較ができるんですよ。

ではやってみましょう。(*^_^*)

下図の人口統計表の人口の欄を範囲選択します。

人口統計表

ホームタブスタイルグループから条件付き書式をクリックし、データーバーにマウスを合わせ、データーバーの色を選択します。

今回は塗りつぶし(グラデーション)からをクリックします。

データーバー リストの図

下図のようにセル内にデーターバーを表示することができましたね。(^_-)

データーバーを表示した図

【Photoshop初級】多角形選択ツール

こんにちわ。

今回は多角形動択ツールについてご説明しますね。(^o^)

多角形選択ツールは直線で囲まれた範囲を選択する時に使うと便利なツールです。

使い方はとっても簡単!

では実際にやってみましょう。(^_-)-☆

下図の写真の囲碁盤だけを選択してみたいと思います。

年配の方と囲碁盤の画像

ツールボックスの多角形選択ツールを選択します。

ツールボックスの画像

マウスポインタが多角形選択ツールの形になります。

囲碁盤の右下の角をクリックし、次にその上の角をクリックします。

順に次の角もクリックしていきます。

囲碁盤の右下をクリックした画像

開始点に来ると多角形選択ツールの横に○が表示されますのでそのままクリックします。

下図のように囲碁盤を選択することができましたね。(o^-‘)b

囲碁盤を選択した画像

【Photohop初級】長方形選択ツールもご覧下さい。

【Photoshop初級】楕円形選択ツールもご覧ください。

手に職を磨くデザイン教室 ウェブデザインスタジオ山梨 の「就職直結コース」を見る

デザインの学校 ウェブデザイン応用編 使えるツール

今回はデザイナー必須!
無料で使えるオンラインストレージ、デザイン・イラスト素材サイト をご紹介いたします。
それぞれ「ホームページ執事」のほうで詳しく紹介しているのでご覧ください。



●オンラインストレージ記事まとめ

無料で使えるオンライン ストレージ Windows Live SkyDrive

宅ふぃある便&Evernote 

便利なwed無料ツール詰め合わせ~1回目~ 

無料で使えるオンライン ストレージ firestorage(ファイアストレージ) 

●デザイン・イラスト素材記事まとめ

【まとめ】無料のデザイン・イラスト素材サイト 

更新したはずのページが更新されない時 [Ctrl]+[F5] 

デザイナーなら知っておきたい デザイン黄金比 

デザイナーなら知っておきたい 無料アイコンダウンロードサイト 

デザイナーなら知っておきたい 無料で使えるカラーツール 

これらのツールや素材を使いこなして“デキる”デザイナーを目指しましょう!

デザインの学校 DTPデザイン応用編 色の話

皆さんこんにちは。今回はDTPデザインの中でも、特に注意する点であるの話をしていこうと思います。

◎RGBとCMYK
コンピュータのモニターは光の三原色―――即ち「赤」「緑」「青」の3色で構成される「RGB」により画像や映像を表現しています。これにより、人間が見ることのできる範囲、いわゆる可視光線を表示することができるのです。
しかし、このRGBと主にプリンターなどの印刷機器で使われる形式が異なる。カラー印刷で使用されるのは色材の三原色―――「シアン」「マゼンタ」「イエロー」に「ブラック」を足した合計四色で構成される「CMYK」です。
このモニターと印刷物での色の形式違いが、コンピュータ上で制作した物と実際に印刷した物の色がずれてしまう要因なのです。

RGBは色光を重ねることにより白くなっていく加色法であり、コンピュータ上では重ねた色と色の16進数を加法することで別の色を表現します。
光の三原色 RGB

対してCMYKは光が吸収される原因で色合いが決まりまる減色法です。こちらは重ねるごとに色は光を失っていき黒になります。そして、印刷物は全てこのCMYKで表現されるのです。
色材の三原色 CMYK

もうおわかりですね。そう、コンピュータ上で作ったRGBのデータを印刷する場合、必ず“CMYKの形式に変換しなければならない”のです。
しかし、形式が違うとはいえ、同じ“色”であるならば問題はない筈―――とお思いになるでしょうが、そう単純な話ではないのです。

それはそれぞれの方法で人間が見ることのできる可視光線を表現できる範囲が違うからです。
色 図式 色度図

上の図は色度図と呼ばれる図です。ここの黒い線で囲ってある部分がRGBが表現できる色の範囲白い線で囲ってある部分がCMYKが表現できる色の範囲です。
実はRGBと比べると、CMYKが表現できる色の範囲は狭いのです。特にオレンジ、マリンブルー、ライムグリーンなどの色はCMYKでは表現し難く、RGBからこれらの色をCMYKに変換すると黒ずんでしまいます。
デジタルカメラなどで撮った写真を印刷すると、実際に撮った時の色とは違う色で印刷されてしまうのは、印刷前にこのRGB→CMYKの変換が自動的に行われている結果なのです。
このためDTPでは“モニターで制作した印刷物の色と、実際の印刷物の色は違う”という前提を持って作成することが求められます。基本、どの印刷会社でもCMYKでの印刷ですので、自分の制作物とその印刷物のデザインが食い違わないように細心の注意を払う必要があります。
慣れないうちは、アナログの本に載っているCMYKのチャート表と照らし合わせながら制作すると良いでしょう。

◎色の要素
色の表現の中で最も一般的なのが色相、彩度、明度の3つの要素で表現することです。

色相は色味を表現する要素です。これをわかりやすく図式にしたのが色相環と呼ばれる円状の図。
色 色相環
黄、赤、青の3色を基本として黄と赤、赤と青、青と黄の間にある色を生成して作られています。 この色相環の反対側にある色を補色関係にある色と言い、この色同士を配色するとより色を強調し、鮮やかに見せることができます。また明度の近い色(赤と緑など)を配色すると「ハレーション」と呼ばれる隣り合った部分がチカチカと点滅する現象が起きます。他にも補色と補色を合わせると無彩色である灰色(グレー)になることも覚えておきましょう。

彩度は色の鮮やかさに関係する要素です。色には無彩色有彩色の2種類があり、前者は白黒とその間にある灰色(グレー)を指し、後者はそれ以外の色を指します。上で説明した色相環にある色は全て純色という彩度が最も高い色です。彩度はこの純色から黒までの間で表現される色のことなのです。

明度は色の明るさを表します。黒から白までの色で表現され、前者が最も明度が低く、後者が最も明度が高い色です。これは純色でも同じように表現されます。有彩色の明度はわかりにくいですが、色をグレースケールに置き換えると、黄色が最も明度が高い純色となります。一度試してみましょう。

これだけ把握するだけでも、単なるベタ塗りとは違う色を出すことができるはずです。まずは数多の数ある色に触れてみることから始めていきましょう。

◎配色とその見本
いくらデザインが良くても、色が合っていなければ台無しになってしまいます。しかし、自分の描いたデザインに合う色を見つけ出すのは、慣れていないと大変な作業です。
そんな方々のために、最近では配色の見本を掲載した専門書やサイトが出てきました。慣れないうちはこれを活用し、配色を決めていきましょう。
以下はその配色見本の中から抜粋したものです。
季節や場所、行事だけでなく、形容詞のようなあいまいなものまで多様な配色パターンが存在します。また、これはほんの一例に過ぎません。同じテーマでも、まだまだ沢山配色パターンがありますので、あくまで参考程度に。

例:行事
クリスマス
「もちろん緑と赤。それに文字の装飾に良く使われる黄金色に近い色を配色」
クリスマス 色 配色
左「C:95 M:20 Y:55 K:0」「R:0 G:141 B:132」「#008D84」
中「C:0 M:25 Y:50 K:0」「R:250 G:204 B:136」「#FACC88」
右「C:0 M:90 Y:75 K:0」「R:232 G:56 B:54」「#E83836」

正月
「赤を基点とし、補色である緑を入れることでより際立出せる配色」
正月 色 配色
左「C:5 M:55 Y:80 K:0」「R:233 G:140 B:58」「#E98C3A」
中「C:25 M:100 Y:100 K:0」「R:192 G:25 B:32」「#C01920」
右「C:65 M:0 Y:60 K:0」「R:84 G:184 B:131」「#54B883」

例:形容詞
幻想的な
「昔から神秘的な意味を持つ青を基点に、静かな森の中の水辺をイメージした配色」
幻想的 色 配色
左「C:100 M:85 Y:55 K:30」「R:0 G:47 B:75」「#1C324B」
中「C:40 M:5 Y:20 K:0」「R:163 G:208 B:208」「#B0CFCF」
右「C:85 M:45 Y:40 K:0」「R:9 G:117 B:138」「#437588」

ロマンチックな
「夕日の沈む浜辺のイメージ。左から徐々に夜になっていく配色」
ロマンチック 色 配色
左「C:0 M:40 Y:70 K:0」「R:246 G:173 B:84」「#F6AD54」
中「C:0 M:10 Y:15 K:0」「R:253 G:236 B:219」「#FDECDB」
右「C:70 M:60 Y:40 K:0」「R:98 G:104 B:127」「#62687F」

色はデザインの中で最も奥が深い要素の1つです。理解するのには非常に時間がかかるでしょう。
それを短縮するためにもまず、世の中にある配色を意識して見ることを始めましょう
どんな色が自然なのか。どんな色が目立つのか。


れを把握できるようになれば、あなたのDTPスキルは飛躍的にアップするでしょう。

【Excel上級】条件付き書式 平均より下

こんにちわ。

今回は条件付き書式を使って、平均より下の値のセルを強調表示する方法をご説明しますね。(^^)

日本全国の人口統計表を使って、全国平均より下の都道府県を強調表示してみたいと思います。

下図のように北海道から沖縄までの人口のセルをドラッグして範囲選択します。

人口統計表

ホームタブのスタイルグループから条件付き書式をクリックし、上位/下位ルールにマウスを合わせ平均より下をクリックします。

平均より下

平均より下」ダイアログが表示されますので、書式を指定し、OKをクリックします。

平均より下ダイアログの図

下図のように都道府県の全国平均2,718,458より下の都道府県のセルが強調表示されましたね。(^○^)

平均より下のセルが強調表示された図

【Excel上級】条件付き書式 平均より上もご覧ください。

【Excel上級】条件付き書式 上位10項目もご覧ください。

【EXCEL上級】条件付き書式 下位10項目もご覧ください。

【Excel上級】条件付き書式 上位10%もご覧ください。(^_-)

【Photoshop初級】自動選択ツール

こんにちわ。

今回は自動選択ツールについてご説明しますね。(^o^)

自動選択ツールは他の選択ツール同様、範囲を選択する時に使うツールです。

特に選択したい範囲とそれ以外の範囲との色の差がはっきりしている時に使うと有効です。

では実際にやってみましょう。(^_-)-☆

下図の写真のバラの花の部分を選択してみましょう。

バラの花の画像

ツールボックスのクイック選択ツールで長押しし、自動選択ツールを選択します。

ツールボックスの図

マウスポインタがたんぽぽの綿毛のような形になりますので、バラの花の部分をクリックします。

下図のように範囲が選択されますね。

このように自動選択ツールはクリックした位置の近似色のピクセル範囲を選択してくれます。

許容値32で範囲選択した図

ツールオプションバーを見ると許容値32になっています。

ツールオプションバーの図

この許容値を大きくすると近似色の範囲が広がるので、同じ位置をクリックしたとしても選択される範囲は広くなります。

下図は許容値100にして同じ位置をクリックした図です。

先ほどよりも選択範囲が広がりましたが、またバラの花全体が選択されてはいません。

では今の選択範囲にさらにまだ選択されていない範囲を追加していきましょう。

ツールオプションバーの図

許容値100で選択した図

ツールオプションバーの選択範囲に追加をクリックします。

ツールオプションバーの図

自動選択ツールのマウスポインタの横に+が表示されます。

バラの花のまだ選択されていない部分をクリックします。

既存の選択範囲はそのままで、新たな範囲を追加することができます。

これでバラの花全体をきれいに選択することができましたね。

バラの花すべてが選択された図

自動選択ツールのツールオプションでは「現在の選択範囲から一部削除」や「現在の選択範囲との共通範囲」なども選ぶことができます。

またアンチエイリアスにチェックを入れておけば、選択範囲の境界線を滑らかにすることができます。

隣接のチェックを入れるとクリックした部分と一続きの範囲だけが選択されますが、隣接のチェックをはずすと近似色であれば離れた場所でも選択されます。

隣接のチェックをはずしてバラの花をクリックすると… 右のつぼみも近似色なので選択されていますね。

隣接のチェックをはずした図

隣接のチェックをはずした結果の図

全レイヤーを対象をチェックすると、すべてのレイヤーが選択の対象になるんですよ。

 

【Photohop初級】長方形選択ツールもご覧下さい。

【Photoshop初級】楕円形選択ツールもご覧ください。

手に職を磨くデザイン教室 ウェブデザインスタジオ山梨 の「就職直結コース」を見る

【Excel上級】条件付き書式 平均より上

こんにちわ。

今回は条件付き書式を使って、平均より上の値のセルを強調表示する方法をご説明しますね。(^^)

今回は日本全国の人口統計表を使って、全国平均を上回る都道府県を強調表示してみたいと思います。

下図のように北海道から沖縄までの人口のセルをドラッグして範囲選択します。

人口統計表

ホームタブのスタイルグループから条件付き書式をクリックし、上位/下位ルールにマウスを合わせ平均より上をクリックします。

条件付き書式 上位/下位ルール 平均より上

平均より上」ダイアログが表示されますので、書式を指定し、OKをクリックします。

平均より上ダイアログの図

下図のように都道府県の全国平均2,718,458より上の都道府県のセルが強調表示されましたね。(^○^)

平均より上のセルを強調表示した結果の図

【Excel上級】条件付き書式 上位10項目もご覧ください。

【EXCEL上級】条件付き書式 下位10項目もご覧ください。

【Excel上級】条件付き書式 上位10%もご覧ください。(^_-)

【Photohop初級】なげなわツール

こんにちわ。

今回はなげなわツールについてご説明しますね。(^o^)

なげなわツールは長方形選択ツールや楕円形選択ツール同様、範囲を選択する時に使うツールです。

なげなわツールを使うとドラッグした範囲を選択することができます。

では実際にやってみましょう。(^_-)-☆

ツールボックスからなげなわツールをクリックして選択します。

ツールボックスの図

下の写真のストップウォッチを選択したいと思います。

このような範囲を選択する別の方法もありますが、今回はなげなわツールを使ってみましょう。

ストップウォッチの画像

ストップウォッチの輪郭をドラッグしていきます。

輪郭をドラッグしている図

ぐるりと一周ドラッグし、開始点と重なったら手を放します。

一周ドラッグした図

ドラッグした部分の内側が選択範囲になりましたね。(^.^)

でも選択範囲はガタガタですね。(-.-)

では少しづつ直していきましょう。

選択範囲

なげなわツールを選択した状態でShiftキーを押すとなげなわの横に+が表示されます。

その状態で追加したい範囲をぐるりと一周ドラッグします。

そうすると既に選択されている範囲に、ぐるりと選択した範囲を追加することができます。

なげなわ+でドラッグ

今度は選択し過ぎてしまった部分を選択範囲から除外してみたいと思います。

なげなわツールを選択している状態で、Altキーを押すとなげなわの横にが表示されます。

除外したい範囲をぐるりと一周ドラッグして選択します。

一周ドラッグした範囲が選択範囲から除外されます。

なげなわ-の図

この作業を繰り返して… 選択範囲を修正することができましたね。(^_-)-☆

選択範囲完成の図

【Photohop初級】長方形選択ツールもご覧下さい。

【Photoshop初級】楕円形選択ツールもご覧ください。

手に職を磨くデザイン教室 ウェブデザインスタジオ山梨 の「就職直結コース」を見る

【Excel上級】条件付き書式 下位10%

こんにちわ。

今回は条件付き書式を使って下位10%を強調表示してみたいと思います。(^.^)

下図の人口統計表の人口の下位10%を占める都道府県を強調表示してみましょう。

まず北海道から沖縄までの人口のセルをドラッグします。

都道府県の人口欄を範囲選択した図

ホームタブスタイルグループ条件付き書式をクリックし、上位/下位ルールにマウスを合わせ下位10%をクリックします。

条件付き書式 上位下位ルール

下位10%ダイアログが表示されます。

今回は緑色に強調表示してみたいと思いますので、「書式:」欄で「濃い緑の文字、緑の背景」をクリックし、OKをクリックします。

下位10%ダイアログの図

下図のように強調表示することができましたね。 d(⌒ー⌒)

下位10%が強調表示された結果の図

EXCEL上級【条件付き書式 下位10項目】もご覧ください。

  • デザインでお困りの企業様
  • 人材や教育でお困りの企業様