カテゴリー別アーカイブ: Photoshop

フォントを増やしていこう

Illustrator、PhotoShopでは、パソコンにインストールされているフォントが使われる。
デフォルトでは数が少ないので、いろんなフォントを探して自分のPCに入れてみよう。

無料のフリーフォント集 フリーフォントケンサク
【2015年】デザイナーなら必ず入れておきたい25のフリーフォント!
画像と同じくフォントにも著作権があるが、フリーのフォントも多い。

フォントには有料のものも数多くある。デザイン会社などでは、複数のフォントを購入し、使用している。
フォントは日本語に対応しているものとしていないものがあるので、検索時は「日本語」をキーワードに含めるといい。

しかしWebにおけるフォントは厄介で、インストールしたフォントは基本的に自分の画面でしか見られない。
画像として表示すれば見られるが、テキスト部分もフォントを変更したいことはままある。

そこで、今はWebフォントと呼ばれる技術が使われる。
実はすごく簡単!webフォントの使い方&日本語対応webフォントまとめ
Webフォント(日本語/欧文)サイトまとめ9選!変更方法もご紹介します
大きく、googleに登録されているフォントを使う方法と、自分のダウンロードしたフォントをサーバーにアップして利用する方法がある。
今後サーバーへのアップロードの講義をするので、その後試してみるといいかも。

12月10日(木) CGコンテンツ制作演習⑩ 講義内容

Webでつかうアニメーション

gifアニメーション
パラパラ漫画の要領でアニメーションを作る技術。今回はPhotoShopで作成した。
ウィンドウ→アニメーションを選ぶとフレームが出てきて、アニメーションを作成することが可能になる。
フレームを使用した GIF アニメーション作成方法

webでよく使われるのは、やはりバナーが多い。単純に2~3枚の画像を切り替える簡単なものをよく見かける。
バナーデザインを紹介
一部にgifアニメを使っているものがあります。他のものも参考にしてみてください

他にも簡単なアイコンなど、効果的に使える場面は少なくない。このサイトで使用している↓これもgifアニメーション。
ロード用のJavaScriptと併用して使用している。
loading

実はgifアニメーションを作る方法はいくつもあり、Web上の無料サービスでも制作可能。色々試してみよう。
無料でGIFアニメーションが作成できるWebサービスまとめ
ローディングgif画像を自動生成してくれるツールを3種紹介!

flash
以前にも説明したとおり、web界隈でのflashは減りつつある。
しかし最近(一週間くらい前)に、Adobe社が、FlashProの大幅改修を決定。HTML5とJavaScriptでのアニメーションを制作できるツールに改修するという勧告が出た。
恐らく使用感はそのままに、より時代にあったアニメーション制作ができるようになるので、今のうちに少しでも触っておくと、後々必要になったときに役立つかも。

オブジェクトの状態
シェイプ 塗りと線で作れるが、イラストレーターと違ってバラバラになる。
シェイプは重なると、そのまま下のデータが消えてしまう。
また、選択範囲で囲んだ部分が分離してしまう。まとめて動かすときは、シンボルにしよう。
シンボル シェイプを全て囲んで右クリック、一番下の「シンボルに変換」で、シェイプをシンボルに変換できる。
シンボルはイラストレーターのオブジェクトに近いイメージ。

トゥイーン

トゥインーンはシェイプやシンボルを動かすための技術。大きく三種類の方法がある。

トゥイーンの種類
クラシック 直線的なアニメーション
モーション パスに沿った多様なアニメーション
シェイプ 形状が変化するアニメーション
間接のようなものを作るボーンツールとあわせると、様々な動きが出来るようになる。

初めてのFlash Professional CS5

11月30日(月) HTML5・CSS3演習⑨ CGコンテンツ制作演習③

本日使用したタグ・プロパティ・ツール

CSSプロパティ

  • animation
  • @keyframes
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-iteration-count
  • animation-delay
  • animation-fill-mode
  • animation-fill-mode

CSSプロパティ

animation
CSS3で新しく登場した、詳細なアニメーションを作成出来るプロパティ。
先日紹介した様に、Webサイトでアニメーションを表示する方法はいくつかあるものの、どれも一長一短だった。
CSS3のanimationは、現在最も汎用的に使われているJavaScriptと比べて、より直感的で、簡単な記述が可能になっている。
現状では各ブラウザの対応状況が不安定な為、完全なシェアを占めているわけではないが、今後確実に広がっていくものと思われる。
今も、今までJavaScriptで制作されていたもの(スライダーなど)を、CSS3で実装させようとする動きがあったりもする。
@keyframes
animationプロパティとセットで使われる、変化のタイミングと変化値を示すもの。
厳密にはプロパティと違い、少し特殊な書き方をする。

@keyframes sampleAnimation { /*名前は任意*/
  0% { top: 0; left: 0; }
  40% { top: 50px; }
  100% { top: 100px; left: 100%; }
}

上記の様に、@keyframes の後、任意のアニメーション名を付け、その中で、パーセントでアニメーションの変化ポイントを指定する。

animation-name
適応したいアニメーション名を指定する。必須項目
keyframesがアニメーションの動きの設定、プロパティは作った動きを呼び出すイメージ。

.animation{
    animation-name:sampleAnimation; /*keyframesの名前と合わせる*/
}

@keyframes sampleAnimation {
  0% { top: 0; left: 0; }
  40% { top: 50px; }
  100% { top: 100px; left: 100%; }
}
animation-duration
アニメーションにかける時間を設定する。

.animation{
    animation-name:sampleAnimation; /*keyframesの名前と合わせる*/
    animation-duration:10s;
}

@keyframes sampleAnimation {
  0% { top: 0; left: 0; }
  40% { top: 50px; }
  100% { top: 100px; left: 100%; }
}

↑では少し長いが10秒間を設定した。
0%は開始時、40%は4秒後、100%が終了時(10秒)時点での動きになる。

animation-timing-function
アニメーションの動き方を設定する。

ease 開始と完了を滑らかにする(初期値)。
cubic-bezier(0.25, 0.1, 0.25, 1.0) を指定したのと同じ
linear 一定。
cubic-bezier(0.0, 0.0, 1.0, 1.0) を指定したのと同じ
ease-in ゆっくり始まる。
cubic-bezier(0.42, 0, 1.0, 1.0) を指定したのと同じ
ease-out ゆっくり終わる。
cubic-bezier(0, 0, 0.58, 1.0) を指定したのと同じ
ease-in-out ゆっくり始まってゆっくり終わる。
cubic-bezier(0.42, 0, 0.58, 1.0) を指定したのと同じ
cubic-bezier(数値, 数値, 数値, 数値) 自由指定。他のものと合せて変えてみると良い

様々な動きの種類があるが、transitionと共通の値になっている。
[/code]

animation-delay
開始を遅らせるプロパティ。durationと同じく秒数で指定する。
基本的には直ぐに始まってしまうアニメーションだが、指定した分だけ遅れて開始させることが出来る。
animation-iteration-count
アニメーションの繰り返し回数を指定する。何も指定しないと1回のみ再生。
数値での指定の他、infiniteという値があり、これを指定した場合は制限なく繰り返す。
animation-direction
animation-iteration-countの指定で複数回アニメーションを再生するとき、そのままだとアニメーションが終了した直後、元の状態に戻って再生してしまう。
折り返して反復させたいときは、

animation-direction:alternate;

を追加で指定する。
因みに初期値は「animation-direction:nomal;」。

アニメーションの一括指定
プロパティが多いので別々に紹介したが、backgroundなどと同じように、スペース区切りでの一括指定も可能。
以下はサンプルコードです。

CSS

.anime_parent{
	position:relative;
	background-color:#E5E9FF;
	width:200px;
	height:200px;
	margin:0 auto;
}
.anime{
        /*一括で指定できる!*/
	animation:animeSample 2s ease-in-out .5s infinite;
	position:absolute;/*topやleftを使う場合はpositionが必須*/
	background-color:#FFB557;
	width:50px;
	height:50px;
	border-radius:25px;
}
@keyframes animeSample{
	0%{
		top:0;
		left:75px;
	}
	33%{
		top:150px;
		left:150px;
	}
	66%{
		top:150px;
		left:0;
	}
	100%{
		top:0;
		left:75px;
	}
}

HTML

<div class="anime_parent">
	<div class="anime"></div>
</div>

実行

注意してもらいたいのは、秒数。上記では二回指定があるが、最初の方が「duration」、後のほうが「delay」の値として自動的に読み込まれる。

使用したPhotoShopツール

虫眼鏡
虫眼鏡アイコンのツール。
表示画面の拡大・縮小が出来る。
そのままクリックすると拡大、altキーを押しながらクリックすると縮小できる。
また、便利なショートカットとして、altを押しながらスクロールすると、虫眼鏡ツールを選択していなくても拡大縮小が出来るので、覚えておくと便利。
選択系ツール
選択範囲を作成出来る。選択すると、その範囲以外は編集できなくなる。

選択ツール 四角い選択範囲を作成出来る。上部メニューで「固定」を選ぶと、大きさを指定したエリアを作れる
投げ縄ツール フリーハンドで選択範囲を作成出来る。細かい場所などに
自動選択ツール 近くの同系色を自動で選択する。許容値が大きいほど検出範囲が広くなる。
修復ブラシツール
サイズを選択し得て、altキーを押して一度クリックすると、その部分が基準点になり、サンプルを取得する。
そのサンプル範囲を元に描画が出来る特殊なブラシツール。
ブラシ系ツールの便利なショートカットとして”「」”がある
“「”キーを押すとブラシが小さく、”」”キーを押すとブラシが大きくなる。
指先ツール
色伸ばしのためのツール。
文字通り指で、そのあたりの色を延ばすイメージで使用するとやりやすい。
ブラシツール同様、サイズが指定できる。

レタッチ(ゴミ取り)

選択→塗りつぶし(コンテンツに応じる)

修正したい範囲を選択し、右クリック→塗りつぶし→コンテンツに応じる→OKで、でレタッチが出来る。
「コンテンツに応じる」は画像の内容に応じる、ということで、周りの画像に合わせて自動で塗りつぶす。
こまごました画像の処理は苦手。画像によって、選択範囲の広さに気をつけよう。
参考:コンテンツに応じた塗りつぶし
↑上記だと、かなりの精度でビルを消している。

修復ブラシツールを使う

修復ブラシツールは、サンプルを取得して他の部分になじませるツール。
「ゴミがある部分」と「ない部分」があるなら、「ない部分」を基準にして、「ある部分」を塗っていけばいい。
細かい部分の修正は、こちらのほうが得意。
参考:[ 修復ブラシツール ] で肌をキレイにする

画像修正

指先ツール

指先ツールを使用して、画像の修正が出来る。
子顔にしたり目を大きくしたり、用途は様々。レタッチ以外にも使える。
ブラシサイズが大きすぎたり、やりすぎるとぼやけて見えるので、そこだけ気をつけよう。

絶対に覚えて欲しいショートカット PhotoShop編

PhotoShopで使えるショートカットキーです。
他にもかなりたくさんあるりますが、とりあえず一部のものを抜粋しています。
全部見たい方はこちらを参照してください。

全般

機能 Windows Mac
上書き保存 Ctrl + S Command + S
名前をつけて保存 Ctrl + Shift + S Command + Shift + S
Webおよびデバイス用に保存 Ctrl + Shift + Alt + S Command + Shift + Option + S
直前の操作を元に戻す Ctrl + Z Command + Z
直前の操作をやり直す Ctrl + Shift + Z Command + Shift + Z
すべて選択解除 Ctrl + D Command + D
選択範囲と面を隠す Ctrl + H Command + H
選択範囲と内容を 1 ピクセルずつ移動する 矢印キー 矢印キー
選択範囲を 10 ピクセルずつ移動する Shift + 矢印キー Shift + 矢印キー
コピー Ctrl + C Command + C
ペースト Ctrl + V Command + V
ズームイン Ctrl + +(テンキー上のプラス)または Ctrl + ; Command + +(テンキー上のプラス)または Command + ;
ズームアウト Ctrl + -(テンキー上のマイナス)または Ctrl + -(ハイフン) Command + -(テンキー上のマイナス)または Command + -(ハイフン)
表示サイズに合わせる Ctrl +0(ゼロ)、手のひらツールをダブルクリック Command +0(ゼロ)、手のひらツールをダブルクリック
画像を 100 %で表示する ズームツールをダブルクリック ズームツールをダブルクリック
開いているドキュメントを順番に表示する Control + Tab Control + Tab
前のドキュメントに切り替える Shift + Control + Tab Shift + Command + `

ツール系

ツールの切り替えもボタン一つでできます。
全部でなくとも、よく使うのは覚えておくと便利でしょう(僕も全部は覚えてません)
環境設定でキーの変更もできるので、あくまで初期設定のものです。
全角・日本語入力時は使えないので注意しましょう。

移動ツール V
長方形選択ツール†

楕円形選択ツール

M
なげなわツール

多角形選択ツール

マグネット選択ツール

L
自動選択ツール

クイック選択ツール

W
切り抜きツール

スライスツール

スライス選択ツール

C
スポイトツール†

カラーサンプラーツール

ものさしツール

注釈ツール

カウントツール*

I
スポット修復ブラシツール

修復ブラシツール

パッチツール

赤目修正ツール

J
ブラシツール

鉛筆ツール

色の置き換えツール

混合ブラシツール

B
コピースタンプツール

パターンスタンプツール

S
ヒストリーブラシツール

アートヒストリーブラシツール

Y
消しゴムツール†

背景消しゴムツール

マジック消しゴムツール

E
グラデーションツール

塗りつぶしツール

G
覆い焼きツール

焼き込みツール

スポンジツール

O
ペンツール

フリーフォームペンツール

P
横書き文字ツール

縦書き文字ツール

横書き文字マスクツール

縦書き文字マスクツール

T
パスコンポーネント選択ツール

パス選択ツール

A
長方形ツール

角丸長方形ツール

楕円形ツール

多角形ツール

ラインツール

カスタムシェイプツール

U
3D オブジェクト回転ツール*

3D オブジェクトロールツール*

3D オブジェクトパンツール*

3D オブジェクト移動ツール*

3D オブジェクト拡大・縮小ツール*

K
3D カメラ回転ツール*

3D カメラロールツール*

3D カメラパンツール*

3D カメラドリーツール*

3D カメラズームツール*

N
手のひらツール† H
回転ビューツール R
ズームツール† Z