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

webかたつむり

ウェブデザインを勉強中

illustrator

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

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

パスのオフセット

星の先端をベベル結合にしたくないので、比率を大きくしておきます。 選択したパスの内側にオフセットしたいときはオフセット量を「ー」マイナスにしてあげればよい。 これを繰り返すと、、、、

マイター結合

線幅10ptで鋭角を描く。 角の形状は「マイター結合」 比率は「5」 このとき「線幅」*「比率」=50という値が重要! この値がマイター結合の臨界点(値)になる。 マイター長が「線幅」*「比率」の値を超えることはない。 マイター長が値を超えたときは、…

illustrator 円を中心から描く

楕円形ツールで円を描くと、外接する正方形の左上の頂点から描くことになる。 円(楕円)を中心から描きたい時は。「alt」ボタンを押したままドラッグすると中心から描くことができる。 四角形ツールでも、多角形ツールでも同様。

illustrator pentool の操作をいまひとたび復習したい

パスを書き終えるには、、、 ペンツールでパスを描く。 クローズしないでやめる(書き終える)には「ctrl」を押して「ペンツール」を「ダイレクト選択ツール」にして、どこかをクリックすればよい。 クローズドパスを途中で切る方法 切りたいパスを選択した…

illustrator 落書きオプション(後日追求しよう、、、)

handwritten stroke illustrator

少しだけ直線をラフにする方法。 「線」を「線」のままではなく、「拡張」して「形」する。 weightを持ったstrokeではなく、「fill」と「stroke」に拡張します。 「オブジェクト」「分割、拡張」 「効果」「パスの変形」「ラフ」 「パラメータ」の意味はよく…

illustrator で作成した、、、

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

brush tool

ブラシを使って描いた線。 「線」なし「塗り」ありにすると、、、 ブラシツールのパターンがなくなってしまう。 元に戻します。 「散布ブラシ」で色を変えるとき、彩色を「なし」にしていると、カラーパレットで色を変えられない。 「彩色」を「淡彩と低明度…

confetti brush illustrator

confetti brush ちいさな丸を描く。小さくかく。大きくすることは簡単だけれども小さくするのは大変。想定サイズの最小で描く。 描画した円を選択した状態で「新規ブラシ」 「新規ブラシ」「散布ブラシ(scatter brush)」 パネルのオプションを変更しないと…

illustrator pentool

pentool4变化 アンカーポイントツール 書き始め、始点の表示。アンカーポイントを打つ前の状態。 「アンカーポイント」→「線」の始点となる「点」 アンカーポイントツールになっている時の表示「v」型 アンカーポイントツールはアンカーポイントに対する操…

dot

「線端」を丸にする。線分を「0」にすれば丸が描ける。 線分に値を入れると下の図のような形状になる 「間隔」ー「線幅」=丸と丸の間の距離

hatched shadow

線の準備 shift キーを押したまま、45度傾いた直線を描いた色を指定する。 文字の反対側にも同じく線を引く。線のバウンティンぐボックスが文字にかからないようにする。 2本の線を選択した状態で「ブレンド」「作成」 線と線の間に、指定された数だけ線を…

illustrator brush

パス上にパッターンを作る。 「ウィンドウ」「ブラシ」 パターンにしたい図形を選択して「新規ブラシ」 「パターンブラシ」 コーナーの処理方法を設定できる模様ですが、とりあえずデフォルトの設定で、、 線を引いて、適用したいパターンを選択すると、、 …

illustrator pattern

ctrl + c ,ctrl + f で同じ位置に重なるようにコピーができる。 下のレイヤーを黒、上のレイヤーを白、白い方は縮小して若干回転させる。 線はなし、塗りだけ。 ctrl + g グループ化する。 拡大or 縮小 ctrl + d

watercolor texture

1つのパスで文字組した場合 illustratorで文字を組む。 watercolor textureの画像ファイルを配置する。 画像を埋め込んで、最背面に配置する。 両方選択してから、右クリック「クリッピングマスクを作成」 2つ以上のパスで文字組した場合 illustratorで文…

袋文字別解(personal memorandom)

boldで文字組 オブジェクト、分割拡張 線を黒、塗りを白 パスファインダーでパスを結合 複合パス(先の黒が塗りに重なっている箇所を解消できる)

badge

形を作る 細長い長方形と、丸を書く。円の直径に対して、延長線上にに長方形がくるようにしておく。 ctrl+y でアウトラインを表示する。 長方形を選択した状態で(回転させるものを選択する)、 r (rotation 回転ツール) cyanの十字ポインターがでてくる。…

swatch 1

swatchパネルを整理する ごちゃごちゃといろいろある使わない色を削除して、好みのパレットにする。 まずいらない色を捨てる。 swatchパネル左下の「ライブラリー」から好みの色をパネルに登録しておく。 初期設定にはいつでも戻せます カラーブックを検索す…

shevron

chevron単体 縦線を一本引く。 選択した状態で、「パスの変形」「ジグザグ」 オプションの設定 「大きさ」は折れ曲がる度合い。コーナーを深くする場合は値を大きくする。 「折り返し」は何回折り返すか。 「ポイント」は「直線的に」にするとジグザグに、「…

bannar

選択した状態で右クリック☞ メニューから「変形」「リフレクト」 MANFRED KLEIN FONTERIA - Fonts and dingbats 「ワープ」「アーチ」で変形するパターン 「ワープ」「旗」で変形するパターン 一度「ワープ」したら「アピアランス」ウィンドウで調整(ON&OFF…

illustrator shortcut

「ctrl+t」 ☞文字パレットの表示 もう一度 ctrl+t で切り替える前のワークスペースに戻る。 「t」 ☞ 文字ツールに持ち替え 「v」 ☞ 選択ツールに持ち替え 「a」 ☞ ダイレクト選択ツールに持ち替え 「+」 ☞ ポイントを追加 「m」 ☞ 長方形ツールに持ち替え

Envelope Deformations

You could also try Path Effect / Envelope Deformations(first - font converted to path Ctrl+Shift+C/ then Ctrl+Shift+G / and Ctrl++)Note that not all the fonts are suitable for this kind of deformation (you may see in the example that all "…

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

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

Curining Illustrator

和文フォントなのでベタの状態=和文等幅。これは理解できます。 A-OTF中ゴシックBBBの場合 プロポーショナルメトリクス=自動 筑紫明朝Proの場合

下付き文字 Illustrator

一つ目の方法 1つの方法は「OpenType」「位置」「下付き文字」 この方法はOpenTypeフォントでしか使用できません。 もともとフォントに下付き文字の設定がされている場合しか機能しません。 下の例だと、OpenTypeのフォントですが、フォントに下付き文字の…

イラストレーター 初期設定のフォントを変更する。プレビュー方法も、、、

windowsの隠しファイルを表示する設定にする。 explorlerを開く。 メニューバーの表示タブをクリックしてから、「隠しファイル」にチェックを入れる。 次にイラストレーターを立ち上げる。 「ファイル」「開く」から以下の階層をたどる。 設定を変更したい項…

illustrator 行送りについて

イラストレーターで行送りの設定に「()カッコ」がついているときは自動になっている。 デフォルトの値は175%、つまり行間が文字サイズの(これが微妙な表現っぽいです、、、)に対して75%ということ。さて、実験。 値を0にできないので0.1にしてみる。当…

illustrator 設定変更箇所の備忘録

文字の空き量を設定する 「文字組アキ量設定」和文と欧文の間の空きを設定しなおす。 「書式」「文字組アキ量設定」で新規に設定する。 設定の際は、「約物半角」をベースにして、「欧文の前後」だけを設定変更する。 最小、最適0%、最大50%と指定する…

ai を pdf に変換する

イラストレーターから直接pdfを作らない、が基本。データーが重たくなってしまう。 「文字」のアウトラインデータがとても重たい。文字のアウトラインデータを削除しないとデータが重たくなる。 元の「ai」ファイルのコピーを作る。 コピーしたファイルの「…

illustrator tips 配置、プレビュー、埋め込み

psから配置した、画像ファイルの扱い。 レイアウトするときは「配置」☞「リンク」にチェック このとき、イラストレーターに表示されている画像はプレビュー(72dpi)になる。下の画像で、緑のバッテンが画像の中央に配置されているリンクファイルはプレビュ…

ai ファイルを pdf に変換する

illustrator 「ファイル」「複製を保存」 保存するフォルダを指定する。 メールでのやりとりや、webでの公開用には「最小ファイルサイズ」プロファイルを選択する。 最小ファイルサイズ Webやインターネットでの表示、または電子メールでの配信に適した PDF…

banner copy

本日のお題 市松模様の作り方。10px×10pxの柄を下のように作る。 全部選択した状態で、スウォッチパネルにドラッグアンドドロップ。 これだけだとパネルに登録されていません。 下の「ライブラリー」ボタン(というのか知りませんが‥)をクリックして保存し…

banner copy

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

banner copy

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

banner copy

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

banner copy

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

Wingdings

効率的に記号を扱いたい…から準備をしよう。 illustratorでwingdingsの一覧を表示させる方法。 フォントを選択した状態で、「書式」→「字形」、で表示できます。 フォントを選択して入力する。今は「字」の状態。 この「字」を「図形」として処理できるよう…

banner copy

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

banner copy

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

color tip

illustratorでcolor tipを作る A4で新規作成 50pxの正方形を作る。 コピーしてもう一つ同じ正方形を作る。 2つの正方形を、A4の両サイドに配置する。 各々、好きな色を塗る。 「オブジェクト」「ブレンド」「ブレンドオプション」 「ステップ数」とは、2…

960 grid system

grid system か free layoutのどちらかしかない。選択肢は2つ。 当然ながらまず、gridsystem でレイアウトすることを考える。 そこで便利な道具がこれ。 illustratorのテンプレートを開く。 highlightしたレイヤーをダブルクリックすると… テンプレートにチ…

解像度の低いロゴを修正する svg

200%拡大したオリジナルのファイル イラストレーターで開く トレースして複合パスを作る、が基本らしいですが、自分の仕事を評価できません… 大事なのはここからです。とりあえず元ファイルは.aiで保存。 「オブジェクト」「アートボード」「オブジェクト全…

アキュートアクセント の入力方法 "café"の入力

Make sure that "Number Lock" is switched on. Don't release the "Alt" key until after you've typed the alt code. 自宅のPCにはテンキーがないので、numlockして、altキーを押しながら、233つまりKLLのキーを押す。 無事にアキュートアクセント付き…

illustrator イラストのトレース その2

正方形をひとつ作って、コピーする。両方選択してから、「オブジェクト」「ブレンド」「ブレンドオプション」 2つの正方形の間に、幾つの正方形を描くのか?今回の場合、9個。 「ブレンドオプション」「ステップ数(間に作るオブジェクトの数)=9」にする。…

illustrator イラストのトレース その1

本日のお題 A4にテンプレートとして配置。 カンプの通りにfuturaが使えないので、century gothicで代用しています。 尖ったクチバシは… 矢印のあたりにアンカーポイントを追加して、ダイレクト選択ツールで掴んで引っ張る。 細い足の部分は線を描いてから、…

navigation button の制作 2

下のようなものを作る。 幅800px長方形、左辺を基準に160px毎に縦の線を引く。左辺に重なるように1pxの線を引いて、水平に160pxコピー移動。 ctrl+Dで同じプロセスを繰り返す。 厳密にいうと最後の長方形は、内寸が 1px 狭いことになるが、無視をしたい。 文…

navigation button の制作 1

「新規作成」→「プロファイル」→「WEB用」 新規オブジェクトをピクセルグリッドに整合、チェックをオフにする。 1px の黒い線で長方形を描くと、幅 2pxでグレーの線になってしまう。 そこで、線の位置を内側にする。 こうしておけば、線の外側が指定したサイ…

pixel にこだわった illustrator の環境設定

「一般」キー入力 0.5pxに変更。 なんとなくすべての値を 1px にしてみる。 あたりまえだが、すべての単位を px にする。 グリッドは 10px を 10 分割。つまり、1px 刻み。