WEBはじめました

お花屋さん→WEB広告代理店→色々

0623 Illustratorのパスファインダーは使えるヤツ

 

Illustrator

パスファインダーで型抜きする

こんな形を作りたいとき

f:id:nkjm24:20140624133210p:plain

 

角丸で各要素を描き、斜めの角丸の余分な箇所を四角形で囲む

f:id:nkjm24:20140624133224p:plain

 

四角形と斜めの角丸のみを選択する

f:id:nkjm24:20140624133235p:plain

 

[パスファインダー]の[形状モード]の[前面オブジェクトで型抜き]を選択すると

前面オブジェクト(この場合は四角形)に囲まれた部分と前面オブジェクトそのものが全て型抜きされて消える

f:id:nkjm24:20140624133249p:plain

 

描いた角丸たち全体を選択して

f:id:nkjm24:20140624133301p:plain

 

[パスファインダー]で合体させて完成!

f:id:nkjm24:20140624133210p:plain

 

 

 

CSS

2カラムレイアウト

2カラムに挑戦。

注意すべきは、sidebarが左、contentが右であっても、HTMLドキュメント内でcontentを先に(上に)記述する事。なぜなら、上位にある要素をGoogleさんはより高い重要度であると認識するため。あとはCSS内でcontentをfloat: right;に指定してレイアウトすれば完成。

 

コードはこんな感じ。

f:id:nkjm24:20140624133330p:plain

 

見栄えはこんな感じ。

f:id:nkjm24:20140624133403p:plain

 

 

今週は徹底的に2カラムの特訓をするとのこと。

自分が思った絵が自分の打ったコードで再現されるのはものすごく楽しい。細かい点ではまだどの要素をどう囲むか等、迷いもあるけれどとにかく手を動かして最善の策を見つけたい。