2012-09-01から1ヶ月間の記事一覧

配列

As

1時間 整列とは 同じ型のデータを連続的に並べたデータ形式。 各データをその配列の要素といい、それらは添字(インデックス)で識別される。 同じ型の変数を、添字によって指定する。 配列はほとんどのプログラミング言語に存在するもっとも基本的なデータ形…

ボタンの作成

Fireworksは操作の大部分プロパティパネル。詳細な設定はできないことも。 ライブラリは、flashのシンボルにとても似ている。 レイヤーと、スライスレイヤーがある web画像作成に特化 コピペ 角丸 角丸長方形使わない→数値が出ないから 端が丸まっているもの…

ナヴィゲーションを作る

シンボルとステート 通常ナビゲーションを作るのは、シンボル化したボタンを配置する事が多い。 シンボルにしにくい、背景のあるナビゲーションにはステートを利用する。 ステート レイヤーを含む。階層が上のレイヤー。ステート間で中身のレイヤーを共有す…

効果を使用してナビゲーションを作る

fireworksを使用してのれんしゅう。 お手本 作例 文字ツール フィルター各種とライブエフェクト webレイヤーでのスライス http://littlestar.under.jp/dairynews/dairynavi.html

fireworksにつかえるスタイル

スタイルをインポート ダウンロードBlack social icons | Webportio - graphical resource of Adobe Fireworks ダウンロードしたスタイルファイル スタイルパネルからスタイルライブラリを読み込む スタイルパネルのセレクタに入る シンボルをファイルから …

Fireworksの互換性 Illustrator Photoshop

Illustrator Illustratorからのコピペ レイヤーは保持されない オブジェクト、グループがペーストされ、そのままベクトルを編集出来る。 読み込み レイヤー保持の選択が出来る 書き出し .fxgファイルで書き出し illustratorで開く場合 fxgファイルとは adobe…

ワイヤーフレーム

練習 ブラウザの画面キャプチャを、イラストレーターのテンプレートにする ブロックレベル要素を四角形で囲う IllustratorからPhotoshop形式に書き出し レイヤーを生かす アンチエイリアスはオフ 解像度72ppi サムネイルを選択、選択範囲をつくりガイド線を…

Fireworks概要

何に特化したソフトか web画像の制作 効率と仕上がり 作業効率 画像の計量化 Webレイヤー(スライスレイヤー)がある ベクター画像とビットマップ画像が等しく扱える 不利な点 文字組が思い通りにならない 効果の質がPhotoshopに劣る ペンツールはIllustrator…

ベクトルオブジェクト

ベクトルオブジェクトを描く事ができる ペンツールはIllustratorより不自由 プロパティパネルで線(ストローク)の属性を変更する 線の種類のの形状により輪郭の表示が変化する。 角丸系はアンカーポイントを動かして、角の形状を調整 回転・変形は、ツールパ…

ビットマップ画像

Fireworksの利点のひとつ ベクトルとビットマップを同じステージで扱えること JPEG,GIF PNG(PNGはベクトルの属性を含む) 写真の扱い 写真を開く 写真を読み込む エフェクト・カラー調整・シャープ・アンシャープ フィルターから Photoshopと同じく(効果が少…

テキスト

Webでのテキストの扱いについて Webで表示されるテキスト2つ ブラウザに依存するテキスト 例外として画像として扱う文字 文字の基本3つ 文字サイズ 色 書体 行送りや行揃えはCSSで設定 ブラウザ依存のテキストは、カンプ上「PS Pゴシック」「アンチエイリ…

マスク

オブジェクトのマスク マスクしたい形状のオブジェクト マスクしたい画像 オブジェクトを「カット」→マスクとしてペースト 画像を「カット」→内部にペースト カットしてから対称を選択、編集→ 結果 グラデーションマスク マスクしたい形状のオブジェクト グ…

Photoshopの設定

Photoshopの用途 初心者が学習する基本 範囲の選択 補正 写真をきれいにし、目的にあった画像にする 加工 マスクや合成で、元の画像にない特徴をつくる 起動・初期設定 初期化 メモリリセット Ctrl+alt+shiftで起動 カラー設定(Web用) 編集→カラー設定→Webイ…

範囲を選択する

ここを の主語 欲しい「図」と「地」の関係 選びやすいところ(色数が少ない等)を選び、範囲を反転して、欲しい範囲「図」を得る。 範囲を選択するツール群 矩形・円形 shiftドラッグで範囲追加 altドラッグで範囲除外 ワンド(魔法の杖) 自動選択は色を選択 …

ビネット効果

ビネット効果→境界をぼやかした効果の作成 画像の全選択 Ctrl+A 選択範囲の変形 選択範囲→選択範囲の変形→85% 境界線の調整 選択範囲の反転 Command+Shift+I 新規レイヤー塗りつぶし Command+Delete(描画色塗りつぶし) 反転した範囲を塗りつぶす 作成

画像間の移動

選択した範囲のコピー、ペースト 切り取りたい部分を選択 別に用意していた土台の画面にペースト 解像度・画素数の違いで大きさのバランスが取れないことがある。拡大縮小。作成 ついでに効果も。

画像形式

ネット上で使用出来る画像は Jpeg(Joint Photograph Experts Group) GIF(Graphocs INterchange Format) PNG(Portable Network Graphics Webで使用する画像は最終的に四角いビットマップデータとして書き出すそれぞれの特徴 圧縮方法 透過 扱う色数 JPEG 圧縮…

画像補正

写っている質が変化する訳ではない デジタル処理出来る範囲で、見てきれいと感じる程度に変化させる 補正 デジカメの暗く写る特徴を補正する レベル補正(ハイライト グレー シャドウ) シャドウハイライト コントラストが強くなるのがレベル補正 自然光のよう…

レイヤーマスクの使用

レイヤーとマスクの状態

解像度と画像サイズの変更

解像度 原寸(100%)72ppi 1インチの長さの中にどれだけのピクセルを表現出来るかあらわす Webに高解像度は必要ないが、原寸でみた場合の画質を維持させる サイズ変更 イメージ→画像解像度 画像の再サンプル Webの場合は、100%に最適化することが目的なので…

レイヤーマスクを使った画像合成

背景画像の作成

スクロール ドロップシャドウ シャドウ ドロップシャドウ 新規作成900px×100px ガイドを作成 50px 850px 選択範囲の作成 新規レイヤー作成、選択範囲で塗りつぶし 効果の適用 ドロップシャドウ キャンバスのサイズ変更 900px×10px親要素の背景を生かすには透…

コピースタンプツール

コピースタンプツールを使った補正 画像中の傷や汚れを消す作業 コピースタンプツールの選択 ブラシをサンプルにする部分より小さめにセット 元になるボールにあわせてaltクリック コピーしたい場所をブラシで塗る容量。

影で読ませる文字の作成

ドロップシャドウと光彩の理解 ドロップシャドウ 文字の入力と設定文字色は背景色と同じ色を選択 レイヤー効果→ドロップシャドウ 作成 光彩 逆の要領で、光彩を使用。文字色と背景色を黒にする。

レイヤーオプション

レイヤーを重ねた効果 元画像コピーしたレイヤーに、ガウスぼかしをかけてオーバーレイで重ねるハードライトを選択した時と同じ効果コピーしたレイヤーをぼかさずに、そのままオーバーレイで重ねてみたレイヤーの状態

ワープテキスト

文字の入力 オプションバー→ワープテキスト作成

クリッピングパス

パスの操作 ペンツールもしくは範囲選択でもOK パスパネル→作業用パスの作成 パスパネル→パスの保存 パスパネル→クリッピングパス パスをCtrlクリックで選択範囲が作成出来るレイヤーマスクを作成範囲反転して、レイヤーを塗りつぶす。トリミングしてweb画像…

複雑な範囲選択

毛皮、毛髪などの複雑な範囲の選択 選択範囲の調整 チャンネル 元画像 元画像のチャンネルを開く 一番コントラストの高いチャンネル選択、コピーして加工します Command+Lでレベル補正背景を飛ばす 顔の部分は塗りつぶすこのチャンネルレイヤーをCommandクリ…

レイヤースタイルのインポート

http://www.dezinerfolio.com/2008/11/19/220-amazing-free-photoshop-layer-styles 編集→プリセットマネージャーから

ポラロイド風写真

レイヤー構成と効果で作るポラロイド写真 写真画像(写真サイズでクリッピング) 写真サイズのシェイプ(レイヤー効果:シャドウ) 写真の土台(レイヤー効果:境界線) 写真の土台から作った影(変形させる) 背景になるレイヤー(レイヤー効果:境界線) 背景から作…