imu16のブックマーク / 2012年2月21日

[デザイン]グラフィックパターンや柄、テキスタイル等の名前まとめ

名前って大事パターンファイルってwebで沢山いいのを見かけますよね。商用可のものも割と多いのでお世話になってる人も多いと思います。webcre8は形にこだわるので整理するときちゃんとしたファイル名をつけて保存したかったりするんですが、これって単にストライプでいいのかな…？ポルカドットってつまり、どこからどこまでがポルカドットなんだ…？プレイドとチェックって何が違うの…？ということを考えだすともう止まれないんですよねｗというわけで今回はデザインの柄や模様の例、ネクタイやシャツのサイトの用語集やファブリックの柄やテキスタイル、果ては迷彩のパターンの例等、およそパターンファイルで使われそうな模様の写真やデザイン例、名称や由来を集めたページをまとめてみました。各サイトの画像はスクショだったりわかりやすいところを切り抜いたりです★ ファッション、用語全般アパレル、ファッション全般の用語

imu16 2012/02/21

リンク

Dearps

Webサイト&アプリのデザインをもっと効率的に、さらにスピーディーに。本日Bootcomp4を公開しました。ダウンロードは「Bootcomp」の特設サイトから。 Webサイトやアプリを制作する際にデザインとコーディングを分業化している会社さんは多いと思います。その場合よく課題にあがるのがデザイナーとエンジニア間の連携について。デザインカンプとコーディングされた仕上がりの差を極力なくすためにデザイナー側でマージン、フォント、カラーなどを細かく指定したコーディングガイド(以下ガイド)を作成するのですが、これがけっこう面倒な作業で時間もかかります。これデザイナーにとって過去のスライス作業並みにモチベーションが下がります↓↓↓ この面倒なガイド作成を猛烈楽にするサービス「Zeplin」を紹介します。 Photoshopからプラグインを使用してZeplinにデザインデータをアップすることに

imu16 2012/02/21

リンク

Dearps ～Adobe Photoshopに関するTipsや便利な裏技を紹介するサイトです～ » Photoshopで超絶簡単に点線・破線をかく

線分、間隔等を細かく指定して点線・破線をかく WEBデザインのアクセントとして欠かせない“点線・破線”がとっても簡単に作成できる秘法をAdobeが開催している“Photoshopの秘法発掘キャンペーン”に応募したところノミネートされました！是非以下Adobeのサイトよりダウンロードしていただき気に入ってもらえたら投票してくれたらうれしいです！ Photoshopの秘法発掘キャンペーン http://www.adobe.com/jp/joc/photoshop/photoshop/hihou/03/04.html Tweet

imu16 2012/02/21

photoshop

リンク

FireworksのスライスレイヤーをPhotoshopで実現【決定版】

Dearpsでは今までにPhotoshopでのスライスを楽にする裏テクニックを数々公開してきました。【WEBデザ向け】スライスチップ作成パネルver2-CS4.CS5用スライスチップ作成パネル-CS4用【裏技】「ちょっと変わったスライス作成テクニック」スライス作成テクニック今回はこれらの決定版ともいえるスクリプトを作成する事が出来たので公開します。【今回公開するスクリプトの特徴】・選択範囲をスライスに変換する。・スライスをFireworksのようにレイヤーで管理できる。・スライスはWEBレイヤーフォルダに自動格納される。・画像名称をスライス作成時入力できてレイヤー名にも反映される。他にもメリットたくさん！まずはだまされたと思って使ってみて下さい=3 利用方法はこんな感じ。【1】ファイルメニューから［スクリプト］＞［参照］を選択し、ダウンロードしたスクリプトファイル”

imu16 2012/02/21

photoshop

リンク

どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509

jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。サンプル1: エラーを右上に表示サンプル2: エラーを下に表示トピックスダウンロード使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4

imu16 2012/02/21

リンク

CSS3 の border-radius を使って円形のサムネイルを作る方法２つ

今回の記事では、CSS3の border-radius を使った円形いサムネイルの作り方を２種類紹介します。まず簡単な方から説明しますが、サムネイル画像が正方形の場合であれば、画像のスタイル border-radius に大きめの値を指定するだけで、丸いサムネイルを作れますね。 <img src="thumb.png" width="150" height="150" style="border-radius:400px;" > サムネイルが長方形の場合写真が正方形の場合でも、きれいな円にしたい場合は、サムネイルを背景画像（background-image）にすることで実現できます。イメージは↓のような感じです。 HTMLソースサムネイルの幅に合わせたボックスに、サムネイル画像を背景画像として設定し、border-radius で背景画像をクリップします。クリックできるようにする場合

imu16 2012/02/21

css3

リンク

CSS3で半透明のリングが波紋のように広がるボタンのエフェクトを作る方法

またまた CSS3 の小ネタです。これがやりたくて、ひそかに研究していました。とりあえずデモです。↓のボタンにマウスを乗せてみてください。 ※ 最新の Firefox か webkit で見てください。作り方まず、CSS3で円をどうやって作るんだ？と思った方は、昨日の記事 CSS3 の border-radius を使って円形のサムネイルを作る方法２つを読んでみてください。 HTML Aタグでマークアップしています。アニメーションするリングの部分は、SPAN.ring が担当します。 <a class="button" href="#"> <span class="ring"></span> </a> アニメーションするリングの部分は、SPAN.ring をキーフレームアニメーションで動かします。 ※ わかりやすくするために、ベンダープレフィックスは付けていません。実際のものが欲

imu16 2012/02/21

css3

リンク

CSS3でPhotoshopで作ったようなキレイなガラス風ボタンを作るチュートリアル

CSS3 の新しいプロパティーを総動員したら、Photoshopとかで作ったきれいなアクア風（ガラス風）ボタンにどこまで近づけるか？というのを実際にやってみました。チュートリアル風に、ステップごとに分けて説明していますので、CSS3を使ったリアルな表現のためのテクニックとして、ポイントだけでも覚えておくと、いろんなところで応用できると思います！こんな感じになりました何はともあれ↓が出来上がったものです。今はやりの CSS3ジェネレータには負けてないと自負しています... さて、これを作る手順です。 ※Chromeで表示して画像にしています。実際のものはこちらから見れます。作成ステップステップ1 : ベースとなるHTMLを用意まずは、こんなHTMLを用意しました。このHTMLをベースに、CSS3を総動員していきます。A タグの中に SPAN が入っていますが、こいつらには後

imu16 2012/02/21

css3

リンク

提案や設計資料に使える！かわいめアイコン素材を60種類作ってみました（ビジネス編）

提案資料や設計資料をアイコンや図入りでわかりやすくしたいけれど、寄せ集めたアイコンは図柄がばらばら…足りないものがある･･･など思ったことはありませんか？そんなご要望に答えて、資料に使えそうなアイコンセットをぷちぷち自作してみました。今回は需要の多いビジネス系アイコン60種類(png形式)です。顔あり顔なしバージョンがありますので用途に合わせて。 ↓アイコン見本↓ ↓使用例↓ 個人使用も商用もフリーですので、気に入ったら提案書や設計書で、デザインのポイントとして、是非使って下さい。(二次配布はご遠慮願います) もし好評でしたら、次回作も？こんなん欲しいなーというご要望も、コメント欄・ブコメ・Twitter などでお待ちしています！ダウンロードはこちらから Tweet hinata Webデザイナーをやっているイラスト描き屋さん。記事を書きながらデザイン勉強していきます！が、

imu16 2012/02/21

アイコン

リンク

LeaveBehind � Proce55ing

そりゃflight404さんには対抗できませんわな。オブジェクト指向ってなんじゃそれってぐらい描きなぐられたスケッチです。最初は気にしながら作ってたのですが。僕がさんざん遊んだあとなのでなんのこっちゃ分からないと思いますがいちおうProse55ingソース→particleworldsprite.zip 実行にはサウンド用のライブラリEssが必要です。Three-Axis»krister»Ess PCで鳴らしている音ではなく。ライン入力された音を拾います。入力された音をスピーカーに出力する方法が分かりません。MacであればXCodeについてくるAU Labで入力を出力へスルーすることができます。ボーカル入りの曲よりもインスト、アンビエント系の曲で調整してます。