Webデザイナーへの道しるべ | suge1040's diary

Webデザイナーになる事を目指しフェリカテクニカルアカデミーで勉強していましたsuge1040によるブログです。

6/24(火) 授業メモ

今日の授業の流れは、

①CSS3の演習テスト実施

②Webフォント

svg画像を作成

シンタックスハイライターについて

⑤zen-codingについて

 

〜メモ〜

①GoogleFonts

f:id:suge1040:20140624235013p:plain

 

f:id:suge1040:20140624235752p:plain

i ) GoogleFontsを開く

ii ) 使いたいフォントを探す

iii ) 選んだら 矢印マーク(Quick Use)を押す

iv ) 必要なフォントの太さにチェックを付ける

v ) 3. Add this code to your website: のURLをコピーし、ソース(HTML)のheadに貼付ける。

vi ) 4. Integrate the fonts into your CSS: にフォント設定のCSSが表示されているのでコピーして、CSSにペーストする。

 

②rogoをsvg形式で作成する。

i ) rogoをイラストレーターで作りsvg形式で保存する。

ii ) svgは画像が拡大縮小しても崩れない(ぼけない)

iii ) svgで保存するときに「svgコードを表示...」が表示されるのでクリックするとコードが表示される。

iv )  イラストレーターで描いた rogo の覆う大きさの四角を描き最背面に

v ) iv )で描いた四角を選択する

vi ) オブジェクト→アートボード→アートボードに変換

vii) スマホなどのデバイスの画質が高精細になってきているので、pngまたはsvgで保存する。jpgはぼけてしまう。

viii) pngは基本的に圧縮する。

iv) macpngを圧縮するには imagealpa を使う。

 

〜その他〜

AIで文字を斜めに編集するにはシアーツールを使う。

ただし文字をアウトライン化しないとダメ。