webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

photoshop

black and white bitmap image変換してイラストレーターに再配置

splatterを使って遊ぶ。 resizeしてから、部分によってみるとこんな感じ。 ウォーターマークも見える。 グレースケールに変換する。目的は白黒のビットマップイメージを作ること。 破棄します。 OPTION! フィルター→ぼかし→ガウス 半径は1.5px 拡大するとこ…

photoshop color theme

「ウィンドウ」「エクステンション」「adobecolorテーマ」 下の写真で、モデルが着用しているピンクの衣装の補色を背景にしてみる。 まず、カラーピッカーのサンプルを取得する範囲を広くする。 ピックアップした色が、描画色(active colror)になる。 最初…

photoshop パスの境界線を描く

ペンツールでパスを描く 新規でレイヤーを作る 「ブラシ」を選択 「強さのシュミレート」にチェック。 こうしておくと、ペンタブレット使用時に、プレッシャーを感知してブラシの太さを変えたような表現ができる。 あわせて、ペンのオプションでも「サイズジ…

photoshop pentool rubberband

photoshop pentoolのオプションを設定する。 上部のオプションから「ラバーバンド」にチェックする。 こうしておくと、曲線を描くときに、軌跡が表示されるのでどこにアンカーポイントを打てばよいかイメージしやすい。 切り抜きの時に便利。

photoshop shortcut

photoshopのアクションを使うときに、特定のレイヤーを指定しないで一連のフローを実行させるのに必要なショートカットを2つ。 [Shift] + [Ctrl] + [Alt] + [N]レイヤーを新規作成(ダイアログボックス無し)。 [Shift] + [Ctrl] + [Alt] + [E]背景を含む全て…

photoshop 不要な透明部分を削除する方法

ポラロイド写真をスキャンして、フレームだけを利用する。 このとき外側の透明部分が必要ないので削除したい。 「ctrl」+「サムネール」でフレームだけを選択する。 「イメージ」「切り抜き」 これで切り抜けます。

wacom for photoshop

photoshop用にwacomを設定する wacomには説明書がないから不便、、、 youtubeにあるチュートリアルを参考にペン、面倒。 Five Photoshop Tips for Wacom Tablet Beginners - YouTube ペンのupperbuttonに「一つ戻る」、lowerbuttonに「右クリック」を設定す…

もうちょっと、organic なDrop Shadowがほしいと思った、、、

ドロップシャドーをつけたいレイヤーを選択。 「alt」+「ドラッグ」でレイヤーを複製する。 複製したレイヤーを「選択範囲」にする。その方法は以下の通り、、、 photoshop レイヤーを選択して、クリックするとバウンティングボックスが現れる。 このとき「…

illustrator で作成した、、、

illustrator で作成したレイヤー構造を そのまま photoshop に移植する 「レイヤーパレット」「サブレイヤーに分配(シーケンス)」 いったいどんな英語の邦訳なのか?センスを疑う分かりにくさ、、、 それから「ファイル」「書き出し」書き出し形式を「psd…

photoshop pattern

photoshop の patternを使う、、、 まず web上のリソースを使ってハーフトーンのパターンを登録します。 「.pat」がパターンのファイル。これを選択する。そして「読み込み」。 」 (追記)上の画面で、ファイルをダブルクリックするとプリセットに読み込ま…

複数のアートボードを使う

illustrator まずは新規作成で「1つめ」 「ウィンドウ」「アートボード」 新規アートボードを作成 赤い部分をクリックすると「アートボードオプション」ウィンドウが現れる。 アートボードのサイズを決める。 これを繰り返せば一つのファイルに複数のアート…

画像をスライスしてコーディングする その2

スライスした画像をコーディングする。 縦3列、一列ごとに、ユニットごとにまとめる。 縦の列は<div>のクラスで、ユニットは<ul>でまとめる。 まずは整理整頓。 <body><div id="container"><div class="leftColumn"><h1 class="a1 size22"><img src="img/a01_logo.png"></h1><nav><ul class="a2"><li class="size11"><img src="img/a02_nav01.png"></li><li class="size11"></li></ul></nav></div></div></body></ul></div>

画像をスライスしてコーディングする その1

一番大きいサイズの画像は300px*300px、1番小さいサイズの画像は140px*140px。 フォトショップでスライスをする。 「環境設定」でピクセル単位の作業ができる環境にする。 スライスして切りだした後のサイズがわかっている時は、「長方形選択ツール」→「固定…

bevel emboss

photoshop のベベルとエンボスについて bevelは面取りのイメージ。 エンボスは内側から叩き出すイメージ。 ベベル(外側)はよくわからない。ベベル(内側)、テクニック「滑らか」 ベベル(内側)テクニック(ジゼルハード) エンボス、テクニック(滑らか)

包括光源

包括光源の設定。いつもデフォルトの値に不満があるので自分で設定する。 photoshopのファイルを開かない状態で、「レイヤー」→「レイヤースタイル」 レンブラントライトにしときます。

banner copy

本日のお題 背景色をテンプレートから移植する。 背景レイヤーを重ねないで、少しずらしておく。背景レイヤーを選択したまま、テンプレートから「スポイトツール」を使って塗りたい色を選ぶ。 これで完成。 オブジェクトの周りに、同じ形状のパスをずらして…

banner copy

本日のお題。イラストから書きます! だいたい描けたら、「オブジェクト」→「ライブペイント」→「作成」 閉じられたパスが認識されて、カーソルを近づけると太い赤線で塗ることができる部分を表示してくれます。 テンプレートが見えるように背景の紫を表示し…

banner copy

本日のお題 イラストをトレーするときに、鉛筆ツールを使った。 鉛筆を離す度、その前に描いた線が消えてしまう。 鉛筆ツールをダブルクリックして「鉛筆ツールオプション」を開く。 その中の「選択したパスを編集」のチェックを外す。そうすれば解決。 イラ…

banner copy

本日のお題 本日の結果 「CMをチェック」の後の矢印をwingdingsから、アウトラン化して作った。 イラストレーターでテンプレートをなぞる、それからフォトショップにレイヤー構造ごと書き出す。それから写真を入れ込む。というフローがいいのかな? モリサワ…

polaroid (風) 写真

フォトショップ、「新規作成」→「500px*500px」 新規レイヤーを作って「シェイプツール」オプションから固定値を選択。「360px*400px」の長方形を作る。画面上をクリックではなく、少しドラッグすると描けます。色は黒。 「選択ツール」altキーを押しながら…

vector, raster

photoshopはraster graphicsを扱うソフトウェアだけれども、vector graphicsも扱うことができる。 文字、シェープツールで作成した図形、イラストレーターから持ってきた画像などがそれにあたる。 ラスタライズとはラスター画像に変換すること。下の表でいう…

banner copy

本日のお題 本日の仕上がり illustratorからphotoshopに移動する、最適な方法は? 飛行機マークをどうするか?以下のサイトからファイルをダウンロードして使用した。「cドライブ」→「windows」→「fonts」 問題は記号を入力するときにどうやって探すか? 年…

banner copy

バナーをまねして再現する練習。 食べ物の写真を探してくる。以下のサイトがおすすめ。 食材・料理や野菜・果物のフリー写真素材 無料画像のフード・フォト フォントが探せません。ひらがなの「け」「お」が変わっている…小塚明朝pro6nで代用。 最上段の英文…

banner 制作: 枠線について

バナーはページから独立している。 そのことを、はっきりとさせるために「枠線」が必須である。 枠線の太さは「font-weight」に関係している。フォントが細いときは枠線も細く、フォントが太いときは枠線も太くなる。 バナーの枠線は、2,3pxが標準。5px…

banner 制作の基本

バナーの構成要素は「見せたい画像」と「読ませたい文字」。 バナー広告のサイズについては、たとえばgoogleのサイトを参考にする。 広告サイズに関するガイド - AdSense ヘルプ 同じテーマで、縦長と横長を作る練習もする。 フォトショップを使ってパーツご…

photoshop 切り抜いてドロップシャドー メモ

レイヤーのサムネールを「ctrl」キーを押しながらクリックすると、レイヤー(の中身)が選択できる。 そのまま、「選択範囲を保存」。名前をつけないとアルファチャンネルになる。 選択範囲はそのままで、新規レイヤーを作る。カラーパレットで塗りを「#7777…

画像の準備

スライド用の画像を用意する(データの記録です) 手元にある写真を、スキャン解像度からの逆算で、横6000px, 縦4750pxにトリミングする。バライタプリントをフラットヘッドでスキャン。以下手順。 「切り抜きツール」で12 : 9.5 に切り抜いてから、「画像解…

18%gray を rgb で表示するとどうなる?

自分で検証しないとなんとも言えないが、暫定的に18%gray=#777777=rgb 119, 119, 119 としておこう。

MouseOver で 画像が入れ替わる 1

メイン画像の大きさでファイルを新規作成。今回は960px*640px。 5枚の写真を別々のレイヤーに配置する。 各々のレイヤーの名前を、ph01-ph05と割り当てる。 一度この状態で保存。 「ファイル」「スクリプト」「レイヤーをファイルに書き出し」 次にサムネイ…

photoshop ペンツール で切り抜き

ペンツールを選択してパスを選ぶ。ここが一番のポイント。 イラストレーターと違って、外側をトレースした後に、内側をトレースするとそのまま同じパスと認識してくれる。バスを合体させる必要が無い。 パスを選択した状態でctrl+クリックすると「選択範囲」…