カテゴリー「webデザイン」の13件の記事

[Photoshop]背景塗りつぶし

Photoshopに読み込んだ画像の背景だけを塗りつぶす方法です。

1.読み込んだ画像の形式をRGBに変更します

Photoshoprgb_3

2. クイック選択ツールで背景を選択します

Photoshop_4

3. 右クリックメニューから「塗りつぶし」を選択して任意の色に変更します

Photoshop_5

4.背景色の変更が完了しました

Photoshop_6

※背景にある文字などだけを消す場合は、「選択範囲 → 色域指定 → クイックマスク → 背景選択 → OK」をして、選択解除をすれば背景色に影響を与えずに文字部分だけ消しゴムで削除することができます。

フォトレタッチ

画像データ、特に写真を取り込んだデータを加工・修正する作業をレタッチという。昔の写真加工は専門の設備などが必要だったが、今では専用のソフトが販売されているため、コンピュータがあれば個人でも簡単に加工作業ができる。

デジカメの普及やフォトレタッチ用ソフトの低価格化の影響もあってか、専門の写真家やデザイナーだけでなく、普通の人が写真加工をしていることも珍しくない。細かなヨゴレを取り除いたり、明るさや色調を調整したりする他、拡大や縮小、合成なども簡単に行えるため、最近の合成写真のほとんどはフォトレタッチソフトで作成されていると言われている。

なお、本来は写真の加工作業全般を指す言葉だったが、コンピュータによる加工が一般的になったために、今では「コンピュータによる画像データ加工」の意味で用いられることが多い。また、写真以外のイラストなどの加工もフォトレタッチと呼ばれることがある。

htmlのaタグのアンダーラインを消す方法

aタグを使用するときにアンダーラインを消したい場合はcssで以下のように指定します。

◆aタグ全ての下線を消す場合
a { text-decoration: none; }

◆特定のタグだけ消したい場合(クラス名まで追加)
a.declink{ text-decoration: none;}

<a href="aaa.html" class="declink">下線無し</a>

ビットマップ画像

ビットマップ画像とは、コンピュータグラフィックスにおける画像の形式のひとつ。画像を格子状に多くの線密な点(ピクセル)に分割し、その点の色や濃度をRGB等の表色系を用いて数値として表現する、ラスタ形式によってコンピュータのデータとして扱う、ラスターグラフィックス(ラスターイメージ)を意味する。

これに対し図形を作成するための作成情報を数値や式として表現する、ベクタ形式によってコンピュータのデータとして扱うものをベクターグラフィックス(ベクターイメージ)と呼ぶ。

RGBカラーモデル

RGBカラーモデルは色の表現方法の一種で、赤(Red)、緑(Green)、青(Blue)の三つの原色を混ぜて幅広い色を再現する加法混色の一種である。RGBは三原色の頭文字である。

ブラウン管(CRT)や液晶ディスプレイ(LCD)、デジタルカメラなどで画像再現に使われている。

同様の表色系に「RGBA」というものがある。これは赤(Red)、緑(Green)、青(Blue)、アルファチャンネル(Alpha)の略である。RGBAはカラーモデルとしてはRGBと異なるものではないが、異なる表現方法である。アルファチャンネルは透過(透明度)を表現するもので、画像合成などに使われる補助的なデータである。アルファチャンネルは映像編集技術におけるキー信号に相当する。

PhotoShopにグラデーションの追加

PhotoShopにグラデーションパターンを追加したいとき、下記のサイトに行けば、1000個のグラデーションパターンがフリーで公開されています。

1000 Free Gradients - Web 2.0 Gradients [Graphic Host]
http://www.graphic-host.com/1000-free-gradients-web-20-gradients.html

シンプルな2色の組み合わせのパターンが多く、これが1000個もあればかなり便利です。ダウンロードしたファイルをPhotoShopで開くだけでライブラリに追加されます。

MTのstylecatcherで扱えるファイルサイズ

CMSのMovable Typeには、web上で公開されているデザインを3クリックくらいで自分のサイトに適用できるstylecatcherというプラグインが標準でバンドルされている。

これを使えば、簡単に自分のサイトのデザインを変更できるわけですけど、逆に自分が作ったデザインを公開して、人に使ってもらうこともできる。やり方は簡単で、作成したcssファイルと必要な画像ファイルを置いたフォルダをwebに公開する。使う側の人は公開されたcssファイルのアドレスにstylecatherのメニューからアクセスすれば、必要なファイルをダウンロードして自分のサイトに適用することができる。

で、さっき公開用のデザインを作ってたんですけど、どうもstylecatherで読み込める1ファイルあたりの容量には上限値100KBの制限が設けられているようです。300KBほどの画像をstylecatcheから読み込もうとしたら、200KBほど切り落とされてしまいました。

このあたりの仕様を詳しく知りたかったのですが、あんまりそういったドキュメントは検索しても出てこないですね。。

img要素のalt属性(htmlタグ)

img要素alt属性は、画像、フォーム、アプレットを表示できないユーザエージェントのために、代理テキストを指定する。代理テキストの言語は、lang属性で指定する。

つまり、alt属性は代理テキストとして機能します。img要素の場合、画像が表示できない時(例えば画像を表示しないテキストブラウザや、音声ブラウザ、そしてネットワーク上のトラブルで正常に画像が読み込めなかった時等)に、その画像の代わりとしてalt属性がテキストとしてレンダリングされます。

また、alt属性は使っていないサイトも多いですが、htmlの仕様上は「imgの場合、必ず書かなくてはいけない属性」です。もし、テキストで表示する意味のない画像の場合はalt=""とするように以下のように仕様書で述べられています。

代理テキストは非常に役立つものでありえるが、取り扱いには注意しなければならない。著者は次の指針を守る必要がある。

・ページの整形を目的とした画像に対して、不要な代理テキストを指定しないこと。例えば、見出しや段落を装飾するために加えられた赤い丸の画像について、alt="赤い丸"などとするのは不適当である。こうした状況では、代理テキストは空文字列("")とする必要がある。なんにせよ、著者はページの整形に画像を用いることを避けるようにするべきである。その代わりにスタイルシートを用いる必要がある。

・例えば「ダミーのテキスト」などの無意味な代理テキストを指定しないこと。ユーザが不快なだけでなく、これを音声や点字に変換しなければならないユーザエージェントの処理速度を低下させる。

SPANとDIVの違い(htmlタグ)

SPANDIVも囲んだ範囲にスタイルシートを適用するために使用します。この点では、用法はいっしょです。

違うところは、DIVはブロック要素で、SPANはインライン要素であるということです。

ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素で、一般的なブラウザでは前後に改行が入って表示されます。

インライン要素とは主に文章の一部として利用される要素であり、その前後は改行されません。

psd拡張子

「.psd」はAdobe Systemsが開発したペイント系グラフィックスソフト
「Adobe Photoshop」で標準的な保存形式として用いられる拡張子のことです。

なお、この拡張子のファイルはWindows標準ではプレビューできない。
開くには、psdファイルを開くことができるソフトを別途インストールする
必要がある。フリーソフトでも数多く提供されていて、Susieなどが有名。
下記のサイトでダウンロードできます。

■Susieダウンロードページ
http://www.digitalpad.co.jp/~takechin/download.html

より以前の記事一覧