Web素材 一覧

画像を使わずHTML/CSSだけを使ってアイコンを表示する!Font Awesome がとても便利!

Webフォントの時代。通常は自分の持っているパソコンにインストールされているfontを使ってブラウザの文字は表示されています。そのため、パソコンが異なる環境だと表示するフォントが限られてきます。一般の方のパソコンに入っているフォントを使おうとなるわけです。

大きく違うのは、WindowsとMac。などの機械やOSの違い。またインストールされているソフトによってもフォントは入っている、入ってないが決まってきます。できれば、そういうことを気にせず、このフォントでホームページを表示したい!というのは節なる願いで、そこに最近登場している手法がWebフォント。フォントファイルを読み込ませてCSSで指定をすることによって表示させるといいものです。

Web フォントについては、こちらで詳しく解説中。

そのWebフォントにアイコンが存在します。そのフォントデータをサーバにアップ。もしくは呼び出しておいて、そのフォントデータをHTML内配置するというものです。文字の扱いと同じな為、CSSでfont-sizeを変更したり、color  配置などを扱うことができ、とても幅広く使われています。

今回はその中でもメジャーな Font Awesome をご紹介します。

Webアイコン Font Awesome を設定してみよう

 

スクリーンショット 2015-12-19 10.47.11

Font Awesome

605種類以上のアイコンを表示できます。アイコンは常時追加されているので、まだまだ増える可能性の高い Font Awesome。様々なサイトで見かけるアイコンは、多くのWebデザイナーが利用している証のようなものです。トップページにDownload ボタンからダウンロードすると一揃えセットで入っています。こちらをサーバにアップロードする方法もありますし、こちらのサイトでは、ナビゲーションにある Get Stated をクリックして、CSSファイルの読み込みを行うことができます。

スクリーンショット 2015-12-19 10.53.46

Get Statedページをクリックして、少しスクロールを下げたところに

スクリーンショット 2015-12-19 10.54.57

下記の部分を選択して、HTMLファイルに貼り付けるだけで準備は OKです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

WordPressなどで使う場合は、外観のCSS編集に

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";

とコピーペーストして使っていくこともできます。

アイコン例 使ってみよう!

  • fa-phone-square
  • fa-phone
  • fa-shopping-cart
  • fa-credit-card
  • fa-arrow-right
  • fa-arrow-circle-o-right
  • fa-envelope-o
  • fa-rss

などなど、小さな画像をイラストレーターで作ってスライスしてHTMLに<img>で貼り付けるという手間は全て吹っ飛んでしまいます。

Webアイコンを使いた場所のHTMLに下記のコードを貼り付けるだけ

<i class="fa fa-home"></i>

上記コードで、 を表示させることができます。

コードは、Font Awesome 内のiconsというページを開いて、一覧から、該当のアイコンをクリックするだけ

スクリーンショット 2015-12-19 13.01.38

例えば coffee と検索ボックスに入力すると

スクリーンショット 2015-12-19 13.03.22

アイコンが出てきますので、そのアイコンをクリックして

スクリーンショット 2015-12-19 13.04.27

<i class="fa fa-coffee"></i>

上記コードをコピーペーストです。大きさを変更したり、色を変えたりしたい場合は、 class 名の faとfa-coffee を使います。 fa の方は、全てのアイコンについているクラスなので、統一した内容を、fa-coffee は、このコーヒーアイコンのみについているclassなので、特別性をもたせた方が効率的です。

Classがよくわからないという方は直接、CSSにstyleを書いても大丈夫です(あまりオススメはしませんが)

<i class="fa fa-coffee" style="font-size:500%;color:red">Cofee Shop</i>

Coffee Shop

画像をスライスしたり、作成して呼び出す手間を考えると非常に便利なWebアイコン

Webサイトのデザインもより一層クールなものに変わりますので、ぜひお試しください。

 


Photoshop キラキラブラシ ブラシ1つでバナーや写真のクオリティーを大幅アップ!簡単設定動画とダウンロード先のご紹介です。

Photoshopにあるブラシの種類は無限大

Photoshopのツールの中にあるブラシ。種類と用途も非常に多いことから様々な写真加工に使われています。その中で、寒いこのシーズンにはぴったりのキラキラブラシをご紹介します。これを使えば商品や風景の写真に簡単にキラキラ感が演出できます。今回は非常に人気のキラキラブラシをセレクト。ダウンロードしてPhotoshopに読み込んで使ってみましょう。

ダウンロードした、もののキラキラブラシの使い方がわからない!という方は、下記のブラシ設定の動画をご参照下さい。

 

 

Photoshopブラシをダウンロードしてみよう!

Sparklies Photoshop Brushesby redheadstock

この手にキラキラブラシはとても便利。写真に嫌味のない輝きを出すには最適なブラシ。

スクリーンショット 2015-05-07 22.27.56

http://redheadstock.deviantart.com/art/Sparklies-Photoshop-Brushes-67557195

http://redheadstock.deviantart.com/art/Sparklies-Photoshop-Brushes-67557195

Starbrushes by TimelessArt

この手のStarbrushesは、ちょっとした輝きを出すのに便利なブラシ。

スクリーンショット 2015-05-07 22.32.10

http://redheadstock.deviantart.com/art/Sparklies-Photoshop-Brushes-67557195

http://redheadstock.deviantart.com/art/Sparklies-Photoshop-Brushes-67557195

Stars Brushes by GieGie

同じサイズのブラシというのは、便利なものです。500*500

スクリーンショット 2015-05-07 22.35.18

http://giegie.deviantart.com/art/Stars-Brushes-86137088

 

 

1000 Starsby alsnd12

1000個あります ブラシが!すごい。定番の丸にキラキラはお役立ちブラシ。

スクリーンショット 2015-05-07 22.36.56 

http://alsnd12.deviantart.com/art/1000-Stars-24842912

 

Sparkleby exotika-brushes

こういうのもあると役にたつ。ロゴが引き立ちますね。

スクリーンショット 2015-05-07 22.40.02

http://exotika-brushes.deviantart.com/art/Sparkle-13900386

 

Glitter + Sparkles Photoshop and GIMP Brushes

ちょっとかわいい仕上がりになるスターブラシ群 Photoshopをお持ちでない方のために無料の描画ツールGIMP用のブラシも公開されています。

スクリーンショット 2015-06-16 12.14.28

http://alsnd12.deviantart.com/art/Glitter-Sparkles-Photoshop-and-GIMP-Brushes-48646588

 

 

Glitter II Photoshop and GIMP Brushes

フェアリーぽい仕上がりに。こちらもGIMP用があります。

スクリーンショット 2015-06-16 12.16.57

http://alsnd12.deviantart.com/art/Glitter-II-Photoshop-and-GIMP-Brushes-106683022

 

Dangling Glows Photoshop and GIMP Brushes

流れるようなフレームに使えますね。

スクリーンショット 2015-06-16 12.19.02

http://alsnd12.deviantart.com/art/Dangling-Glows-Photoshop-and-GIMP-Brushes-61664675

 

いかがだったでしょうか?ブラシを使って様々なPhotoshopアートにチャレンジしてみて下さい!

 

 


シンプルなアイコンセット

とにかくアイコンはシンプルに限る。

300 simple line icons

なんといってもこのシンプル感 いいねやRSSはどこかに使いたくなるオーラが!かわいい!

スクリーンショット 2015-05-07 21.34.46

 

Gamecenter Icons Pack

なんともいえない こじんまり感じがいい ミニアイコンのセット。

スクリーンショット 2015-05-07 21.37.02

 

100 Simple Outline Icons

100あるアイコン どれもとてもおしゃれ。買い物かごシリーズはやクラウドアイコンはどこかで使えないかなー

スクリーンショット 2015-05-07 21.38.30

 

48 outline icons

このカチ!とした四角アイコンシリーズがいい。ナビやバナーに入れても幅と高さが同じになるのはありがたいな〜

スクリーンショット 2015-05-07 21.41.41

 

130 simple free icons

シンプルな130のアイコン でもこういうのが本当に使いやすい。

スクリーンショット 2015-05-07 21.44.20