こんにちは！
今日はフォトショップのネタです。
スライスツールっていう便利なものがあります。
これはWebページを作るのにかなり使えるみたいなことをどっかの雑誌で読んだことがあります。フォトショップで作りたいホームページのレイアウトや画像を作りこんで
スライスツールで画像ごとに綺麗にスライスして、Divで組み上げたDreamweaverに投げ込み最終調整するだけで簡単にホームページが作れちゃうんです。
あんまり手をかけない簡単なホームページならこれくらいでも良いのかな！？
それではまたー
こんにちは！
今年になってから、ばたばたな毎日ですが
久々のブログ更新です。
今日はPhotoshopネタです。
トップヘッダーを作るにしても
サイトのパーツを作るにしても重宝しているのが
カスタムシェイプです。
カスタムシェイプでGoogoleで検索するといっぱい出てくるのですが
ダウンロードして保存してPhotoshopで読み込むだけでいろいろなシェイプが出現します。
透かしてパーツに入れても良いし、そのまま色を付けて入れても良し。
最近のマイブームです。
あけましておめでとうございます！
空けてもバタバタですが、今年の
一人前のWebデザイナーになるという
目標達成の為にも日々がんばり続けます。
最近は、PhotoshopやDreamweaverなどなど
をいじらせていただいております。
ホームページを作りたいけど作れないって思ってるあなた！
とにかくAdobeを買いましょう。
実際、自分もAdobeが欲しいです。
自宅で、心行くまでいじりたいです。
それでは今日はこのへんで！
ばいばい！
ウェブページを制作するにあたってブラウザはかなり重要です。
いろいろとカスタマイズできるFirefoxを使いはじめていますが
アドオンといって機能を追加する事ができます。
その中で僕が使っている使えるアドオンを紹介しちゃいます。
GooglePreview
GoogleとYaooの検索結果にウェブページのプレビューを追加します。
参考にしたいウェブを探すのに便利。
はてなスクリーンショット拡張
ブラウザのスクリーンショットを撮ったりするアドオン
ブログをあげる時に画像化できちゃいます。
Measurelt
画像のピクセルをメジャーで測る事ができます。
フォトショップでヘッダーを作るときのピクセルの参考などにできます。
Firebug
個人的にお気に入りです。指定した場所のソースコードを見たりできます。
CSSをいじるのに無くてはならない存在となってます。
基本的にはこのへんのアドオンを入れてこのブログサイトをいじったりしています。
今、作っている他のブログでリストが付いているものがありました。
・お勉強
・ブログ
・3月
このようになっている物はCSSでリストと呼ばれています。
・だけではかなり寂しいのでこの・を画像にしてみます。
該当のCSSを見つけだして。。
今回は下記のような部分
div#utilities dl dd ul li {
margin: 0.5em 0;
list-style-image:url("/img/ico2.png");
}
list-style-image:url("/img/ico2.png");
が追加した部分です。
そうして・だった部分が画像にすり替わりました。
リストに色が付いただけでWebもがらりと印象が変わります。
テキストが寂しいので文字に影を付けてみました。
ブログのタイトル部分に影が付きました。
記述としては、該当のCSS部分を見つけだして
.asset-name a {
text-decoration: none;
text-shadow:#000 3px 3px 2px;
}
今回はこの部分です。
text-shadow:#000 3px 3px 2px;
この行を追加しただけです。
text-shadow:（カラー）
その後の記述については
ピクセルの指定で左から順番に
１，影の位置で右方向に、どの程度移動した位置か
２，影の位置で下方向に、どの程度移動した位置か
これを指定します。ちなみにマイナスで指定してあげれば反対方向に
影を付ける事も可能です。
３，一番右の値は影のぼかす範囲をしていしてあげられます。
これで、ブログの文字が一層引き立つはずです！
お試しあれー。
CSSをいじっていて背景の色を変えたり背景に画像を指定する
場面が増えてきました。
CSSでは一部分の背景の色を変えたり、画像を組み込む事が
可能になっています。
前回はヘッダの画像で下記のような指定をやってみましたが
div#header {
background-image:url("http://lunch-blog.com/img/top.png");
background-repeat: no-repeat;
}
background-image:url("http://lunch-blog.com/img/top.png");
この部分を
background:#ff9900;
にすれば背景の色がオレンジになったりします。
ヘッダだけではなく、ブログの題名部分であったり
左右にあるウィジェットと呼ばれる部分の題名部分なども
同じく画像を指定したり色を変えたりが可能になってきます。
さらに、属性と呼ばれる文章を下に追加するだけで
同じ画像の横方向への繰り返し
background-repeat:repeat-x;
同じ画像の縦方向への繰り返し
background-repeat:repeat-y;
繰り返さない
background-repeat:non-repeat;
など様々な選択が可能になります。
いつもホームページ制作ネタなので
今日はトラブルネタにしてみます。
いつものようにログインしようと
URLの後ろに
/mt/
を付けてログインしようとした所、急に
http://swzaob.com/mt/
このページに飛ばされました。
なんでログインできないのだろう？
と不思議に思っていましたが
実際のログイン方法が違ったみたいです。
http://swzaob.com/mt/mt.cgi
ここに飛ぶのが正解みたいです。
なんでいきなりいつものようにログインできなくなったか？
それはカテゴリに『MT』というものを作ったからでした。
最初ログインできない時は焦りましたが
正解がわかってしまうとあっさりでした。
