カテゴリー : web制作メモ

Photoshop-変形-ワープ web制作メモ

トップbefore
上の写真は、Myanmar_2014のトップページに使っている写真、下の写真はその元画像をPhotoshopに表示している状態です。

元画像からは色調調整、トリミングなどのレタッチ作業の他、今回はワープという変形機能を初めて使ってみました。ワープ機能は選択範囲(下の画像では仏さまを囲む枠線)を指定し、その枠線をドラックして引っ張ることで、選択範囲内だけを変形させることができる。元画像は寝釈迦仏の足元の方向から斜めに写しているので、お顔が圧縮されて見えてしまう。このつぶれたお顔を引っ張って調整、その結果、上の写真は少々面長になっています。
引っ張る方向によっては画像に隙間が生まれてしまう。コツをつかむのに時間がかかりました。

切り抜かずに画像の一部だけを変形できるのは、正直、驚きました。慣れればさまざまな場面で応用が利くはずです。しかし、この機能を使えば元の被写体の特徴を残したまま、別の状況を作り上げることもできる。ちょっと恐い気もします。

web制作メモ グラデ・ジェネレーター

CSS3にて角丸BOXや半透明色などが作れるようになりましたが、グラデーションに関してはブラウザの対応が特に遅れていて、いわゆるベンダープレフィックスを付けないと実装が難しい状態です。しかし、こちらの GRAD3 というサイトを使うとベンダープレフィックスも付加されたコードが自動で作成されます。しかも、この手のサイトにしては珍しく日本製らしい。正直非常に便利です。
GRAD3 は基本的にはアイコンを作る用らしいので、縦方向のグラデしかできませんが(或いは私がやり方に気付いていないだけ)、コードをいじれば横方向のグラデも作れます。チベットの石の背景に利用させていただきました。

web制作メモ ついてくる「戻るボタン」

チベットの石
ページの一番下によくある、「このページのトップへ戻る」などと表示されたリンクが、スクロールとともに下についてくる jQuery です。シンプルなスクリプトのようで、検索するとたくさん解説記事が出てきます。私が参考にしたのはこちらです。

cssだけで作る画像ビューア

チベットの石
画像拡大ビューアは jQuery で構成するのが一般的ですが、このページでは css3 の新要素 transition を使って作ってみました。transition は時間をかけてボックスの形状などを変化させることができるので、いわゆるアニメーション的な効果を表現できます。ただ、ボックスが拡大するときに後ろのコンテンツが下に移動するので、拡大ビューアとしてふさわしいかは疑問です。jQuery を使えば周囲のレイアウトを崩さずにビューアを設置できます。使いどころは考える必要がありそうです。

web製作メモ slimbox2 (jQuery)

タイの屋台めしページ では、slimbox2 という jQuery を画像の拡大ビューアとして使いました。
slimbox2 はシンプルでオーソドックスなライトボックス系フォトギャラリーです。サムネイルをクリックすると画像が現れ、簡単な説明も表示されます。サムネイル画像とギャラリー用の画像は別のものをそれぞれ用意しました。
slimbox2