Hatena::ブログ(Diary)

備忘録 -web制作授業での覚書など-

2015-07-21

wordmark_it ローカルインストールされているフォントを総確認。

| wordmark_it ローカルインストールされているフォントを総確認。を含むブックマーク

f:id:gerogerokaeru:20150721172955p:image:w640

http://wordmark.it/

WordMark_itのサイトでインストールされてるフォント情報を読み込みさせて

フォームに任意の文字をタイプするとそれぞれのフォントがプレビュー出来る。

欧文フォント

f:id:gerogerokaeru:20150721172954p:image:w640

和文フォント

f:id:gerogerokaeru:20150721172953p:image:w640

フォーム左右のオプションボタンでフォントのサイズや

プレビュー面の拡大縮小、文字色や背景色の反転等がカスタマイズできる。

2015-05-16

[illustator]文字の角マル成形

文字の角マル表現。

文字の角マル表現。を含むブックマーク

f:id:gerogerokaeru:20150516130734p:image:w360


(1)テキストをアウトライン後に効果>スタイライズ>角を丸くする。

f:id:gerogerokaeru:20150516131105p:image:w360


(2)アピアランスでパスオフセット

アピアランス内の「テキスト」に対して

(負の値を入力。角形状:マイター)と(正の値を入力。角形状:ラウンド)のレイヤー順で成形。

f:id:gerogerokaeru:20150516130732p:image:w360


(3)上記のオフセットを改良

(正の値を入力。角形状:マイター)(負の値を入力。角形状:ラウンド)(正の値を入力。角形状:ラウンド)

の順でアピアランスレイヤーを並べる。

f:id:gerogerokaeru:20150516130854p:image:w360


1〜3の拡大比較

左から1〜3

f:id:gerogerokaeru:20150516131935p:image:w640

2015-05-15 このエントリーを含むブックマーク

[illustator]スクリプトファイルの置き場所

準備

illustratorのスクリプトファイルは

アプリケーション/Adobe illustrator(バージョン名)/プリセット/ja_JP/スクリプト/

に配置。

実行

メニューバーのファイル>スクリプト>実行したいスクリプト名を選択。

ScriptKeyAi

ScriptKeyAiを使用すればスクリプトのキーボードショートカットが使用可能。

2015-05-14 このエントリーを含むブックマーク

[illustator]表示方法の登録

様々な表示方法

デフォルトで登録されてある、よく使うショートカット表示方法は

アウトライン表示の「コマンド+Y」

100%の表示は「コマンド+0」などがあるが、カスタマイズした表示方法は

メニュー>表示>新規表示で登録できる。

アートボード複数登録

アートボードを複数制作するとウィンドウのアートボードを表示させると

各ボードに名前登録できる。

2015-05-13 このエントリーを含むブックマーク

[illustator]コントロールとアピアランスのカラーパネル表示

カラー表示の切り替え方

選択ツール時にコントロールパネルの表示の仕方は

通常はスウォッチ表示。shiftをお品柄だとカラー表示。

通常クリック

f:id:gerogerokaeru:20150516154127p:image:w360

shiftクリック

f:id:gerogerokaeru:20150516154126p:image:w360

一方アピアランスの表示の方も通常は通常はスウォッチ表示。shiftをお品柄だとカラー表示。

通常クリック

f:id:gerogerokaeru:20150516154129p:image:w360

shiftクリック

f:id:gerogerokaeru:20150516154128p:image:w360

2015-04-28

空の書き方

| 空の書き方を含むブックマーク

1,下地グラデーション設定

朝日、青空、夕暮れ、夜空などの時間帯によって下地のレイヤーにグラデーションを敷く。

直線的なグラデーションだと自然な感じが出ないので、湿度を考慮したボケ足の大きいブラシなどで

調整。

2、雲の追加

下地グラデレイヤーの上に雲のベースレイヤを追加。

3,雲の立体感や奥行きを追加。

雲ベースレイヤの上にクリッピングマスクレイヤを設置して濃淡をだす。

4,色調補正でできあがり。

レイヤーの最上位に調整レイヤーを追加して色調補正して完成。

2015-04-22

illustrator 文章設定[illustrator]

illustrator 文章設定[illustrator]を含むブックマーク

文字設定

行送り140~190%
行揃え均等配置、最終行左揃え
禁則処理弱い・強いを任意
文字組み行末約物半角を元に調整

備考

  • 行送りは段落パネルのジャスティフィケーションでデフォルト設定は175%
  • 行揃えのショートカットキーは「command+shift+J」
  • 禁則処理を弱く設定すると、音引き(ー)や、小書き仮名文字(ょ、ェなど)が行頭にでる。

2015-01-05

wordpressでsnsシェアボタンを簡単に配置する「ShareButtonsByAddThis」プラグイン

| wordpressでsnsシェアボタンを簡単に配置する「ShareButtonsByAddThis」プラグインを含むブックマーク

wordpressでsnsシェアボタンを簡単に配置する「ShareButtonsByAddThis」プラグイン。

プラグイン新規追加で「Share Buttons By AddThis」を検索、インストール後有効化。

アイコンサイズを選択して、設定保存。ページ下部にSNSアイコンボタンが出来るのでシェアできる。

2014-11-05

レスポンシブサイトを設計補助のサイト

| レスポンシブサイトを設計補助のサイトを含むブックマーク

This is Responsive

レスポンシブサイトの様々なパターンを表示。

複数カラムや表組み、レイアウトフレームを確認出来る。

f:id:gerogerokaeru:20141106132441j:image:w360


Respinsivator

入力したURLのサイトの複数のレイアウトサイズを一括でチェックできる。

f:id:gerogerokaeru:20141106132440j:image:w360

2014-11-04

エンペローブ

| エンペローブを含むブックマーク

エンペロープとは

エンペローブとは"はめ込むオブジェクト"を"型どりするオブジェクト"のパスの角度や曲線に沿ったデザインに整形してくれます。


1,多角形のオブジェクトの形に添うように文字(アウトライン済み)をはめ込みます。

f:id:gerogerokaeru:20141104231837p:image

2,型どりする多角形オブジェを最前面に配置し、オブジェクト→エンペロープ→最前面のオブジェクトで作成(cmd+option+c)。

f:id:gerogerokaeru:20141104231838p:image

3,整形ができたら、好みの配色で完成。

f:id:gerogerokaeru:20141104231839p:image


応用ーパッケージデザイン

f:id:gerogerokaeru:20141104232758p:image:w360

1,前後左右天地の面を平面時にデザイン。続けて立体のオブジェクトを別に用意。


f:id:gerogerokaeru:20141104232759p:image:w360

f:id:gerogerokaeru:20141104232800p:image:w360

2,配置箇所にそったオブジェクト同士を選択し、オブジェクト→エンペロープ→最前面のオブジェクトで作成。


f:id:gerogerokaeru:20141104232801p:image:w360

3,前後と側面はイメージにそうデザインになるが、天面は画像がずれる場合がある。


f:id:gerogerokaeru:20141104232802p:image:w360

型どりするオブジェクトの角度を調整するか、平面デザインのオブジェクトを直接、自由変形やシアーツールなどで

立体的にあわせる。