写真からイラスト風グラフィック?を作成

本日はまたしてもillustrator&Photoshopの練習。

ほめられデザイン事典 グラフィック・ワークス Photoshop&Illustrator

ほめられデザイン事典 グラフィック・ワークス Photoshop&Illustrator

 

 018. 写真から作るイラスト風グラフィック(photoshop)

テキストでは鹿でしたが、良さ気な写真が無く

蚊取り線香ブタをチョイス。

f:id:kumajina:20140807214110p:plain

020.花柄のドイリー(illustrator)

f:id:kumajina:20140807214118p:plain

021.立体的なビスケット(illustrator)

f:id:kumajina:20140807214127p:plain

022.かすれたラベル

illustrator&Photoshopのブラシツール>チョークでかすれを演出

f:id:kumajina:20140807214134p:plain

やっぱり蚊取り線香のブタちゃんが今日一番の力作です。

違う色のものも作って沢山並べたい

Web用に保存する際の画像形式

今までPhotoshopIllustratorで作った作品を

何も考えずJPEGで保存していましたが、

時々ぼやけたりしている事があって気になっていました。

 

ググった所 、

「単純に言うと「Gif」が絵で「Jpg」が写真です。」とのこと!

Illustratro(イラストレーター)でのファイルの保存形式 Illustrator(イラストレーター)入門/ウェブリブログ

こんな基本的な事も知らなかったとはorz...

 

PNGっていうのも無かったっけ?と思って違いを調査

WEB画像について-GIF・JPEG・PNGの特徴

Illustratro(イラストレーター)でのファイルの保存形式 Illustrator(イラストレーター)入門/ウェブリブログ

 

GIF: 256色まで 可逆圧縮

背景を透明にできる、アニメーションにできる

写真は点描みたいになる

SVGや.aiと相性が良い

 

JPEG: 1670万色!写真に適している 不可逆圧縮

ぼやけたりかすれたりする(→これが私が気になっていた現象ですね!)

サイズの大きな写真を圧縮するのに適している

 

PNG: 8bitカラーからフルカラーまで 可逆圧縮

GIFよりも透明色を用いた画像を作るのに適している

ファイルサイズが1番大きくなりがち

 

実験的に今日作成したマスキングテープのパターンを

3パターンで保存してみました。

半透明なテープ画像なので、background-colorをgrayにして検証!

 

GIF 28KB

f:id:kumajina:20140807105949g:plain

なぜか線が白く浮き出ている・・・ような気がします。 色はくっきり。

 

JPG 35KB

f:id:kumajina:20140807105956j:plain

 背景が透明になっていませんね。

この作品はそこまでかすれたりぼやけたりはしていない様子。

 

PNG 66KB

f:id:kumajina:20140807110021p:plain

これが一番奇麗!背景のグレーの色も透けている・・・

でもファイルサイズは一番大きくなりました。

 

今日からは作品に合わせて最適な画像形式で保存しようと心に決めたのでした。

Photoshopのカラーハーフトーンを使って、ドットで表現してみました。

 今日はPhotoshopでデザイン作成練習

ほめられデザイン事典 グラフィック・ワークス Photoshop & Illustrator

ほめられデザイン事典 グラフィック・ワークス Photoshop & Illustrator

 

 011. 網点風のロゴの技術を応用し写真を網点風にしてみました。

f:id:kumajina:20140806193426j:plain

雰囲気があるような無いような。。。?

 

もう一つカラーハーフトーンを使ってドットで表現した

012_テレビモニターに映し出されたようなロゴ

f:id:kumajina:20140806193517j:plain

これは縦横のぼかし(移動)も多用しております。

オシャレだけど、次はもっと

女子力の高そうなものを作ろう。

 

 

ドットのロゴ&チェック柄を作成

久しぶりに ほめられデザイン事典 

グラフィック・ワークスを開いてみました!

ほめられデザイン事典 グラフィック・ワークス Photoshop&Illustrator

ほめられデザイン事典 グラフィック・ワークス Photoshop&Illustrator

 

 本日は4作品作成

 

008: ざらざらしたキャンバス地??

f:id:kumajina:20140801192138j:plain 

009:ドットで作るロゴ

f:id:kumajina:20140801192233j:plain

010: チェック柄のパターン

f:id:kumajina:20140801192302j:plain

011 網点風のロゴ

f:id:kumajina:20140801192312j:plain

チェック柄のパターンが難しかった(;´д`)

ずれると隙間が目立ち仕上がりに影響しますと書いてある通り

1回目に作成したものは隙間だらけでチェックとは呼べない代物に。

上の作品は3回目ぐらいのものですがやはりずれが生じてしまう。

気にしていたのですが、どうやら小さく作りすぎていた様子で

100%サイズで見たら全く分からない状態になっていました。

 

今度はもう少し大きく作ろう・・・

Webクリエイター能力認定試験の模擬問題を解いてみた

 

Webクリエイター能力認定試験を受験してみようかと思い、

Webクリエイター能力認定試験│資格検定試験│ビジネス能力認定 サーティファイ

久しぶりに模擬問題1 実技問題を実施

Webクリエイター能力認定試験 エキスパート 問題集 (XHTML1.0対応)

Webクリエイター能力認定試験 エキスパート 問題集 (XHTML1.0対応)

 

Dreamweaverを利用したので、

90分で終わらなくてはいけないのに100分ちょっと経過。

見直しもしたら110分以上かかったかもしれない。。。

 

実はこの模擬問題に挑戦するのは2回めなのに、

まだまだ特訓が必要ですね。

orz......

 

マージンが

上:2エム、下:0、

左:0、右:30ピクセル

って意地悪な書き方をしているので、数値設定を間違えてしまい

何度も修正をしたのが原因か・・・

  

「値4つの場合」

margin: [上][右][下][左]

 

上から時計回り!!覚えましょう!!