KENスクールブログ-パソコンスクール パソコン教室 KENスクール

デザイン

Photoshopで湯気を作って、熱々のコーヒーを演出する

美味しい料理と言えば、熱々出来立ての料理ですね!

しかし、実際に写真を撮っている間にみるみる料理は冷めていき、アツアツ感を伝えるのはとても難しいです。

また環境によっては湯気が写真に収められなかったりします。

今回はそんなお悩みを解消する美味しい料理写真加工の定番である湯気の作り方をカフェで出されるコーヒーの写真を使って紹介しましょう。

手順1

①新規レイヤーを作成します。「湯気レイヤー」と分かりやすいようにレイヤー名をつけましょう。

②描画色を「黒」、背景色を「白」にします。

③湯気レイヤーを[ フィルター描画雲模様1  ]に設定しましょう。

コーヒー湯気の作成手順1ー1,2,3

④湯気レイヤーをレイヤーパネルの[ 描画モードスクリーン ]に設定しましょう。

コーヒー湯気の作成手順1ー4

手順2

次に、コーヒーの湯気をリアルに演出します。

⑤消しゴムツールを使って、湯気レイヤーの不要な部分を消していきます。

コーヒーの湯気の作成手順2ー5

⑥湯気レイヤーを[ フィルター変形波形  ]に設定しましょう。

波形の設定パネルのプレビューを見ながら、お好みのモワモワ感のある靄に設定しましょう。

コーヒーの湯気の作成手順2−6

手順3

コーヒーの湯気をもっとリアルに立ち昇るように演出します。

コーヒーの湯気を作成手順3−7

⑦指先ツールを使用し、ゆらゆらと立ち昇るようにさらに加工を加えましょう。 

Before・After

加工前のカフェ・コーヒーの写真

加工後のカフェ・コーヒーの写真

お好みで消しゴムツールやレイヤーの不透明度を変えて馴染ませましょう。

カフェに出てくる熱々のコーヒー写真の加工ができましたね。

ぜひ好きな食べ物で湯気演出してみてください。

熱々のピザ加工前 熱々のピザ加工後

ちなみに私はピザが好きなので、湯気を作成し、ピザを熱々に加工演出してみました。
皆さんもチャレンジしてみてください。

この記事に関連する講座

Photoshopo

詳しくはこちら


カテゴリー: Photoshop グラフィック デザイン 写真

PrintScreenとSnippingToolで画面キャプチャ

ブログなどを作成する際に、よく画面キャプチャが必要になります。
また、実務でも手順書や報告書などビジネス文書作成のシーンでも、画面キャプチャは必要になることが多いものです。

一般的には「Print Screen」…でも使いにくい。

一般的に知られている「PrintScreen(画面全体)」や「Alt+PrintScreen(アクティブエリア)」などの方法ですと、右クリックメニューはキャプチャを撮る際に消えてしまいます…。

Windows標準機能「Snipping Tool」

そこで今回ご紹介するのは、「Snipping Tool」という便利なツールです!

2016OA_01

結構知らない方も多いのではないかと思います。
ちなみに、Snipping ToolのSnipとは、「(ハサミなどで)ちょん切る」という意味です。
起動方法はお使いのOSにより多少違いはありますが、
基本的にはスタートメニューから検索をかけて頂くか、よく使われるかもという方は、起動用のショートカットを作成することをお勧めします。

「Snipping Tool」の使い方

Snipping Toolでキャプチャを取るには、「新規作成」ボタンをクリックします。
すると、以下のように画面全体に霧がかかったような状態の「切り取りモード」になります。

2016OA_02

この状態で、切り取りを行いたい部分をドラッグ&ドロップで選択します。

2016OA_03

実際に切り取った画像がこちらです。

2016OA_04

右クリックメニューなどをキャプチャしたいとき

さて、問題の右クリックメニューなどをキャプチャしたいときの操作手順ですが、まずはSnipping Toolを起動して、「新規作成」ボタンを押します。ここまでは先程と同じです。

2016OA_05

ここで一旦「Esc(エスケープ)」ボタンを押します。
すると、キャンセルボタンが無効状態になったまま一旦霧が晴れたような状態になります。
ここで、対象を右クリックして「右クリックメニュー」を表示させます。
うっすらと右クリックメニューが表示されていますね
この状態で「Ctrl+PrintScreen」キーを押します。

2016OA_06

そうすると、切り取りモード状態になるので、切り取りたい箇所をドラッグ&ドロップで選択します。
右クリックメニューを表示させたまま、キャプチャを撮ることができました。

     2016OA_07

みなさんも、部分的に切り抜いた画面をキャプチャしたいときや、右クリックメニューをキャプチャしたいときは「Snipping Tool」を活用してみてください!

この記事に関連する講座

操作効率UPで生産性を高める!

詳しくはこちら


カテゴリー: Office Windows デザイン パソコン全般 ビジネス文書 プレゼンテーション

Photoshopで写真をスタンプ風に加工しよう

Adobe Photoshopで写真をスタンプ風に加工します。
お洒落なデザインを作成したい時にオススメです。

STEP1 背景を切り抜く

stamp_cat1

上記の写真を使用し、猫のスタンプを作成します。
今回は背景が不要なため、選択範囲を取って背景部分だけ削除します。
後々スタンプとして加工するため、多少荒くても問題ありません。

stamp_cat2

 

STEP2 白黒に加工をする

背景を削除したらフィルターギャラリーを使い写真の加工を行います。
使用するのは「スケッチ→スタンプ」の加工です。

明るさ・暗さのバランス、滑らかさは写真の見ために合わせて変更します。

stamp_cat3

STEP3 階調を反転させる

スタンプの加工で写真の見た目が変化したら、
「イメージ→色調補正→階調の反転」を使用し、白黒の部分を反転させます。
反転させることにより、猫の輪郭がはっきり分かる様になります。

今回は白い部分は必要ないため、選択範囲で選択、削除をして透明にします。

stamp_cat4

STEP4 色を変更してスタンプ風にする

背景を用意し、加工した猫の写真ををのせます。
(背景は好きな色を塗ったり、紙の質感の背景を用意しても良いです)

もともとスタンプは黒だったので、お好みで色合いを変更します。
「イメージ→色調補正→色相・彩度」で、色彩の統一にチェックを入れてから
色合いを変更して下さい。

stamp_cat5

STEP5(おまけ) 文字のスタンプを作る

写真ではなく文字でスタンプを作る場合は、消しゴムのブラシを使って
上からぽんぽんとなぞっていくと、かすれた感じが出るのでオススメです。

stamp_cat6
完成!!

Copenhagen based photographer Thomas Rousing, captures the beauty of everyday life in the city and objects found on his way through it. He seeks to explore the interestingness of making images filled with endless sights and beautiful colors

 ※スタンプのレイヤーのコピーを作り、不透明度を下げて配置すると、かすれた感じを表現できます。

いかがでしょうか。
好きな写真を使ってスタンプを作ると、作る作品にも愛着がわくかと思います。
是非試してみてください。

この記事に関連する講座

基本的なPhotoshop作業の操作スキルが身につく!

詳しくはこちら


カテゴリー: Photoshop デザイン

Illustratorで文字を中央に整列させる

基本操作を一通り習得し、いざ制作をしていると意外と簡単なことで躓くことがあります。
何かのオブジェクトに綺麗に文字を整列する機会は非常に多いと思います。しかしIllsutratorで文字を中心よ合わせるには意外と手順が多く、知らずに困る方が多いようです。

整列のオプション「プレビューの境界線を使用」と効果の「オブジェクトのアウトライン」を組み合わせます。

図では長方形と文字を用意しました。

moji01

長方形と文字を同時に選択し、整列パネルで「水平方向中央に整列」と「垂直方向中央に整列」を実行します。

すると水平方向は中央に整列しますが、垂直方向は文字が上にずれて整列してしまいます。

moji02

文字だけ選択して観察すると、文字を囲っているバウンディングボックスが文字よりも下の部分だけ大きくなっています。

moji03_1

これは文字にはベースラインという文字の整列位置を決める基準線があります。図のようにアルファベットでは小文字がベースラインよりも下になる場合があるため(小文字の「g」や「y」など)、ベースラインよりも下が大きく空いています。※Illustratorではディセンダラインよりもさらに下にスペースがあります。

そのため、垂直方向に整列を行うと、長方形と文字のバウンディングボックスが整列することにより、上にずれて見えるということです。

moji03_2

ではどうすれば中央に整列するのか?
整列のオプション「プレビューの境界線を使用」と効果の「オブジェクトのアウトライン」を組み合わせます。

整列パネルの右上からフライアウトメニューを表示し、「プレビューの境界線を使用」をクリックします。※すでに「プレビューの境界線を使用」の左にチェックマークが入っている場合はこの操作は不要です。

moji04

次に、文字を選択し、効果メニューから「パス」の「オブジェクトのアウトライン」を適用します。

moji05

すると文字を囲んでいたバウンディングボックスが文字ぎりぎりのサイズに変化します。

moji06

この操作の後、長方形と文字を同時に選択し、整列パネルで「水平方向中央に整列」と「垂直方向中央に整列」を実行します。文字を上下左右に中央揃えできました。

moji07

IllustratorやPhotoshopを使いこなす上で難しいのは、基本操作を習得しても、それらを組み合わせる方法を知らないと意外と簡単なことが出来なかったりします。たくさん作品を制作して、たくさん躓くことで様々なテクニックを習得できます。

この記事に関連する講座

Illustratorを使いこなす!

詳しくはこちら


カテゴリー: Illustrator グラフィック デザイン

Dreamweaver CC2014のライブビューを活用する

今回はDreamweaver CC2014でライブビューを活用する一例をご紹介したいと思います。

Dreamweaver CC2014では、ライブビューで直接編集ができるようになりました。

Dreamweaverのライブビューでは、webkitと同じプレビューが可能ですので、デザインビューより正確なコーディングが行えます。

 

下の図のように、[挿入パネル]→[ヘッダー]のボタンをライブビューにドラッグします。

pic-20160524_01

こうするだけで、ライブビューへ直接、headerタグの挿入ができます。

 

挿入後、下記の図のようにid名もしくはclass名をつけるためのボタンが出てきます。

pic-20160524_02

「+」のボタンを押し、「#test」と入力します。

pic-20160524_03

すると、図のようにheaderにid名がtestとついた状態でコードを記述してくれます。(Class名であれば「.」をクラス名の前につけます。)

pic-20160524_04

 

このように、DreamweaverCC2014では、ライブビューによる正確なコーディングが行えますので、是非試してみてくださいね。

 

この記事に関連する講座

Webサイト作成の定番ソフトDreamweaverを使いこなす!

詳しくはこちら


カテゴリー: Dreamweaver Web デザイン

Photoshop(フォトショップ)の使い方 ~基本編~

image-editing-101040_640 Photoshopの使い方は難しいと思われがちですが、基本的な動作を覚えるだけでできることがたくさんあります。 基本的な動作を覚えるだけで、写真を切り抜くことが出来たり。画像の明るさを変えたり、色味を調整することができるようになります。 現在、これらのスキルはIT業界だけでなく、雑誌社などのマスコミ関係や意外なところだと写真館などにも必要とされています。 基本的な動作を覚えるだけで、仕事や趣味にPhotoshopを生かすことができます。

Photoshop(フォトショップ)とは

PhotoshopとはAdobe社が開発した画像編集加工用のソフトです。 利用にあたってはPhotoshopのラインセンス契約をAdobe社と交わさなければいけません。これはインターネット上で済ませることができますが、学割や法人契約、年間契約などのプランを選ぶことができます。 現在は1ヶ月間限定の無料体験版もあるので、初めて使われる方は無料体験版になれてから購入することもできます。 このソフトは主に写真の編集や、加工に特化しているため印刷業界のあらゆる場面で使用されています。 ひとくちに画像の編集や加工といってもさまざまな機能があり。 同じような機能を持ったスマートフォンのアプリがありますが、そういったモノよりも専門的なことができるソフトなのです。

Photoshop(フォトショップ)でできること

Adobe社が開発した画像を編集、加工するソフトPhotoshopは合成写真を作ったり、雑誌の表紙を飾るような写真をよりキレイに加工するのに使われます。 このPhotoshopはさまざまな画像の加工ができるため、デザインを仕事にする人だけでなく。ウェブサイトに画像を掲載したり、ポスターを作ったりするときなどに使用され。このソフトを使ってできることは、とても幅広いです。 たとえば、撮った写真にポラロイド写真のような白いふちをつけたり。写真の色身を調整することで、写真の印象を変えたりすることができます。 また、写真に写った人物を加工する方法もあり顔にモザイクをかけたり。シワやほうれい線を消したりすることもできます。 それにポスターなどに使えるように写真に文字を入れたり。そのテキスト文章をいろいろと加工することもできるのです。

まとめ

Photoshopを使いこなすことが出来ればいろいろな場面で活躍することができます。 たとえば、家族で写真を撮ったときなどに、より鮮やかに加工することができますし。大切な記念の写真などのときに気になる部分を修正することができるようにもなります。 もちろん、仕事の際にもPhotoshopが使えるととても楽になるでしょう。操作を覚えてさえしまえば、プレゼンテーション用の資料を作るのも楽に、より分かりやすく作ることもできます。 趣味に仕事に使える場面が多いので、覚えておいて損はありませんよ!

この記事に関連する講座

Photoshopを使えるようになってみませんか?

詳しくはこちら


カテゴリー: Photoshop Web デザイン

超簡単!お肌のレタッチ術

042

肌のレタッチ方法はさまざまな手法があります。
シワやシミ・そばかすなどを1つ1つ丁寧に処理する方法もありますが、
今回は一度に簡単にキレイにし仕上げる方法を解説します。
ぜひ参考にしてください。

●手順1

step1
まずはレタッチしたい素材の背景レイヤーを複製します。

●手順2

step2
このままでは全て滑らかになってしまうので、目・鼻・口など
滑らかにしない箇所にマスクをかけます。

「背景コピー」レイヤーにレイヤーマスクをかけ、チャンネルパネルに切り替え
「背景コピーマスク」チャンネルを確認しながら、滑らかにしたくない個所を
黒いブラシで塗りましょう。

ポイントは、目・鼻・口などの際をブラシで塗る際、ブラシの直径を小さく、
硬さを0%にして丁寧に輪郭を塗るとキレイで自然な仕上がりになります。

●手順3

step3
更に「背景コピー」レイヤーを複製します。

●手順4

step4
上の「背景コピー2」レイヤーを非表示にし、「背景コピー」レイヤーにぼかしをかけます。
「フィルター→ぼかし→ぼかし(ガウス)」を選択し、シワなどが分からなくなる程度まで
半径を調整します。
今回は半径を3.0pixcelに設定してあります。

●手順5

step5
手順4で非表示にした「背景コピー2」レイヤーを再度表示します。
「背景コピー2」レイヤーにハイパスフィルターをかけます。
「フィルター→その他→ハイパス」を選択し、全体をシャープにします。
(分かりにくいかも知れませんが、顔に泥パックをしているようなイメージでしょうか?)
今回は手順4同様に半径を3.0pixcelに設定してあります。

●手順6

step6
「背景コピー2」レイヤーの描画モードを「リニアライト」にします。

●手順7

step7
このままでは逆にシワなどが目立ってしまいますので、「背景コピー2」レイヤーの
不透明度を落として肌がなめらかになるように調整します。
今回は20%まで落としました。

●手順8

step8
これで肌のレタッチは完成です。滑らかなツルツルお肌にレタッチできましたよね。

素材によりけりですが、今回は空やペットボトルの透明感を出すために
「レベル補正」でシャドウとハイライトを少し調整しました。

●手順9

step9
更に光源がペットボトルに当たって反射している雰囲気を出すために、
逆光で光を追加して完成です。

●Before・After

before

after
いかがでしょうか?
一度で簡単にキレイにレタッチできましたよね?

今回の「ハイパスフィルター」を使った肌のレタッチ方法は良く使われる方法です。
「いかにマスクを丁寧に作るか」がポイントになります。
ぜひみなさんもチャレンジしてみてください。


カテゴリー: Photoshop Web デザイン 写真

HTMLを始めよう! その1

【おすすめ講座】基本が身につく! HTML/CSS

computer-1185637_640

「Webサイトを作りたい!」と思った時にみなさんは、まずWebサイトのデザインを思い浮かべると思います。日ごろ見ているWebサイトが「見やすい!」「かっこいい!」などの印象が強いからです。

Webサイトを作る時には、コーディング(内容記述)とデザイン(画像)の両方が必要となります。

今回は、コーディングのお話をしたいと思います。

Webサイトのコーディングは「HTML」というマークアップ言語を使用します。
マークアップ言語とは、プログラミング言語とは違い、「タグ(要素)」を使い、、「ここからここまでが○○です」「ここからここまでが○○です」といった印(意味)をつける言語です。
だから「マークアップ言語」と言います。

プログラミング言語と言えば「何かに対して処理をする」「計算をする」等の言語になりますが、HTMLのようなマークアップ言語では、「表示させる」ための言語です。

html

HTMLと一緒に使用するのが「CSS」です。
スタイルシートの規格の1つで、HTMLで記述したページのスタイル(見た目・レイアウト)を記述します。

HTMLがWebページ内の文書構造を定義するのに対して、CSSはそれらをどのように装飾するか指定します。

css

また最近のWebサイトで欠かせないのが「JavaScript」です。
JavaScriptは、インタープリタ型のプログラミング言語です。HTMLとCSSだけでは、静的な表示になってしまいますが、JavaSciptを使用すると、動的な情報を表示できます。

javascript

主にJavaScriptのライブラリのひとつである「jQuery」が使用されます。
ライブラリとは、「便利な命令の集まり」です。複雑なJavaScriptを記述して実現していたアニメーション機能などを、よりシンプルに少ない記述で実現してくれます。

このように、Webサイトを作る際には、「HTML」「CSS」「JavaScript(jQuery)」が必要となります。

デザインの設計・作業をする際はPhotoshopやIllsutratorなどのグラフィックソフトを使用しますが、HTML、CSS、JavaScriptなどのコーディング作業もWeb制作においてとても重要です。これからWeb制作スキルの学習を検討している方は、こちらも調べてみてください。


カテゴリー: Web デザイン

Illustratorで色鉛筆風のロゴを作ろう

colour-pencils-450621_640
Adobe Illustratorで色鉛筆のような質感のロゴを作ります。
ポスター、名刺などで文字を使う際、ちょっとアレンジを加えたい方におすすめです。

STEP1 好きな文字を書く

まずはロゴにしたい文字を用意します。フォントや大きさは作品に応じて変更してください。

logo_1

STEP2 落書き風のアレンジを加える

このままだと普通の文字なので、ペンで落書きをしたようなアレンジを加えます。
「効果→スタイライズ→落書き」のメニューを使用します。

logo_2

線の太さや質感の加減は各メニューを使って変更してください。プレビューを見ながら行うと便利です。
好みの線が作れたら、「パス→アピアランスを分割」を選択します。

logo_3

logo_4

STEP3 鉛筆風のブラシを作る

ここから鉛筆風のブラシを作成します。

まず、小さな円を1つ作ります。作った円をブラシパネルにドラッグし、散布ブラシとして保存します。
(ブラシパネルが出ていない場合は、「ウィンドウ→ブラシ」を選択し、パネルを表示してください)

logo_5

STEP4 文字にブラシを適用させる

先ほど作った文字に、ブラシを適用させます。この時に散布ブラシオプションを表示させ
サイズ、感覚、散布、回転をともにランダムにします。その後は数字を動かし、好きな質感になるまで
調整します。
(迷う場合は写真の数値を参考にしてください)

logo_6

あとは色を付ければ完成です。

logo_7

完成!

ken_logo
いかがでしたか?今回は文字でしたが、自分で描いたイラストなども同じ手順でアレンジができます。
作品に合わせて是非試してください。


カテゴリー: Illustrator Web デザイン

Dreamweaverでコードをきれいに書き直す方法

student-849825_640

みなさんこんにちは。
今回はDreamweaverでコードをきれいに書き直す方法をご紹介いたします。
まずは、下の図を見てください。

図1

このように、コードを書いていると必要のないところに改行やインデントを入れてしまうことってありませんか?
そのような時にDreamweaverで役立つ機能が「ソースフォーマットの適用」です。
この機能は、乱雑なコードも見やすいようにきれいに書き直してくれます。
では、実際にこの機能を使ってみましょう。
下の図の、赤い矢印が指し示しているボタンをクリックし、
「ソースフォーマットの適用」をクリックします。

図2

適用した結果は以下になります。

図3

無駄な改行やインデントが消え、きれいにコードが並んでいるのが分かります。
このような機能を使えば、見やすいコードを誰でも簡単に書くことができます。
コードを書く上で、とても便利な機能なので、是非使ってみてくださいね。


カテゴリー: Dreamweaver Web デザイン

Illustratorのグローバルカラーについて

bricks-789888_640

今回はIllustratorのグローバルカラーについてご紹介いたします。
デザインをする時、スウォッチを使って同じ色をいくつものオブジェクトに適用することがあります。
例えば、下の図を見てください。

図1

オブジェクトが3つ並んでいます。
例えばこの3つのオブジェクトにスウォッチを使ってピンク色を設定するとします。
適用する前に使用する色のスウォッチをダブルクリックしてみましょう。
すると、下の図のようなスウォッチオプションが出てきます。
ここの「グローバル」とかかれている部分にチェックを入れておきましょう。
これだけでこの色はグローバルカラーとなります。

図2

このグローバルカラーになった色を3つのオブジェクトに適用します。もちろん色はピンク色(今回のサンプル画像上)になりますが、ここで、スウォッチからもう一度グローバルカラーとなったピンク色をダブルクリックしてみましょう。
再度スウォッチオプションが出てくるので、下の図の赤い枠の部分で色を変えてOKを押します。

図3

すると、ピンク色を適用したオブジェクトが全て違う色に変わります。
このように、グローバルカラーに変えておけば簡単に全てのオブジェクトの色を変える事ができます。
色をスタイルのように使用できるので、のちの調整の際も一括変更ができて、とても効率的です。
みなさん、ぜひ試してくださいね。


カテゴリー: Illustrator デザイン

イラストレーターで和なデザイン

Illustratorを使い和風なデザインをご紹介します。

wa_complete

枯山水のような、水墨画に出てくるようなデザインです。

STEP1

直線のためのアートブラシ作成
適当な長さで直線を1本描きます。(サンプル:太さ1pt)

wa_1

STEP2

[オブジェクト]-[変形]-[移動]を選択します。

位置 水平方向「1mm」
移動距離   「1mm」

[コピー]ボタンを押します。

wa_2

「Ctrl」+「D」キーで数回繰り返します。(サンプル8回)

線を交互に選択し、塗りに「白」を設定します。

wa_2_a

STEP3

アートブラシに登録します。

描いた線をすべて選択し、[ブラシ]パネルにドラッグします。
新規ブラシの種類を「アートブラシ」を選択し「OK」ボタンを押します。

wa_3

[アートブラシオプション]の設定は規定のまま「OK」ボタンを押します。

STEP4

円を描くためのアートブラシ作成
「塗り」があるアートブラシで円を描くと塗りで円が見えなくなるため、
円をアウトライン化しアートブラシに登録します。

線の束をコピーします。
すべて選択し、[オブジェクト]-[パス]-[パスのアウトライン]を選択します。

wa_3_a

「STEP2」同様にアートブラシに登録します。

直線や楕円を描き、アートブラシを適用します。
直線・・・直線のためのアートブラシを適用
円・・・・円のためのアートブラシを適用

wa_4

STEP5

楕円の組み合わせパーツを作成します。

半円

[ダイレクト選択ツール]で右側のアンカーポイントを選択し、「Delete」キーを押します。

wa_5

円1/4

[ダイレクト選択ツール]で半円同様に右側のアンカーポイントを削除します。
半円の状態から、下のアンカーポイントを選択し削除します。

wa_6

円3/4

[アンカーポイントの追加ツール]でパス上にアンカーポイントを追加します。
[ダイレクト選択ツール]でアンカーポイントを削除します。

wa_7

STEP6

作成した組み合わせパーツと直線を組み合わせます。

wa_8

パズルのようにいろいろ組み合わせてデザインしましょう。

今回使用した機能は、
・直線を描く
・移動
・繰り返しのショートカットキー
・アートブラシの登録
・アンカーポイントの操作

基本的な操作の組み合わせでたくさんのデザインを作成するできます。
ぜひ、Illustraotrを学んでみましょう。


カテゴリー: Illustrator Web デザイン

スマートオブジェクト、スマートフィルターを活用して写真加工をしてみよう!

cat

今回はAdobe Photoshopのスマートオブジェクト、スマートフィルターを使用した写真加工を紹介します。
機能の名前は聞いたことがあるけれど、どのように使用したら良いか分からないという方に、簡単に使えるテクニックをお伝えします。

★STEP1 スマートオブジェクトとは

スマートオブジェクトとは、画質を劣化させずに編集ができる便利な機能です。
Photoshopのデータはサイズの変更や細かい修正作業により、画質が劣化してしまいます。
それを防いでくれるのがスマートオブジェクトの特長といえます。

レイヤー上で右クリックをして「スマートオブジェクに変換」を適用します。

1-1

1-2

★STEP2 スマートフィルターとは

次にスマートフィルターについての紹介です。
スマートフィルターとは、スマートオブジェクトに変換することで使用可能になるフィルター用の編集機能です。

フィルターとは「ぼかし」や「シャープ処理」、「スマートフィルターギャラリー」による写真加工といった様々な効果を適用できる機能です。
2-1

しかし、このツールに弱点が一つあります。それが「あとで修正ができない」という点です。
2-2

この写真をスマートオブジェクトに変換することで、フィルター効果をかけ直したり、不要であれば削除できるスマートフィルターが使えるようになります。
次のステップで、その内容を詳しく説明します。

★STEP3 スマートオブジェクト、スマートフィルターを使ってみよう

それでは、スマートオブジェクト、スマートフィルターを実際に使用しましょう。
今回は先ほどの猫の写真を使用します。

3-1
※あらかじめスマートオブジェクトに写真を変換してください。

スマートオブジェクトに変換したら、フィルターメニューで使用する特殊効果を選びます。
作りたい写真によって変わりますが、今回はフィルターギャラリー→「粗いパステル画」を使用します。
3-2

選択してOKを押すと、レイヤーにスマートフィルターという機能が追加されます。
3-3

レイヤー内の「フィルターギャラリー」部分をダブルクリックすれば、もう一度フィルターギャラリーで効果をかけ直せます。
また、フィルターギャラリー効果の横にあるアイコンを選択することで描画モードや不透明度も設定できます。
3-4
3-5

もちろんフィルター効果は重ねがけもできるので、好みの効果をかけましょう。
3-6

★STEP4 マスクを使ってより効率よく加工しよう

今回の写真ではマスクは使いませんが、スマートフィルターではマスクも使用可能です。
マスクを使えば一部だけ効果を隠す、表示させるといった細かい修正もできます。
編集する画像によって使い分けましょう。

4-1
※黒く塗った背景部分だけ、フィルターの効果が隠れています。
白で残っている猫の部分は効果が残っている状態です。

いかがでしょうか?今まで何かと手間だったフィルターでの編集作業、
何度でもやり直しができるようになるとそれだけで作業効率はぐっと上がります。
ぜひスマートオブジェクト、スマートフィルターを使いこなし効率の良い写真加工に挑戦して下さい。

cat


カテゴリー: Photoshop デザイン

地図の描き方(Illustrator編)3

前回に引き続き地図を仕上げます。

map01

作成の流れは以下の通りです。

[自由変形ツール]で変形→[ドロップシャドウ]を設定→立体物の作成→[不透明マスク]を設定→文字・ロゴを配置

▼[下絵]レイヤー以外を全て表示し、地図部分を全て選択して[コピー]し、[ファイル]メニュ→[新規]を開きます。
・名前:KENstudio_map、新規ドキュメントプロファイル:プリント サイズ:A4 方向:横
▼[レイヤー]パネルメニューの[コピー元のレイヤーにペースト]をチェックして作成したファイルに地図部分を[ペースト]します。ファイルを「Links」フォルダーに保存し、同時に平面地図を作成したファイルも閉じます。
▼[コピー元のレイヤーにペースト]のチェックを外します。(特殊な処理ですので、必ず元に戻してください)

線の指定がされているパスをすべてアウトライン(塗りのみ)にします。

map12
map13

▼すべてのパスを選択し[オブジェクト]メニュー→[アピアランスを分割]し、さらにすべてのパスを選択し[オブジェクト]メニュー→[パス]→[パスのアウトライン]にします。

すべてのパスがアウトライン化されましたので、遠近感を出す変形をします。

▼すべてのパスを選択し[ 自由変形ツール]で右下のバウンディングポイントを[Ctrl]+[Shift]+[Alt]+ドラックし、下辺が上辺より二倍弱の長さ程度(右記参照)まで伸ばします。
([Ctrl]+[Shift]+[Alt]はマウスを押した後に押してください)

map14

つづけて、それぞれの設定をします。

▼「道」レイヤー以外をすべて隠し、すべての道路のパスを選択し[パスファインダ]→[合体]して、指示に沿って設定します。
・[透明]パネル:不透明度「50%」
・[効果]メニュー→[スタイライズ]→[ドロップシャドウ]:描画モード「乗算」、不透明度「30%」、Y軸オフセット「1mm」、ぼかし「1mm」
 ※表示バケや操作スピードアップのため、[効果]メニュー→[ドキュメントのスタイライズ効果設定]で解像度を「72ppi」に設定

map15

▼「道」レイヤーを隠し、「地下」レイヤーを表示、「地下」レイヤーを「道」レイヤーの下へ移動し順序を変えます。
▼地下鉄駅部分を選択し[ドロップシャドウ]の設定をします。
・ドロップシャドウ:描画モード「乗算」、不透明度「40%」、Y軸オフセット「0.5mm」、ぼかし「0.5mm」

map16

▼すべてのレイヤーを表示し、「地上」レイヤー以外をすべてロックします。
▼JR駅、小田急、京王とKENスタジオの四つのパスを選択し、立体図作成のため[コピー]します。
▼選択されたパスには[ドロップシャドウ]を設定します。
・ドロップシャドウ:描画モード「乗算」、不透明度「50%」、Y軸オフセット「1mm」、ぼかし「1mm」

map17

▼[コピー]したパスをアートボードの外などに[ペースト]します。JR駅、小田急、京王を選択し少し上に[Alt]+ドラックで移動複製します。
▼京王の側面のパスを作成します。京王以外のパスを[Ctrl]+[ 3 ]で隠します。
▼下記の①赤丸部分のパスを[Shift]を押しながら[ ダイレクト選択ツール]で囲むように選択して[コピー]し、別の場所に[ペースト]します。
▼ポイントではなくパスをそれぞれ選択したので、直線1本ずつがバラけていますので、②緑丸部分のアンカーポイントを選択し[Ctrl]+[J]で[連結]します。③塗りができますので、緑丸部分を選択するために塗り部分をクリックします。塗りをクリックするとパスが選択されるので、その状態で[連結]します。つづけて④の緑丸のアンカーポイントを で選択し[連結]、⑤を選択するために塗りをクリックして選択し[連結]します。側面のパスができましたらコピー元とぴったり合せます。(塗りは上K20%、横K40%、下K60%、)

map18
map19

▼隠したパスを[Ctrl]+[Alt]+[C]で[すべて表示]し、同じ手順でJR駅、小田急の側面を作成します。KENスタジオ部分は高い建物にするため、下記を参照して移動複製してください。パース的なバランスで移動複製したパスの上下を1/3程度短くすると良いでしょう。
▼立体部分が完成しましたら、[グループ]化し地図の上に乗せます。

map20map21

地図の形が完成しました。遠くの部分を薄く消すためにIllustratorで不透明マスクを設定します。

▼すべてのレイヤーのロックを外し、「地上」レイヤーを選択し、地図がギリギリの長方形を作成し、[線]は「なし」、[塗り]は「白→黒グラデーション」で下記のようにグラデーションを設定します。

map22
map23

▼長方形を含めたすべてのパスを選択し、[透明]パネルメニュー→[マスク作成]ボタンをクリックします。

map24

▼「地上」レイヤーの上に「文字」レイヤーを作成し、文字を配置します。下記の文字をバランスよく配置します。
・JR新宿駅 東口 西口 南口 小田急 京王
・インテリアデザイン/建築設計/ブランディング
・KENスタジオ
・東京都渋谷区代々木2-9-2 久保ビル 4F
▼ロゴは「Iinks」フォルダーの「ken_studio_rogo_white.ai」より[コピー][ペースト]します。

これで地図の完成です。ちょっと時間かかりますが是非挑戦してみてください。

map01


カテゴリー: Illustrator Web デザイン

地図の描き方(Illustrator編)2

folding-map-360382_640

以前にIllsutratorで地図を描く記事を掲載しましたが、
今回はも少し高度な地図の描き方を試してみましょう。

map01

作成の流れは以下の通りです。

平面地図を作成→[自由変形ツール]で変形→[ドロップシャドウ]を設定→立体物の作成→[不透明マスク]を設定→文字・ロゴを配置

まずは下絵にそって平面地図の道路をトレースします。

▼「素材」フォルダー→「地図」フォルダー→「KENスタジオ地図(平面)作成.ai」ファイルをIllustratorで開きます。
※下絵は線幅をわかりやすくするために色を変えてあります。
▼[ウィンドウ]メニュー→[レイヤー]パネルを表示して「下絵」レイヤーを表示、「道」レイヤーを表示選択し[ペンツール]を使い太さの違う三種類の道路のパスを作成します。
※曲線が難しい場合は直線のみでもかまいません。
・道路の線色:C40+M20+Y20 塗り:なし
・線幅:道路 (太) 7mm、道路 (中) 3.5mm、道路 (細) 0.5mm

map02

次に、地下鉄の路線をトレースします。

▼「道」レイヤーを隠し、「地下」レイヤーを表示選択し[ペンツール]を使い地下鉄の路線のパスを作成します。
・路線の線色:K60 塗り:なし

map03

トレースした路線から地下鉄の駅を作成します。

▼路線のパスをすべて選択し、[コピー]して、[Ctrl]+[ 3 ]で隠し、[Ctrl]+[F]で[前面へペースト]します。
▼ペーストしたパスの地下鉄駅の両端を[ ハサミツール]で切断し、[線幅]を「2mm」に、[丸型先端]をクリックします。
▼[オブジェクト]メニュー→[パス]→[パスのアウトライン]を選択し、[線幅]を「1mm」、[塗り]を「白」にします。
▼他の駅も同じように作成し、計9つの地下鉄駅を作成します。

map04

map05

map06

map07

地下鉄の路線が完成しました。つづけて地上の路線を作成します。

▼[地下]レイヤーを隠して[地上]レイヤーを表示し、指示に従い路線を[ペンツール]で描きます。
JR線は[ウィンドウ]メニュー→[アピアランス]パネルを表示し、線を二重に重ねます。
・小田急線、京王線:線幅1mm、線色K60%
・JR線(アピアランス下):線幅1.5mm、線色K60%
・JR線(アピアランス上):[アピアランス]パネルメニュー→[新規線を追加]し、線幅0.5m、線色K10%、破線(線分)8mm

▼建物を[ペンツール]で描きます。
・JR新宿駅、小田急、京王:線なし、塗りK20%
・KENスタジオ:線なし、塗りM90%+Y75%(KEN Studio Red)

map08

map09

map10

map11

平面地図が完成しました。
立体的にパースをかける作業には[パスのアウトライン]が必要なため、作成した平面地図はこのまま保存し、新たなファイルにパスを複製して作業をすすめます。

次回はこちらを立体的にする手順に進みます。乞うご期待!


カテゴリー: Illustrator デザイン

Photoshopブラシの利用

paintbrush-464206_640

みなさんはPhotoshopブラシについてどのくらい知っているでしょうか?
Photoshopに初期設定として入っているブラシだけではなく、
ネット上を探してみれば、沢山のブラシが配布されています。
今回は配布されているブラシを読み込んで実際に使う過程をご紹介します。

1. Googleなどで、「Photoshop ブラシ フリー」などで検索し、気に入ったものをダウンロードします。

2. Photoshopのブラシの拡張子は「.abr」です。今回は仮に「test.abr」とします。

3. Photoshopを起動し、新規でファイルを作ります。

4. ツールパネルからブラシツールを選びます。

5. 図1で、赤丸で囲まれている中の▼をクリックします。

図1

6. 図2で、赤丸で囲まれているアイコンをクリックします

図2

7. プルダウンメニューに中から「ブラシファイルの読み込み」をクリックし、
ダウンロードしたブラシファイルを読み込みます。(今回はtest.abrです)

図3

8. ブラシファイルを読み込みと、スクロールした一番下に新しく追加したブラシが表示されるので、
気に入ったものを選び、カンバスにブラシを使って何か描画しましょう。

図4

いかがでしたか?
このように簡単にブラシファイルを読み込むことができます。
沢山ブラシがあれば、それだけ表現の幅も広がるので、是非とも利用してください。


カテゴリー: Photoshop Web デザイン

カラフルな鋲の作り方

完成例

このような素材は、制作する上で様々な場面で活躍します。
Webページのメイン画像に配置しても、バナーの一部としても活用できます。

では、このような「鋲」の素材はどのように作るのでしょうか?
Adobeのグラフィックソフト【Illustrator】の[3D]という機能を使うと、簡単に作成できます。

 

①まず中央の指標となるようにガイドを用意します。

step01

②ガイドに始点と終点がくるように、ペンツールを使用して下記のようなパスを描きます。

 ※ペンツールの描画方法は割愛させていただきます。
 (色は任意で設定してください。針の色はシルバー系が望ましいです)
step02

③3D効果を適用します。

 [効果]メニュー→[3D]→[回転体]を選択。
step03

④[3D回転体オプション]ダイアログパネルが表示されますので、作業しやすいようにプレビューにチェックを入れます。

step04

⑤[位置]を好きな確度に動かします。

 (今回は、X軸-140度、Y軸-35度、Z軸135度に設定)
step05

⑥針の位置を調整します。

 ⑤の手順で確度が変わるため、ここの手順で調整します。
step06

⑦お好みで影を付けて完成です。

step07

 
いかがでしょうか?
思っていたよりも簡単にリアリティ溢れるカラフルな「鋲」が作れたのではないでしょうか?

今回の制作には、KENスクールのIllustrator講座で学習する「ペンツール」と「3D」の機能を使いました。

難しそうな素材でも、機能を上手に活用すれば時間短縮・作業効率に繋がります。
是非、様々な素材作りにチャレンジしてみてください!


カテゴリー: Illustrator Web デザイン

つやつやのボタンを作ろう

glass-beads-249511_640

今回はAdobe Photoshopを使用して、つやつやのボタンを作ってみましょう。
Webページなどで必ず使用されているナビゲーションボタン、
今回のようなデザインは良く見かける定番テクニックです。是非挑戦してみて下さい。

STEP1

任意のサイズの新規ドキュメントを作ります。
その中に、シェイプツールで角丸長方形を作ります。色は後で変更しますので、最初は何色でもかまいません。
blog1

STEP2

レイヤーパネルの「レイヤースタイルを追加ボタン(fx)」から、グラデーションオーバーレイを選びます。
ここで自由にボタンの色を決めてください。薄い色から濃い色へと指定すると、少し浮き出たボタンが作れます。
縁取りを付けたい場合は、同じくレイヤースタイルの中から「境界線」をつけてください。

blog2

blog3

STEP3

レイヤーの角丸のサムネイル部分にカーソルを当てて「Ctrl+クリック」をします。
すると、角丸部分の選択範囲が自動で取れます。
次にツールパネルの選択ツール(楕円)を選び、オプションバーの指定を「現在の選択範囲との共通範囲」にして、
図のように四角の選択と楕円の選択を重ねる様にします。

blog4

STEP4

角丸長方形の選択範囲と楕円の選択範囲が重なった部分だけが残るので、
レイヤーパネルで新規レイヤーを作り、グラデーションツールで
「白→透明」のグラデーションをかけます。

blog5

STEP5

グラデーションをかけたレイヤーに不透明度を設定し、クリアな感じを出します。
※数値は任意で大丈夫です。好みの部分で止めてください。

blog6

STEP6

横書き文字ツールで任意のテキストを書きます。この時レイヤーパネルの「レイヤースタイルを追加ボタン(fx)」から
ドロップシャドウをかけるとへこんだ感じを表現できます。

blog7

これで完成です!

blog8
※同じボタンを反転させ、反射した感じを表現することもできます。

いかがでしたでしょうか?
もう少し境界線を太くしてみたり、クリア感を出す部分を丸ではなく四角にしてみたり…
様々な形を用いてアレンジすると、自分の気に入った作品が作れるかもしれません。
是非参考にしてください。


カテゴリー: Photoshop デザイン

Photoshop CC 2014の新機能で星空演出

Dust in the Night Sky - Lucerne Valley, CA, USA

Photoshop CC 2014では「ぼかしギャラリー」として2つのぼかし機能が追加されました。
「パスぼかし」と「スピンぼかし」です。
ぼかしギャラリーでは直感的に画像をぼかせます。

今回は、「パスぼかし」を紹介します。

星空を神秘的に演出します。

マグネット選択ツールやなげなわツールを使い、夜空を選択します。

star1

[フィルター]メニュー – [ぼかしギャラリー] – [パスぼかし]を選択します。

star2

画面上に青いパスが表示されます。
パスの始点・パスの曲線点・パスの終点をドラッグしながら調整します。

star3

オプションバーの「OK」ボタンで確定し完成です。

star4

「パスぼかし」を使用することで、直線的なぼかしではなく、曲線的なぼかしを演出し、よりリアルに加工できます。


カテゴリー: Photoshop デザイン

地図の描き方(Illustrator編)

map-455769_640

今回はAdobe Illustratorを使用して地図を描きます。
地図と言っても色々な物がありますが、
道に迷わないために「駅から目的地周辺」を含めた地図をよく見かけます。

017_kansei

KENスクール横浜校は、駅からは近いものの
初めての方は迷ってしまう事も少なくありません。
そんな「横浜駅」と「KENスクール横浜校」の地図を作成します。

001_shitae

地図を作る時には、下絵を元に「トレース」するため、横浜駅近辺のラフを用意しました。
既存の地図等を下絵にするのも良いでしょう。
下絵はスキャナーなどでデータ化して見やすい角度へ回転し
Illustratorの新規ファイルへ[配置]します。

002_haichi

配置した下絵画像のレイヤーは、わかりやすく[下絵]レイヤーと名前を変え、
ダブルクリックし[レイヤーオプション]で[画像の表示濃度]にチェックをして見やすくします。

003_kawa

新たに[地面]レイヤーを作成し、川を[ペンツール]などでトレースします。
下絵はラフですので、正確に合わせる必要はありません。
微調整をして見栄えの良い形にします。

004_michi1

新たに[道]レイヤーを作成し、[ペンツール]などで道をトレースします。
まずは[線幅]で調整できる均等の道を描きます。太さは道に合わせて調整します。
※レイヤーの[目]を[Ctrl]クリックすると、そのレイヤーのみ[アウトライン]表示になります。

005_michi2

線幅では補えない道の形は、道と同じ[塗り]の色の図形を作成します。
※場合によっては線を[オブジェクト]メニュー→[パス]→[パスのアウトライン]を使用して微調整をします。

006_jr1

道ができましたら、新たに[鉄道]レイヤーを作成します。
線路には角がないため、滑らかな曲線を心掛けるとよいでしょう。
まずはJR線を[ペンツール]でトレースします。

007_jr2

JR線は[アピアランス]パネルを使用します。
パネル左下の[新規線を追加]ボタンで線を二重にします。
・上は細めに白い点線を[線]パネルの[破線]にチェックをして作成
・下は太めの黒い線
線の太さと点線の感覚は、バランスよく整えます。

008_shitetu

私鉄、地下鉄などはJRとは違う色の線で作成します。

009_eki

線路が出来ましたら、[長方形ツール]で駅を描きます。
地下鉄の駅は[回転ツール]や[バウンディングボックス]を使い回転させ調整します。

010_tatemono

新たに[建物]レイヤーを作成し、ビルなどの図形を描きます。
今回、目的地の「スカイビル」は分かりやすく赤くします。

011_chikagai

横浜駅東口には、目印となる地下街がありますので、そちらは図形作成後
[透明]パネルで[描画モード]を[乗算]にし、[不透明度]を「50%」に薄くします。

012_kokomade

ここまでで、基本的な図形は整いました。
より良く魅せるために、色を整え、効果などを加えます。

013_kousoku

新たに高速の線をトレースし、[グループ]化した後に[不透明度]や[ドロップシャドウ]を設定します。
同時に「JR横浜駅」にも[ドロップシャドウ]の設定をします。

014_rittai

目的地の「スカイビル」は立体的なビルにします。
初めに作成した図形を120%程度拡大コピーし、屋上のような面を作ります。
その間のビル側面を[ペンツール]で[アンカーポイント]をクリックして作成し、
それぞれ少し濃いめの[塗り]にして合わせます。

015_moji

整いましたら、新たに[文字]レイヤーを作成し、それぞれ必要な文字を加えます。
色の上に文字を置く場合、文字が読みづらくならないように、
[アピアランス]を利用し、文字に線を追加して白フチなどにするとよいでしょう。
ただし、必ず線は文字のデザインを削らないよう、下へ移動してください。

016_masuku1

最後にトリミングをします。
必要な大きさの長方形を最前面に作成し、必要となる図形をすべて選択し
[オブジェクト]メニュー→[クリッピングマスク]より[作成]を選択します。
※[クリッピングマスク]は選択した物をすべて同じレイヤーにするため、微調整する場合はコピーした物にマスクしましょう。

017_kansei

地図の制作はいかがでしょうか?
難しい地図でも一つひとつ順を追って作成することで、
キレイで見栄えの良い物を作成できます。
[ドロップシャドウ]や[透明]、[変形]などを利用すると、さらに一味違う地図も作れます。

018_hoka

皆様もIllustratorでクオリティーの高い地図作成をしてはいかがでしょうか?


カテゴリー: Illustrator デザイン

Illustratorで桜の花を描こう。

japan-699741_640

今回はAdobe Illsutratorを使用して桜の花を描いてみます。
日本人にとって桜は特別な花です。桜が嫌いという方はきっといないでしょう。
Illustratorを覚えたらぜひ描けるようになっておきたいイラストのひとつです。

webblog09

任意のサイズの新規ドキュメントを作ります。
楕円形選択ツールと多角形ツールを使用し、図のような楕円と三角形を描画します。
多角形ツールは初期設定で六角形が書かれるので、ドラッグして描画中にキーボードの下矢印キーを3回押すと3角形が描けます。また、Shiftキーを押しながら描くことで真上を向いた三角形が描けます。

webblog01

アンカーポイントの切り替えツール(アンカーポイントツール)を使用し、楕円の上と下のアンカーポイントを1回ずつクリックして切替し鋭角に変更します。

webblog02

三角形を選択し「オブジェクト」メニュー→「変形」→「回転」を選択し、180度回転させます。
次に楕円の上に一部重なるように移動します。左右対称になるように、整列パネルを使用して横方向は中心を揃えておきます。

webblog03

2つの図形を選択し、パスファインダーパネルの前面オブジェクトで型抜きボタンで楕円を削ります。
※三角形の方が後ろにある場合は背面オブジェクトで型抜きボタンで削ります。

webblog04

ツールパネルで「線をなし」、「塗りをグラデーション」に変更し、グラデーションパネルで任意のピンク色を開始色、終了色に設定します。またグラデーションの種類は「円形」に設定します。

webblog05

グラデーションツールを使用して、グラデーションの中心位置を花びらの少し下に移動します。
また、任意でグラデーションの範囲を広げ調整します。

webblog06

楕円ツールでShiftキーを押しながら、正円を描画します。色は任意の黄色に設定します。
図を参考に花びらの下に配置します。水平方向は整列パネルを使用し中心を揃えておきます。

webblog07

花びらの図形を選択した状態で回転ツールを使用します。Altキーを押しながら黄色い円の中心をクリックし、回転の軸を黄色の丸の中心にします。回転軸が移動すると同時に「回転ダイアログボックス」が表示されるので、角度を「72」に設定します。コピーボタンを押して回転コピーします。
※黄色い円の中心を正確にクリックする場合は、「表示」メニュー→「スマートガイド」をオンにすると、マウスポインタを重ねたときに「中心」と表示され、正確に操作する補助をしてくれます。

webblog08

Ctrlキーを押しながらDキー(繰り返し)を3回押して、合計5枚の花びらができるように繰り返します。

webblog09

これで一輪の桜の花が完成です。
ブラシパネルに登録して散布ブラシに使用したり、ポスターやハガキをデザインする際にもいろいろ便利ではないでしょうか?花びらの形やコピーする枚数などを変えていろいろな花を描いてみてください。


カテゴリー: Illustrator Web デザイン

webデザインおすすめフリー素材サイト5選

05e4597f97c9f455e567e9422c3d5a21_s

webサイト制作をするのは単に文字を入力するだけでも可能ですし、シンプルイズベストという方もいるかもしれません。
しかし、綺麗な画像や装飾を施してユーザーの目を引くようなデザインにすることは実は重要な要素となる場合があります。
例えば、商売をする方にとっては魅力あるデザインは商品やサービス内容を認知してもらえる可能性が高まりますので必要不可欠でしょう。
そこでwebデザインをするためにおすすめのフリー素材を提供しているサイトを5つ厳選してご紹介します。

webデザインには素材が必要!

webデザインをする場合はどのような画像素材を使用するのかが重要な部分ですが、ほかにもサイトのレイアウト決めや文字の段落決め、全体的な色合いなどを考慮する必要があります。それぞれの工程はデザインをする上で重要なもので、その出来栄え次第でユーザーの満足度や滞在時間が大きく左右されることになります。
そんなwebデザインをする上で、全てを手作業で自分で生み出すのは膨大な時間と労力を必要とします。そのため、出来る限りインターネット上で提供される素材を活用することで手間を省くことが可能になるのです。
特に画像についてはネット上に様々な素材を集めたサイトがありますので、そこからダウンロードをして利用するのが圧倒的に効率が良くなりますし、仕上がりも綺麗になることが多いです。

webデザインをする時におすすめのフリー素材サイト

webデザインをする場合に活用したいおすすめのフリー素材は以下の5つで見つかります。

■PAKUTASO(http://www.pakutaso.com/ )

高解像度で高品質な素材を無料で提供しています。人物画像を使用したい場合に非常に役立ち、きっとお探しの素材が見つかります。ユーザー登録をする必要もなく手早くダウンロードできます。

■街画ガイド(http://komekami.sakura.ne.jp/)

東京近郊や近畿地方の街の写真が多く掲載されています。東京都内の画像が多いですが、高層ビルや観光地、公園、リバーサイドなどとイメージカテゴリ別に探せるのが魅力です。

■GATAG(http://free-images.gatag.net/)

自然風景が多くあるほか、人物や動植物をお探しならコチラがおすすめです。幻想的な自然風景は見るものを惹きつけ、サイトのイメージアップに繋がります。

■写真素材 足成(http://www.ashinari.com/)

全国にいるアマチュアカメラマン撮影の写真から好みの素材を選べます。ジャンルは豊富ですが風景や景色が欲しい方に適しています。掲載枚数が圧倒的で、なんと75,000枚もあります。

■tadapic(http://www.tadapic.com/)

30もの無料画像、フリー素材サイトを集めていますので手軽に画像検索できます。検索窓に欲しい画像を入力するとたくさんの画像が検索結果に表示されます。画像探しの手間を一気に省くことができます。

まとめ

いかがでしたでしょうか。
このような画像を使用することでwebサイトのデザインがよりいっそう綺麗に見栄えが良くなる期待があります。
しかし、画像をそのまませずに加工をしてオリジナリティを演出したい、そもそものwebサイトのデザインを自分で作ってみたいという方もいるでしょう。そんな方にオススメなのがKENスクールです。レイアウト設計から色彩設定、画像の加工テクニックを担当キャリアカウンセラーの徹底したサポートを受けて学べますのでスキルアップはもちろん、就転職に有利になるかもしれませんね。


カテゴリー: Web デザイン 写真

初心者向け!PhotoshopとIllustratorを使い分けるコツ

glass-473758_640

お店のチラシを作ったり、HPを作ったりする際に、「Photoshop」や「Illustrator」という名前を目にした方も多いかと思います。
でもその半面、結構使い方が難しいと感じている方もいるのではないでしょうか。
「Photoshop」は画像処理が得意、「Illustrator」はデザイン処理が得意と覚えれば、初心者にも使い分けは簡単です。
二つのソフトを選ぶ際には、どちらかだけではなく、両方を上手に使い分けていただけば、苦手な処理もよりスムーズに行えます。

フォトショ・イラレを使い分けるカンタンなコツをご紹介します!

PhotoshopとIllustratorはそれぞれに何度もバージョンアップを重ねてきました。
その度に機能が向上され、それぞれ出来ることが似通ってきています。
それでも双方のソフトウェアともに得手不得手があります。

Photoshopは「フォトレタッチ」、Illustratorは「ドロー」ソフトとして別々の場面で活躍します。
例えば、Illustratorで図形を作った場合は、Photoshopで立体的に加工する事が出来ますし、Photoshopで画像を下処理をした場合には、Illustratorで配置・文字を入れれば簡単です。
こうして、それぞれの特性を活すことで使い分けののコツがわかってきますので、作業はより効率的になります。

Photoshopが向いてる場面・Illustratorが向いてる場面

Photoshopは「フォトレタッチ」ソフトと呼ばれるソフトウェアですので、Photoshopが向いている場面は、画像を処理する際に活躍してくれます。
主に、画像の質感や明るさなどを編集したり、立体的にして、画像そのものの見栄えを良くしてくれます。
一方、Illustratorは、「ドロー」ソフトですので、手書きでは出来ない正確な図形や文字などを挿入したり、画像を拡大縮小をしたりする際に活躍します。
Photoshopでは一度作った画像の拡大・縮小を行うと画像が荒れてしまうのに対し、Illustratorは何度拡大縮小を繰り返しても画質が劣化する事がないので、Illustratorが使いやすいとされています。

まとめ

PhotoshopもIllustratorも、一般的に使いにくいと感じている方が多いソフトウェアですが、似ているようで異なる二つのソフトの使い分けさえ覚えれば、それほど大変ではなくなります。
「Photoshop」と「Illustrator」は、バージョンアップを重ね、出来る内容が似通ってきていますが、ご紹介したとおり得意分野がそれぞれあります。
両方の得意分野を上手に使い分けていただけば、難しい処理もよりスムーズに行え、苦手意識もなくなるかもしれません。


カテゴリー: Illustrator Photoshop デザイン

Photoshop(フォトショップ)初心者が抑えておきたい基本写真加工ツール5選

photographer-407068_640

仕事で写真を撮ったり、画像を編集したりしている人はもちろん、日頃から写真を撮るのが趣味という人にも、Photoshopの写真加工ツールは便利です。少しでも使えるようになっておくと、「ちょっと残念なミス写真」が「味のあるよい写真」に変わるかもしれません。
どのような写真でも、明るさや色調を補正してやると、見た目が大きく変わりますし、補正の仕方次第では、カメラの腕前が少し上がったように見えるかもしれません。
そこで、Photoshopの写真加工ツールのうち、初心者にも使いやすい基本のツールを5つだけ厳選してご紹介することにしました。

Photoshop(フォトショップ)の基本写真加工ツール

「写真を加工したいと思うのはどんなときか」と考えた場合、完全な失敗写真は加工の対象にはならないということに気がつくのではないでしょうか。
やはり、おおむねうまく撮れているのに「どこか物足りない」「何となく見栄えが悪い」というときに、写真を加工したくなるようです。
例えば、せっかくよい表情の写真が撮れたのに、後でパソコンの画面で見たら少し暗かったという場合。それなら、明るさを足してやるだけで十分でしょう。
また、水平に移っていれば申し分なかったのにというレベルであれば、ゆがみを補正してやるだけで満足のいく写真になります。
もしこの程度のことであれば、Photoshopの写真加工ツールの中でも極基本の機能だけで直すことができますから、初心者でもすぐに使い方を覚えられるのではないでしょうか。

抑えておきたい基本写真加工ツール

Photoshopを使うならぜひ抑えておきたい基本の写真加工ツールを、5つだけ挙げるとしたら次のようになります。

まず、1つめは「レベル補正」の機能。明るすぎたり暗すぎたりする写真の明度を補正するときに使います。

2つめは「フィルター」機能。これは、ぼかしたり水彩画のように加工したりするような「特殊効果」と言った方がわかりやすいかもしれません。たくさんの種類があり、いくつものフィルターを重ねてかけることも可能です。

3つめは「色域指定」という機能。これは、写真の中の1か所を選んでクリックしてやると、その部分と同じ色の所をすべて自動で選択してくれるというものルです。例えば、帽子の色を変えたい、髪の色を変えたいなどと言うときに使うと便利です。

4つめは「クイック選択」という機能。画面上をブラシのような物でなぞると、境界線が自動的に認識され、選択範囲が素早く決まります。

5つめは、「ものさしツール」という機能。2点間の距離を測る物と思われがちなため、「使う機会が無い」という人も多いようですが、実は水平を測ってゆがみを補正するのに便利なツールなのです。

まとめ

Photoshopには、基本の写真加工ツールだけでもかなり便利な物がたくさんありますから、それらを自分の好みに応じて選び、気軽に活用できるようになれば、写真撮影自体ももっと楽しくなるかもしれません。
便利なツールは、何度も繰り返し使うことによって、使い方を身につけていくのが最も早く使いこなせるようになる方法なのではないでしょうか。
実際にどう使うのがよいか、身近に実演しながら教えてくれる人がいたら、より早く上手に使えるようになることでしょう。


カテゴリー: Photoshop Web デザイン

Illustrator(イラストレーター)初心者が抑えておきたい基本描画ツール5選

Illustrator初心者が自分のイメージをIllustrator上で作りあげるために、覚えておきたい描画ツールを5つ紹介します。

初心者の方はまず基本となるこれらの描画ツールを覚えることからはじめましょう。

これらの描画ツールはイラストを書いたりするときに必要となるものです。はじめは基礎から覚えておかなければ自分の想像を形にすることは、とても難しくなってしまいます。

描画ツールのそれぞれの機能を把握することで、より効率良く。よりクオリティが高いモノを作成することができるようになるので、ぜひ覚えておきましょう。

Illustrator(イラストレーター)の基本描画ツール

【アートボート】

Illustratorの基本描画ツールの1つは「アートボート」があります。
このアートボートとはIllustratorにおけるキャンパスであり、ページです。

新しく画像を作成したいときに「新規作成」を選ぶのですが、そのときにこのアートボートの設定からはじまります。
どのような大きさの画像にするのか、というキャンパスのサイズを設定することが出来る機能だと理解してください。印刷する紙のサイズに合わせることができるので、A4やA3など自由にサイズ変更することが可能です。

【オブジェクト】

次に基本となる描画ツールは「オブジェクト」です。
オブジェクトとはアートボード上に、線や図形。それから編集したい画像を配置するときに使うツールです。
このオブジェクトを使って描かれたモノがイラストの元になったり。「選択ツール」と組み合わせてオブジェクトで囲んだ範囲を切り取って移動させることもできます。

抑えておきたい基本描画ツール

そして、Illustratorでイラストを描いたりするときに基本として抑えておきたい描画ツールをご紹介します。

【パス】

1つ目は「パス」と呼ばれるツールです。
これはIllustrator上に配置される「オブジェクト」を構成しているものでもあります。ペンツールを使うときにパスと呼ばれる点と点を右クリックしたまま、ドラッグすることによって、好きに線を引くことができるのです。フリーハンドではないキレイな曲線を描いたり、直線を引くときなどに必要不可能なツールです。

【スウォッチ】

次に「スウォッチ」というツールがあります。
これは図形などのオブジェクトオブジェクトに対して、色を塗ったり。好きな模様を指定することができるツールです。
単純なカラーだけでなく、若草模様などの複雑な模様も好きなオブジェクトに指定することができます。

【アピアランス】

最後に「アピアランス」というツールがあります。
配置したオブジェクトにスウォッチを使って色や模様をしていしますが、これを更に複雑に指定することが出来ます。
たとえば、気になる部分だけ色を変えたり、柄を変えたりしたいときや、1本の線の色や太さを指定して変更すしたいときに使えるツールなのです。

まとめ

ご紹介した5つの描画ツールはIllustratorを使用する上で、基礎となるツールです。Illustratorの場合は線を引いたり、色を塗ったりする作業にも1つ1つのツールを使いこなす必要があります。

たくさんあるツールの中でも、特に重要度の高いツールを紹介したので、覚えておいて損はありません。

また紹介した5つのツールだけでも、イラストを描いたり、自分だけの作品を作ることができます。

まずはこれらのツールを使いこなすようになるだけでグッと作業のレベルが上がるので、ぜひ覚えて使えるようにしてください。


カテゴリー: Illustrator Web グラフィック デザイン

Webサイト制作に便利なChrome拡張機能3選

office-625893_640

webサイト制作をする場合に、知識がない場合はインターネットでちょっと調べることもあるもの。そんな時にブラウジングが早いことは重要ですし、さらに便利なツールがあれば時間的な効率化が図れます。
そんな中で早いブラウザとして知られるのがGoogle Chromeですね。
このGoogle Chromeを使用するならChrome拡張機能は是非とも知っておきたいところ。
今回は数あるChrome拡張機能からwebサイト制作をする上で便利な3つの拡張機能をご紹介します。

Chrome拡張機能とは

Chrome拡張機能とはGoogle Chromeに追加ができる拡張機能のことで、必要な機能を追加してChromeの効率化が図れます。この機能はGoogle社が提供しているものでありますが、個人または企業が作成したものがあり、バラエティに富んでいます。それぞれの目的に合った拡張機能を入れて、より快適にスピーディにブラウザを使用することが可能になります。
このChrome拡張機能を使用するにはChrome Webストアから好みのカテゴリを選んで右上にある青色のボタンをクリックするだけです。そうするとダウンロードが始まり、その後自動でインストールされます。
作業が間違いなく快適になりますのでwebサイト制作には欠かせないものと言えます。

webサイト制作に便利な拡張機能

webサイト制作はChromeの拡張機能を便利に活用してサクサク作業を。以下の3つの拡張機能は是非ご活用ください!

Speed Dial 2

Google Chromeといえばシンプルで見やすいスタートページに「よく見かける」が表示されますが、自分で設定できないのが玉にキズ。しかしSpeed Dial 2はこれを解決してくれます。デザイン的に優れているだけでなく、直感的で使いやすいUIになっています。設定を変えて自分本位のスタート画面にできるのは魅力で、サイト制作に関する参考ページのブックマークに役立ちます。

Evernote(Google Chromeアプリ版)

Evernoteといえばメモ保存やウェブクリップとして活用する方も多いでしょう。しかし、起動が重いと感じる方も多いのでは?そこで活用したいのがウェブアプリ版のEvernote。ノートの編集、マージ、同期などの機能がちゃんと使えて便利です。

Pocket

サイトの制作において分からないことは参考とするページを確認する場合に便利な拡張機能です。気になったサイトをワンクリックで保存できます。細保存したページをダウンロードさえしておけば、携帯電話やタブレットでも見ることができますので便利です。

まとめ

いかがでしたでしょうか。
このようなGoogle Chromeの拡張機能を使用するとwebサイト制作の際に参考になるサイトを簡単にブックマークでき、結果的に効率化できます。分からないことがあった時に毎回検索窓に入力をしていた方はスピードアップできる期待があります。
とはいえ、webサイト制作の全てを自分で行うには限界があり、サポートをしてもらうことが大切です。KENスクールではwebサイト制作の「いろは」を学べますので、これからサイト制作を始めたい、将来的にwebコーディングの仕事に携わりたい方にオススメできます。


カテゴリー: Web デザイン パソコン全般

Photoshop(フォトショップ)を使う上で知っておきたい基本用語

flower-574323_640

Photoshopは、数ある画像編集ソフトの中でも、特に画像加工やイラスト、商業印刷などの業界で仕事をするプロのクリエイターたちが好んで利用しているソフトです。プロが毎日の仕事に使うツールとしてPhotoshopを選んでいる点から見て、きちんと使いこなすことさえできれば、プロレベルの用途にも十分対応できるクオリティの高いソフトであることが伺われます。
しかし、初心者からでも手順を踏んで覚えて行けば、誰でも操作することができる使い勝手のよいソフトでもあります。ですから、まずはぜひ知っておきたい用語から順に押さえていくようにしましょう。

Photoshop(フォトショップ)の基本機能

Photoshopの基本機能としてよく使われるのが、画像の補正とレイヤーによる画像操作です。
わかりやすく言うと、画像の補正とは、コンピュータに取り込んだ画像に暗いところがあれば明るくする、少しぼやけていればある程度はっきりと見えるようにする、色調がおかしければ補正すると言った、画像の形を変えることなく微調整する方法のことです。
一方、レイヤーによる画像操作とは、透明なフィルムを何枚も重ねたようになっているものを、前後に入れ替えたり、加工したりして、画像の見た目に変化を持たせることを言います。
例えば、画像を切り抜く、向きを変える、ゆがめるといった画像の形を変える方法や、影をつける、半透明にする、文字を入れるといった画像自体に加工を施す方法があります。

知っておきたい用語3選

Photoshopを便利に使うためには知っておきたい用語がいくつかあります。その中でも外部とのやりとりがある場合には次の3つがよく使われます。
まずは「解像度」。画像を作り出しているドットの細かさのことで、1インチ当たりのドットの数で表されます。画像を作り出しているドットのことをピクセルと言うため、単位はppi=pixel per inchで、数字が大きいほどきめ細かい画像という意味になります。
次に「カラープロファイル」ですが、これは色を設定するファイルのことです。画像の色は、画面で見たときとプリントアウトしたときとでは色合いが違って見える上に、他のプリンターやディスプレーで見たときにも異なります。そのため、色にずれが生じないように、色管理をするのがカラープロファイルです。
そして、もう1つは「レイヤーの統合」。画像を加工する際には、加工を施しやすいようにそれぞれの部分をいくつかの層にし、積み重ねた状態にするのですが、できあがった画像を他人に渡す場合には、さらなる加工がしにくくなるように、統合して1つにまとめてしまうことが少なくありません。そのように1つにまとめることをレイヤーの統合と言います。

まとめ

Photoshopは、幅広い用途に使える画像編集ソフトですが、最初から誰でも使いこなせるような簡単なソフトではないため、使用方法に慣れるまではひとつひとつ調べながら覚えていくことになります。
そのため、説明に出てきた用語がわからないと、その時点で挫折してしまう人もいるようです。
説明文の中には専門的な用語が数多く出てきますから、まずはよく出てくる用語を選び出して、その用語の意味をきちんと理解した方がよいかもしれません。
その上で、全体を読み進めていく方が効率的に覚えられるでしょう。


カテゴリー: Photoshop デザイン

Illustrator(イラストレーター)を使う上で知っておきたい基本用語

mouse-396714_640

Illustratorの基本を使いこなすためには、知っておきたい基本の用語がいくつかあります。「横文字が並んで全く意味が分からない」というような言葉ではありませんが、基本用語を知っておかなければIllustratorを使って作業をすることは、困難です。

なので、基本操作をする前に操作に必要な言葉をしっかりと覚えていきましょう。

どの操作をするときに、どの機能が必要なのか。
その言葉の意味はどういったモノなのかをきちんと把握しておくことで、よりスムーズに基本操作を覚えやすくなります。

Illustrator(イラストレーター)の基本機能

Illustratorを使う上で知っておきたい基本機能があります。
用語自体は難しいものではありませんが知らなければ、どれがどういった機能なのか分からないので、Illustratorを使う上では覚えておいた方が良いでしょう。

基本機能として「ペンツール」というものがあります。
このツールを使うことによって、右クリックをすることにより線を描くことができます。イラストを描いたりするときには、必要となる機能の1つです。

次に「ブラシツール」「鉛筆ツール」という機能があります。
これは「ペンツール」とは違い、自分で自由に線を書くことができるというツールです。フリーハンドでイラストを描いたりすることが可能なツールです。

これらのツールを知ることで、イラストを描いたり、デザインをしたりという初歩の作業を行うことができるのです。

知っておきたい用語3選

次にIllustratorを使う上で知っておきたい便利な用語を紹介します。

まず1つ目に覚えておきたい用語は「ツールボックス」です。
これはIllustratorを使うときに1番利用頻度が高い機能です。このツールボックスに、さまざまなツールがあります。イラストを書く際に必要なツールや、画像編集をするときに必要なツールもこのツールボックスの中に収納されています。

【パレット】
2つ目は「パレット」と言う用語を覚えておきましょう。
カラフルなイラストを作成するときにも使われます。また、塗る色を変更したり。レイヤーと呼ばれる画像を重ねるときの、選択をすることができる機能のことをパレットと呼びます。

【コントロールパネル】
そして覚えておきたい3つ目の用語は「コントロールパネル」です。
描画や編集に際して、様々な機能が備わっている便利なパネルのことです。たとえば「表示している画像を透明にしたい」「文字のフォントやサイズを変えたい」というときに使われる機能が備わっています。
チラシや広告などの文字を入れる作業をするときにはこの機能が活躍します。

まとめ

Illustratorを使いこなす上で、基本機能と基本用語は覚えておきたいポイントです。

まず、基本機能をすることで「どんな作業ができるのか」を理解することができます。Illustratorをより高度に使うためにも、基本の機能を覚えておくことは大切です。

もちろん、基本用語も覚えておくことで、より作業を効率化させることができます。
基本的な用語ですが、いろいろなツールを使う上で必要になるものです。覚えておけば困ったときに「これが出来る!」という風に役に立つので、是非この2つは覚えておきましょう。


カテゴリー: Illustrator デザイン

これからDTPを学びたい人必見!初級者向けのDTP良サイト5選

magnifying-glass-541625_640

パソコン上で雑誌や冊子のレイアウトを行うDTPデザイン。これまではアナログで行っていた業務ですが、現在ではパソコンで行うことが一般的になっており、その需要も高まっています。
しかし、どうやってDTPを学べか良いのかが分からない方は多いでしょう。雑誌やチラシ、フリーペーパーといった人の目に触れる媒体のレイアウトを仕事にすることはやりがいがある一方で、初心者には少々敷居が高いと感じる方もいるでしょう。
そこで、何の知識も無い方が一から学び、グラフィック作品をしっかりと作れるようになるために参考になるサイトを5つ厳選してご紹介致します。

まずはじめに

実際に学ぶ前に、DTPが何なのかをきちんと理解しておきましょう。これはデスクトップパブリッシングが正式名称で、英語表記はDesktop publishingとなり、これの略称としてDTPと呼ばれているものです。
具体的な内容は多種多様な雑誌やフリーペーパー、チラシといった誌面のデザインを行うものなので、ある程度のセンスは必要になります。
また、民間の資格ではありますが、取得しておくことは現在のIT化が進む社会の就職や転職において有利なものとなるに違いありません。
この資格は保有することでレイアウトやスキャニング、印刷工程におけるプロフェッショナルともなりますので、広告や出版、印刷などの各業界でデザイナーとして活躍の場が広がることが期待できるのです。

DTPをよく知るためのサイト5選

DTPデザイナーを目指すためには、まずは基礎の基礎から学び、徐々にノウハウを身に付けてスキルアップさせていくことが重要です。
そんなあなたのために参考になるサイトを5つピックアップ!

クリエイターズ広場

圧倒的な情報量であなたの基礎知識を高められること間違いなしです。まずはこちらから学んでみるのがおすすめです。
http://www.okidata.co.jp/creators/tips1/

非デザイナーのためのデザイン基本テクニックその1

センスがなくてもデザインができるように、便利ツールの紹介と頭に浮かんだイメージをどのように形にするのかの考え方を紹介しています。
http://07design.net/blog/?p=237

色カラー

魅力のあるデザインにするためには色のことを学んでおくのはとても重要。色に関する情報を知りたい、デザインの基礎について知りたい時に役立ちます。
http://iro-color.com/design/basic-rule.html

WEBデザイナーの基礎

サイト運営者のの経験を基にして初心者が陥りやすいミスと対処法を紹介しています。デザイナーとして成長するためのマインドも参考になりますね。
http://writing-mode.com/20130121/dtp/

WEBデザイナーが教えるデザインの注意書き

現役のWEBデザイナーがWEBと誌面の違い、それぞれの特徴と、デザイン時の注意点についてコッソリ教えてくれます。現役のプロの話は見逃し厳禁です。
http://webdesignrecipes.com/dtp-designed-by-web-designer/

まとめ

いかがでしょうか。
DTPを学ぶには参考になるサイトがたくさんありますので、上手に活用しながらスキルアップを目指しましょう。
とはいえ、独学で学ぶには限界があるので専門のスクールで学ぶことが大切かもしれませんね。まずは覗いてみてはいかがでしょうか。


カテゴリー: グラフィック デザイン 就職・転職

webデザイナーを目指す人必見!初心者向けガイド

macbook-624707_640

企業が独自のwebサイトを持つことが当然のようになっている昨今、その分webデザイナーを目指す人も増えています。
かつては、webサイトを組み立てられる知識やスキルさえあれば、それだけで重宝がられていた時代もありました。
しかし、今は素人でもwebサイトをどんどん開設しているような時代ですから、「webサイトを組み立てられる」という程度の知識やスキルでは、プロとして仕事をすることはできなくなっています。

そこで、これからwebデザイナーを目指す初心者向けに、どのような知識やスキルを身につけ、どのような資格を取得しておいたらよいかをまとめてみました。

webデザイナーの仕事内容

webデザイナーのメインの仕事内容は、もちろんWebサイトをデザインすることです。
しかし、実際には、HTMLなどを駆使してwebサイトの組み立てを行う「コーディング」や「プログラミング」までを全て1人で行うwebデザイナーもいます。
結局は、会社の規模や経験などによって、どこまでの作業を1人で行うかが異なっており、細かく分業しているところと、1人で全ての作業を行うところがあるのが現状です。
ですから、webサイトをデザインすることができれば、それだけで仕事として成り立つ場合もあります。

とは言え、実際にコーディングやプログラミングまで1人で行うかどうかは別としても、コーディングやプログラミングの知識を身につけておくことは、webサイトをデザインする上で強みになることは間違いないでしょう。
もしコーダーやプログラマーに細かい作業を任せることになっても、デザイン通りの作業を行ってもらえているかが確認できますし、相互のやりとりもスムーズに行えるからです。

webデザイナーに必要な知識・スキル

webデザイナーとして仕事をするつもりであれば、HTMLとCSSは理解しておいた方がよいでしょう。
特に、HTMLは最低限使えるようになっておいた方が無難です。
なぜなら、webサイトに文書を載せようと思ったら、テキストをHTMLタグで囲んでやらなければならないからです。
確かに、Dreamweaver のようにHTMLの知識が無くても自動的にタグをつけてくれるようなソフトはありますが、プロとしてwebサイトを作るのであれば、HTMLの知識は不可欠です。
また、魅力的なwebサイトに仕上げるためには、CSSも必要になってくるでしょう。
CSSだけでwebサイトを作り上げることも珍しくないくらいですから、webデザイナーにはHTMLと同じくらい必要な知識・スキルと言えるかもしれません。
更に、webサイトを作る上では、Photoshopの操作も欠かせないスキルと言えそうです。
webサイト上に画像を載せる場合に、よく使われるソフトですから、ある程度使いこなせるようになっていた方がよいでしょう。

とっておきたい資格

webデザイナーを目指し、何らかのスキルを身につけている人は年々増えてきています。
しかし、初心者が単にweb系の知識やスキルを身につけただけでは、就職につながるわけでも、よい仕事ができるわけでもありません。
これまで実務を積んできた人たちの中に入り仕事をするわけですから、いかに即戦力として働ける力を身につけているかが勝負のカギになるのです。
ですから、webデザイン系では唯一の国家資格である「ウェブデザイン技能検定」は取得しておいた方がよいかもしれません。
1級から3級まであり、学科だけでなく実技の試験もありますから、2級以上取得していると、時間内でwebサイトを仕上げられる力があることを強くアピールできるでしょう。
また「webクリエイター能力認定試験」も基本的なスキルが身についていることをアピールするためにはおすすめの資格です。
実務に沿った形で知識や実技の問題が出題されるため、身につけた知識やスキルがどれだけ実際に使えるものになっているかを確かめるのには向いているでしょう。


カテゴリー: Web デザイン 就職・転職

Illustrator(イラストレーター)の使い方 ~基本編~

チラシ

皆さんがコンビニや、スーパーなど日常で良く見かけるポスターや有名企業のロゴなどはどうやって作られているか知っていますか?
これらを作成するときに使われるのがAdobeが販売している「Illustrator(イラストレーター)」というソフトです。

デザイナーとして働く人にとっては必須なソフトなので、専門知識がなければ使うことが難しいと思われやすいですが、基本の使い方さえ覚えてしまえば誰でも使いこなすことができるようになります。
Illustratorの基本をマスターすることでデザインだけでなく幅広い分野で活躍することができるでしょう。

Illustrator(イラストレーター)とは?

そもそもIllustratorとはどういったソフトなのかと言うと、画像を編集したり、印刷物のデザインをしたりすることができるソフトです。
Windowsに搭載されている「ペイント」をさらに発展させ、より専門性を高めたソフトだと考えると分かりやすいでしょう。

しかし、その性能はペイントと比べ物にならないほど、高性能です。

広告や雑誌などの私たちが当たり前に手にしている、印刷物のほとんどはこのソフトを使って作られたものです。

細かな文字のレイアウトや、人々の目を引きつける魅力あるデザインをIllustratorを使って作り出すことができます。

実はこのソフトが使われる場面は多く、プレゼン資料を作ったり。お客さまに見せるパンフレットなどを作るときにも使われることがあります。
特にデザイン関係の仕事をする場合には“必須“とさえ言われるほど重要なソフトなのです。

Illustrator(イラストレーター)でできること

Illustratorでできることは、とても幅が広い分野に及びます。
デザインを仕事にする人にとってはIllustratorを使わずに仕事をすることは不可能に近いでしょう。それぐらい、私たちの生活の中で必要とされている場面は多いです。

例えば、漫画やアニメのように本格的なイラストを描くこともできますし。私たちが触れる機会が多いスーパーのチラシや、お店のPOP、飲食店のメニューから、雑誌のレイアウトまで印刷物を作るときには無くてはならないソフトです。

またWEBサイトの作成にもその力を発揮します。
私たちがWEBサイトを見ているときに、気にしない立体的なボタンだったり。WEBサイトの顔であるヘッダー部分の画像だったり、WEBサイトの広告などのバナー画像や、GIF画像などの書き出しを行うこともできます。
WEBサイトのデザインをするときにも欠かせないソフトなのです。

 

いかがだったでしょうか?
Illustratorのソフトを使いこなすことが出来るようになれば、仕事の幅が広がることでしょう。お店のPOPを作るときにも役に立ちますし、プレゼンが必要が場合でも、使いこなすことが出来れば、ワンランク上の仕上がりになること間違いなしです。

現在、このIllustratorを使えることができる人の需要が増えてきています。もしも、使いこなすことが出来るようになればIT企業だけでなく。幅広い分野で仕事の幅を広げ、質を上げることができるでしょう。


カテゴリー: Illustrator Web デザイン