読者です 読者をやめる 読者になる 読者になる

Weed.nagoya:便利ツールでネット活用

物理教育アプリを開発しています

Photoshop不要・Webサービスでロングシャドウ・アイコン作成

開発-Web:JavaScript:開発支援 開発-Web:JavaScript:開発支援:jQuery 開発-Web:Webサービス:ツール 開発-Web:Webサービス:ツール:GitHub 開発

f:id:weed_7777:20160601151029p:plain

フラットデザインで用いられるロングシャドウ・アイコンは、Photoshopプラグインで作るのが一般的だが、実は同様のアイコンを生成するWebサービスがある。コードを少し修正すればテキストバナーも作ることができる。

2016年6月3日、追記しました。

はじめに

「ロングシャドウ」とは、上の画像のような長い影を持ったスタイルのことです。フラットデザインで使われることが多いです。

以下のWebサービスを使います:

flattyshadow.com

このサービスは、そのままでは単体のロングシャドウ・アイコンしか作ることができません。JavaScriptのコードもダウンロードできるのですが、そのままでは動きません。この記事では、以下の2つの方法を説明します。

  1. JavaScriptのコードを動くようにする
  2. アイコン入りのオリジナル・テキストバナーを作る

普通のアイコン

以下のようなアイコンを作ろう:

f:id:weed_7777:20160601150335p:plain

  1. 以下のページのダッシュボードへ行く
  2. アイコンを作る(色と形と影とアイコンを選ぶだけです)
  3. ダウンロードする(「Download」ボタンを押すだけです)
  4. 【必要】demo.htmlを修正する

最後だけ説明します:

以下のように修正します:

赤い行を修正します:

f:id:weed_7777:20160601152627p:plain

緑の行になるようにします:

f:id:weed_7777:20160601152701p:plain

まとめるとこう:

f:id:weed_7777:20160601152718p:plain

できあがりはこう:

<head>  
   <!-- CSS Stylesheet-->
   <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">   
   <link rel="stylesheet" type="text/css" href="flattyshadow.css">

   <!-- Javascript -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
   <script type="text/javascript" src="flattyshadow.js"></script>
</head>

変化がわかるページ(GitHub)を作りました:

github.com

これで、ロングシャドウ・アイコンが表示されます。一度慣れればラクですね。

アイコンを含むテキスト

以下のような画像をつくります:

f:id:weed_7777:20160602084933p:plain

まず、アイコンをインライン要素にするためにcssを編集します:

f:id:weed_7777:20160602085556p:plain

demo.htmlを編集します:

<i class="fa fa-hand-o-up"></i>

これを:

<strong>Feel</strong><i class="fa fa-hand-o-up"></i><strong>Physics</strong>

こうして、ここを:

<div ... data-depth="60"  data-bg-size="130" ... >

こうします:

<div ... data-depth="25"  data-bg-size="1500" ... >

完成コードを以下のページに置いておきます:

github.com

これで、表示されたページをキャプチャすればOKです:

f:id:weed_7777:20160602084933p:plain

まとめ

フラットデザインで用いられるロングシャドウ・アイコンをWebサービスで生成しました。コードを少し修正して、テキストバナーも作ることができました。

この記事は参考になりましたでしょうか?もしそうでしたら、以下の投稿に「いいね」して下さい。コメントをリプライしていただいてもOKです。今後の記事を書く参考にさせていただきます。よろしくお願いします😌

お疲れさまでした!

2016年6月3日の追記

最新の情報を教えてもらいました。

以下の記事は2013年のものです。あんまり最新というわけでもなさそうです😅

coliss.com

ちなみに2016年はこのような感じだそうです。目まぐるしいですね。

coliss.com

ちなみに教えていただいたのは、この方でした。ありがとうございました!

https://hibara.org/