新着記事『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
Sassを使って時間短縮！アイコンフォントを手軽に使える方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、ももこです。 先日発売されたGE2のプレイ時間を確保する為に、作業の時短は重要な任務です。 今回はSassでアイコンフォントを手軽に使える方法をご紹介します！ アイコンフォントを使ってみたいけど導入方法が難しそう…という方にオススメです。 アイコンフォントの用意をする まずはアイコンフォントを用意します。 過去記事にアイコンフォントの紹介がありますので、宜しければご参考ください。 「Retinaでもボケない「シンボルアイコン」を使いこなそう！」 「無料で出来る！オリジナルアイコンフォントを作ってみよう」 今回は「Fontello」から可愛いアイコンフォントをダウンロードしました。 cssフォルダと同階層に「fonts」フォルダを作り、その中にフォントデータを入れてください。 アイコンフォントの読み込み 早速Sassにフォントを読み込ませます。 LIGブログでたびたび登場する
ウェブでも紙でも商用利用無料！コリス限定のホビー系アイコン素材150種類を配布します！ -Celebrations Icon Set
海外のクリエイティブチーム「Freepik」とのコラボで、ビジターのみなさんに日頃の感謝を込めて、コリス限定のアイコン素材を配布します。 先日Twitter@colisscomでどんなアイコンが欲しいか希望を聞き、Freepikの中の人と相談し、アイコンを作成していただきました。 Freepik.comは、海外のウェブ制作系ブログSmashing MagazineやSix RevisionsやWeb Designer Depotでもお馴染みで、そのブログだけのオリジナルのアイコンセットを配布するコラボに当ブログも加わりました。 日本では初だそうです、やったね！ アイコンのテーマは「Celebrations」 ビジネス系のは他のサイトにたくさんあるので、ホビーやライフなどを主体としたアイコンを依頼しました。
UIデザインの参考に フラットデザインアイコンサンプルまとめ
最近、このブログのデザインを１から作りなおして、フラットデザインを取り入れて見ようかなと考えています。 フラットデザインはシンプルな分、ごまかしが効きません。使い所が難しいので何か見本やサンプルがあると助かりますよね。 勉強がてら、フラットデザインのサンプルとなるアイコンのリンクを集めてまとめてみました。 フラットデザインアイコンまとめ Free program icons on Behance Dribbble – Free Flat Icon Set by Barry Mccalvey 40 Social Media Flat Icons on Behance Weather app + psd on Behance My Desktop Icons – Free Download on Behance Dribbble – Freebie – Flat Credit Cards by
流行るかどうかは別としてロングシャドウデザインを考察してみたら意外と深かった – オレインブログ
フラットデザインが世間を賑わしてまだそれほど時は流れていませんが、海外ではフラットデザイン2.0という呼ばれ方もされることがあるようなロングシャドウデザインというものがどんなものなのか考察してみました。 そして、ロングシャドーデザインを作る方法を勝手ながら考えてみました。 ドロップシャドーデザインとは？ ロングシャドウデザインとは、言葉で説明するとこんなかんじになるのでしょうか。photoshopvipさんの言葉を引用すると、 斜め45度に差し込む光が作る、その名の通り、シャドウ部分を強調した、冬の日によく見受けられる様な、長い影が印象的なデザイン とこのような感じになりますかね。的確な表現かと思います。 ざっくりとどんなものかを検証してみました ハイライトの角度、シャドウの角度、ともに45°できれいに作ってあります。そして、配色ですが分かりやすいようにHSB方式で表記してあります。 ハイ
オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ
タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下はちょっと厳しいですが、最後に少し対応法を紹介します。 では、一番上のサンプルを解説します。 HTML まずはHTMLから。 Home Twitter Facebook RSS Setting a要素がアイコンで、span要素が吹き出しです。アイコンはWebフォントで表示します。 続いてCSSです。いつも通りまずは全部載せます。 @font-face { font-family: 'typicon
GoogleのアイコンなどのデザインガイドラインをGoogleのデザイナーが公開中
ChromeやGmailのアイコンはシンプルであり、一度使うと見るだけでそのアイコンが何を示すのかわかりやすくデザインされているのが特徴的です。そんな企業秘密とも言えそうなGoogleのアイコンやロゴのデザインガイドラインをGoogleのグラフィックデザイナーであるロジャー・オドン氏がBehanceで公開しています。 Google Visual Assets Guidelines - Part 1 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 Google Visual Assets Guidelines - Part 2 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidel
アイコンデザインの参考に。GoogleのUIパーツ・ガイドライン資料 | ビジュアルシンキング
Behanceに「Google Visual Assets Guidelines」の紹介がありました。 これは、Googleのプロダクト・アイコンや、サービス・ロゴ、UIパーツについて、形状や色のガイドラインを定めたものです。 アイコンのデザイン原理 丸や単純な矩形の組み合わせできています。 アイコンやピクトグラムをデザインする際はレゴで遊んでいたときのことを思い出すとよいです。 パーツの組み合わせのおかげで、アイコン間の統一感も生まれます。 image by Behance image by Behance image by Behance ほかにも3つルールをピックアップ。 3D禁止 image by Behance 影のルール 真っすぐか45度、ソリッドに。 image by Behance 色のコンビネーション・ルール image by Behance こうした資料は、アイコンやロ
無料ダウンロード可能なハイクオリティアイコン総まとめ2013年版
2013年として最近のフリーアイコンを探すと、どこもかしこも「フラットアイコン」ばかりでしたが、一つここで総まとめしておきたいと思います。 フラットアイコンも、よーくみるとそれぞれ若干の違いや特徴があるんだなと、並べてみるまであまりわかりませんでしたが・・。というわけでして、無料アイコンをお探しの方はチェックしてみてください。 フラット無料アイコン ソーシャルメディアフラットアイコン。 ソーシャルメディア、ブラウザ系の無料フラットアイコン フラットUIアイコン iPhoneアイコン用PSDファイル 各種ファイル用のフラットアイコン1 各種ファイル用アイコン2 フラットアイコン Vol.1 フラットアイコン Vol.2 フラットアイコン Vol.3 フラットアイコン Vol.4 サークルバッチ型の無料アイコン いろんな形のソーシャルメディア用フラットアイコン WebサイトUI無料アイコン 各
フラットが美しすぎるアイコン24個セット:phpspot開発日誌
Free PSD: 24 Flat Icons | Premium Pixels フラットが美しすぎるアイコン24個セット。PSD形式で配布されているそう。 iPhoneの時期OSがフラットになるとか、マイクロソフトやグーグルは既にフラットだとか、フラットの合理性に注目があつまっていたりしますが、フラットでもこれだけ美しくできるのだなと再確認させられるアイコンセット。 今後出てくるアイコンなんかもこうした美しいフラットアイコンだとWEBサイトやアプリも作りやすく、シンプルに美しくなるのかも。 関連エントリ シンプルで使えそうな５０のベクターアイコンセット アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル 地図と共に使えそうな２００のフリーベクターアイコン集 汎用で使えそうなフリーのアイコンフォント「Genericons」
明日友達に自慢できる！隠れUIデザインまとめ8つ | Goodpatch Blog
以前からネットでiOSのデフォルトミュージックアプリを傾けると音量調節スライダーの光のあたり方が変わるという記事をよく見ます。 （参考: 【豆知識】本体の傾きに合わせて音量スライダの光沢が変化する（iPhone/iPod touch/iPod nano）） そこで上記のような細部に凝ったUIはもっとあるんじゃないのかと思い探してみました！これらを知っているとUIの勉強にもなるし、友達にも自慢できるのではないでしょうか？笑 iOS 計算機 iOSにデフォルトで入っている計算機アプリ。iPhoneなどをロックを解除して横にすると足し算やかけ算以外の複雑な計算ができるボタンが出てきます。僕はπしかわかりませんでした。 Foursquare その1 有名なチェックインアプリFoursquare。写真付き投稿の写真を左にスワイプすると隠れキャラが登場します。実はこの隠れキャラ、Foursquareの
保存アイコンでみえてくるアイコンデザインの勘違い
先日 Goodpatch さんが 保存アイコン＝フロッピーディスクの時代は終わった…？ という興味深い記事が掲載されていました。フロッピーディスクを保存アイコンをとして採用するのは古いのではないか、という議論は国内外で何年かに一回はあります。私も 2009 年に変わりゆく「保存」の存在と題してフロッピーディスクアイコンのあり方も踏まえて、今後の保存の姿を模索していました。また、先月開催された Android Bazaar Conference 2013 Spring でも同じ話題に触れています。 アイコンと問題解決について 様々なデザイナーが新しい保存アイコンを提案しているものの、「うん、これは保存だ」と納得できたものはほとんどなかったと思います。ダウンロードにみえるものも少なくありませんし、中には抽象的すぎて何を意味しているのかさえ分からないのもあります。自分たちのクリエイティブアウトプ
Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方
TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。（現在のデザインになってからだいぶ経っており、今更な感じですが…）その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。 再現PSDデータをダウンロード ※アイコンは本物と異なっており、形の近いものを使っております。ご了承ください。 1. Twitter ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。 アイコンと文字（現在地表示） アイコンと文字（通常表示） ボタン これらを再現してみると、以下のようになります。 偽Twitterみたいな感じですねｗ それぞれにつけた効果の詳細は実際のファイルでご確認ください。 2. Facebook（アプリ） ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出
メタファーがUXを向上させる5つの理由 | Goodpatch Blog
メタファー、日常生活であまり使うことのない言葉ですが、実はWebを通して私たちは日常的に触れています。 そもそものメタファーの意味はwikipediaに下記のように説明がありました。 メタファーは、言語においては、物事のある側面をより具体的なイメージを喚起する言葉で置き換え簡潔に表現する機能をもつ。わざわざ比喩であることを示す語や形式を用いている直喩よりも洗練されたものと見なされている。 参考: wikipedia Webにおけるメタファーで代表的、かつ議論があるものと言えば、保存を示す「フロッピーディスク」のアイコンでしょうか。 フロッピーディスクは昔、（今ではあり得ない量ですが）データを保存するものでした。そのなごりで私たちはフロッピーディスクのアイコンを見ると「保存するアイコン」と認識するようです。 この他にもWebにおけるメタファーの例はたくさんありますが、 今回は「メタファーがU
全120種類、シンプルながら細部までしっかり作りこまれた商用利用無料のアイコン素材 -Application Icon Set
アイコン全120種 ダウンロードできるファイルのフォーマットは下記の通りです。 PSD: 制作用のベクターシェイプ3サイズ PNG: すぐに使う用3サイズ CSH: Photoshop用のカスタムシェイプ アイコンのライセンスはCC 3.0で、個人でも商用でも無料で利用できます。 詳しくはダウンロードファイルの「LICENSE.txt」をご覧ください。
無料でハイクオリティなアイコンやデザインの素材が手に入るサイト「IconDeposit」 | ライフハッカー・ジャパン
モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】
商用利用も無料！手書き風アイコン122種類！
今日は私が集めているアイコンのいくつかを紹介させていただきます。今回は商用利用も無料(商用フリー)でOK！という気前のいい手書き風のアイコンをまとめました。ここで紹介するアイコンは全てリンクも不要で使えますが、ダウンロードして使うときは念のためライセンスの確認をしてくださいね！ ではどうぞ。 19 Freehand drawn sketch icons ダウンロード先:Visit site 実際に手書きで作成したものをスキャンしてイラレでクリーンアップしたものです。 HAND DRAWING ICONS SET ダウンロード先:Visit site まさに手書き中の手書きといったアイコンです。 Handycons 2 ダウンロード先:Visit site メディア関連の手書き風アイコンです。油絵っぽい感じが実にクールですね。 FreeHand ColorStroked icon pac ダ
Photoshop VIP ☞ ボタンデザイン完全版、ダウンロードしておきたいPhotoshop無料PSD素材60個まとめ
Webデザインにおいてよく利用するデザインパーツのひとつ「ボタン」デザイン。 海外デザインブログWeb and Designersで、これまでに紹介したことのないPhotoshop用無料PSDボタン素材を60個まとめたエントリー「60 Outstanding Free PSD Buttons」が公開されていたので、今回はご紹介します。 多くの素材に色違いや大きさによって複数のボタン素材が収録されているので、ダウンロードしておくと便利かもしれません。 どれもPhotoshop用PSD素材を収録しているので、自由にボタンサイズ、テキストなどの変更も行うことができ便利ですよ。 詳細は以下から。 ダウンロードしておきたいPhotoshop用PSDボタン素材まとめ Follow Buttons 3色の異なる色でデザインされたボタンデザインセット、それぞれ通常時、ホバー時、アクティブ時の3種類ずつ用意
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
[CSS]金属の質感が美しすぎる、スタイルシートで実装されたボタン