カテゴリー別アーカイブ: デザイン

商用利用OK!2015年にリリースされた無料フォント35

新しくできた商用可のフリーフォントが紹介されていたので、共有します。
最近ではフリーで使えるフォントが非常に増えてきています。一昔前だったら想像もつかなかったような面白い&綺麗なフォントが目白押しなので、色々使ってみてください。

商用利用OK!2015年にリリースされた無料フォント35

関連記事:フォントを増やしていこう

12月15日(火) (実)Webデザイン制作基礎① 講義内容

DreamWeaver

Photoshop、Illustratorと同じく、Adobe社の提供する製作用ツール
特にWebページ作成に特化しており、多機能なプロパティパネルとコードヒント機能が特徴。
他にも様々な機能がある、高機能エディタ。
現場での使用率が高く、求人にDreamWeaber経験が入るものも少なからずある。

DreamWeaberは有料だが、無料で使えるものにも高機能なものが複数ある。
家でも使える! フリーのテキストエディタ
一番下のBracketsは特に高機能なことで有名。Adobe CCの購入まだ迷ってる方は使ってみてもいいかも?

コードヒント
途中までコードを書くと、ヒントが表示される。
一度消えてしまった後は、その場所でctrl + スペースキーを押すと再表示される。
ビュー
Dreamweaberには大きく三種類の表示方法があり、左上のパネルで切り替えが出来る。

コード テキストで書かれたコードだけを表示する。
基本的に編集するのはこちら。
デザイン ページの見た目を表示する。
こちらでも色々と編集は出来るが、コードが汚くなりがちなのと、色々余分なものが入ってしまうのが欠点。
ただ、Webページからこちらにコピーしたりすると、表などがマークアップ済みで貼り付けられるので、便利な時もある。
ライブプレビューで更に実際に近づいた表示が見られるが、意外と当てにならないので参考程度に。ブラウザプレビューが確実です
分割 デザインを見ながらコードが打てる。
便利ではあるものの、ウィンドウが小さいと使いにくい。
プロパティパネル
様々な設定の出来るパネル。
カーソルがどのタグの中にあるかで内容が変わる。
今回はbodyタグ内にカーソル→ページプロパティ、タイトルとエンコードから、HTML5への変更を行った。こちらファイルの新規作成時にも指定できます。
他に文章にリンクを貼ったり、pタグをリストに変換したり、いろんなことが出来る。
ファイルパネル
ファイルパネルを開くと、ローカル(自分のPC)に保存されているファイルの一覧が現れる。
こちらから画像やCSSを貼り付ける事も可能。
今後Webページをサーバーにアップロードする時もこちらのタグを使う。
ブラウザでプレビュー
Dreamweaberからブラウザを開いてプレビューしてくれる。
初期設定ではIEだけがリストにあるが、ブラウザリストの編集→プラスマークから増やすことも可能。
一番よく使うものをプライマリーに指定しておくと良い。
ショートカットはF12。

ロゴやアイコンのルール

facebook、twitterなどのアイコンやロゴは、勝手な変更は原則禁止である。
基本的には各社が自己配信しており、加工していい範囲などが規約として記されている。
色の変更などはイメージカラーなので、基本厳しい。
TwitterとFacebookのアイコンを使いたいときは公式サイトからダウンロードできる


Illustratorのスライス

カンプから素材を切り出し、個別に保存する技術。
通常の範囲とは違うスライス用の範囲があり、それを指定することで選択可能になる。
方法はいくつかある。

ナイフツール
フリーハンドで素材の切抜きが出来る。定規ツール(ctrl+r)やグリッド表示と組み合わせると使いやすい。
オブジェクトごとに保存
オブジェクト単位で選択することも可能。
保存したいオブジェクトを一通り選択した後、上部メニューオブジェクト→スライス→作成で一気にスライスすることも可能。
画像がぴったりのサイズの場合は、こちらのほうが便利。
slice1
スライスの保存
上記の方法でスライスの範囲を設定した後、Web及びデバイス用に保存をすると、スライス単位で選択できる。
slice2

保存時の手順(画像の番号を参照)

①保存したいエリアを選択。Shiftを押しながらだと、複数エリアを選択できる。このとき左上の番号をダブルクリックすると、画像ごとに名前をつけられる。
②保存形式を選択。必ず保存したいエリアを全て選んでから変更する。
③「画像のみ」を選択。ファイル名が適当なものになるが、気にしなくて良い。
④「選択したスライス」を選択。これをしないと、余分な部分も全て書き出されてしまう。

ここまでやって保存すると、指定した場所に「images」フォルダができ、それぞれ別個に保存される。

フォントを増やしていこう

Illustrator、PhotoShopでは、パソコンにインストールされているフォントが使われる。
デフォルトでは数が少ないので、いろんなフォントを探して自分のPCに入れてみよう。

無料のフリーフォント集 フリーフォントケンサク
【2015年】デザイナーなら必ず入れておきたい25のフリーフォント!
画像と同じくフォントにも著作権があるが、フリーのフォントも多い。

フォントには有料のものも数多くある。デザイン会社などでは、複数のフォントを購入し、使用している。
フォントは日本語に対応しているものとしていないものがあるので、検索時は「日本語」をキーワードに含めるといい。

しかしWebにおけるフォントは厄介で、インストールしたフォントは基本的に自分の画面でしか見られない。
画像として表示すれば見られるが、テキスト部分もフォントを変更したいことはままある。

そこで、今はWebフォントと呼ばれる技術が使われる。
実はすごく簡単!webフォントの使い方&日本語対応webフォントまとめ
Webフォント(日本語/欧文)サイトまとめ9選!変更方法もご紹介します
大きく、googleに登録されているフォントを使う方法と、自分のダウンロードしたフォントをサーバーにアップして利用する方法がある。
今後サーバーへのアップロードの講義をするので、その後試してみるといいかも。

印刷物の作成について

DTPの説明があったので、少しだけDTPイラストレーターの基本です。
DTPに興味のある方は覚えておくといいと思います。

・印刷物を作る時の色設定:CMYK
・画像の解像度:300dpi(350dpiあるとなお良い)
・サイズ単位もpx以外のものを選ぶ

トンボとは?

印刷物を作る時は、必ず断裁する目印として、
トンボ(トリムマーク)をつけます。
tonbo

12月09日(水) CGコンテンツ制作演習⑨ 講義内容

Webデザインに使われるソフト

以前より、Adobeの製品がよく使われる。今はフリーのソフトも多いが、機能的にはPhotoShopないしIllustLatorが元になっていることが多いので、この二つを主に勉強すれば、大抵のソフトは利用できる。デザインに使われるAdobeの種類は三種類ある。

ソフト 拡張子 内容
PhotoShop .psd 写真編集に特化したソフト。画像の加工などが得意。今はパスや文字のレイアウトも、ある程度できるようになっている。
Illustrator .ai イラストや図形作成に特化したソフト。オブジェクト、フォントの取り扱いが得意。整列などがしやすいこともあり、枠作りはこちらのほうが得意かも
FireWorks .png 元はWeb開発用に作られたソフト。PhotoShop、Illustrator双方の機能を併せ持つ。今でも人気が高いのだが、CS6以降の更新をしないことが明言されている(CCにも含まれているが、中身はCS6)。フォトショとイラレ、そしてこれから使うDreamWeaverと操作性が類似しているので、とりあえずそれらを勉強しておくとあまり困らない。

※FireWorksの拡張子はなぜか.png。けれどちゃんとレイヤー等の情報も保存される。非常にややこしい。CS6では.fw.pngという長い拡張子でも保存できる。

Illustrator

ペンツール
PhotoShopと同じく、曲線を引くためのツール。Illustratorでは他のオブジェクトと同じく、塗りと線をつけることが出来る。ペンツールを使っている最中、ctrlキーを押しっぱなしにすると黒い矢印、altキーを押しっぱなしにすると白い矢印と同じことが出来るようになるので、上手く活用しよう。
また、ハンドルを出しながらshiftを押すとまっすぐなハンドルが描け、altを押しながらだと片方のハンドルの向きだけ変えられる。
トレースはパスの練習になるので、色々とやってみましょう。パスはとにかく練習あるのみ!
ベジェ曲線をゲーム感覚で特訓して自由に操れるようになる「The Bezier Game」
以前も紹介したもの。altキーの使いこなしが重要になります。

プラスポイント

オブジェクトを選択している状態だと、上部に「線:」というリンクが出る。ここをクリックすると、線パネルが開ける。
線パネルでは、線の細かい設定が出来る。下の画像では、ひよこの足の先を丸くした。
hiyokoashi

効果
イラストレーターでは、線や塗りに様々な効果をかけることが出来る。
今日は「ぼかし(ガウス)」で、ひよこのほっぺをぼかした。

プラスポイント

効果には様々な種類がある。
↓のは効果→スタライズ→落書き
rakugaki
この他、PhotoShopであつかったドロップシャドウのようなものも「効果」に含まれているので、色々試してみよう。

3D
イラストレーターでは、簡単な3Dモデルを作ることも出来る。
こちらも「効果」の一つ。
オブジェクトを選択して、効果→3Dからメニューを選ぶ。

押し出し・ベベル オブジェクトを押し出す形で3Dができる。文字などにも使える
回転体 オブジェクトを回転させる形で3Dができる。空洞なども作れる
回転体 作った3Dオブジェクトを回転させられる。

Web制作で使う機会はあまりないかもしれないが、技術の一つとして抑えておくといいかもしれない。
※3Dは非常に重たいので、作業するときは注意してください。
3D オブジェクトを作成する方法

単位の変更
イラストレーターは印刷物、Webなど、様々な媒体で使われるので、いくつかの単位が設定できる。
全体の設定をするときは、編集→環境設定(一番下)→単位から変更できる。Web制作に使うときは一般をpxに指定しておくと便利。