HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた | DevelopersIO
トレンディ且つナウい Web ページを構築するための CSS フレームワーク（※枠組み）です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という２つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。 Twitter Bootstrap うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0
プログラマー的デザイン勉強法：UX ～ユーザーエクスペリエンス～：オルタナティブ・ブログ
プログラム言語であればどの言語でも習得出来、どんなOSでも使いこなし、データベースだって勉強すればマニアックに最適化出来るプログラマーですがいざデザインとなると「いやぁセンスないから」って感じだと思います。 プログラムは感性で書く物では無いので（私は感性で書いてますがw）いざ右脳を利用する作業になると途端に受け付けなくなってしまいます。 ですがサイト全体ではなくとも、一部にキラリと光るデザインがあるとお客さんに喜ばれる物です。少し位のバグも許してくれるでしょう（もちろん自己責任でお願いします。） デザインの主にわけて、構成、色使い、動きに分けられると思いますが、それぞれどのようにしてテクを研くか私の方法を書いてみます。 1.構成 デザインが良いとされているサイトをとにかく沢山見る。沢山見ることによって目が越えてくるのでアイデアも思い浮かびやすくなります。自分の気に入ったデザインを見つけたら
FWD勉強会vol.1資料公開
2007年10月27日に開催された「PHP in Fukuoka ＆ 福岡Webデザイナーズ合同勉強会」で使用した資料を公開します。 FWD勉強会vol.1資料公開［PDF:1.4MB］ 当日伝えきれなかったことや、良い忘れていたこと、準備不足だった部分を補う意味で、付録を追加してから公開しようと思っていましたが、時間がかかりそうだったので、後日余裕ができてから公開したいと思います。 今回は「いろのはなし」というタイトルで、色彩調和をテーマに話をさせていただきました。学生の頃に色についての授業を受けているはずですが、あまり勉強をしていなかったので詳しいわけではなく、少し知っている程度でした。そこでいろんな本を読んだりしながら勉強をし直すことになりました。 色の話はとても範囲が広く、調べていくうちに全体をカバーすることなど到底無理であることが判ってたので、要望のあった「色彩調和」に絞ることに
いいデザイナーになるために参考になる50サイト – creamu
dzineblogで、いいデザイナーになるために参考になるサイトがたくさん紹介されています。 ざっといくつかご紹介。 チュートリアル » Tutorial9 » Photoshop Lady » HV Designs » Tutorial Dog デザインフォーラム » Designers Talk » Graphic design forum コミュニティー » Humble Voice » Deviant Art » Carbonmade デザインブログ » Design Melt Down » A list Apart » Design Mag 有名なものからちょっとマイナーなものまで、よくまとまっていますね。 ぜひ見てみてください。 » 50 Sites That Will Help You To Become a Better Designer MacBookのスピーカーの音がよ
プログレスバー 無料サービス「Preloaders.net」 - GIGAZINE
AJAXなどを使ってデータをバックグラウンドで読み込んでいる間、ユーザーが待っている時間のストレスをできるだけ少なくするためにできたのがこのプリローダーというもの。Flashなどではおなじみのアレです。このプリローダーを無料かつ簡単に作成できるオンラインサービス、それが「Preloaders.net」です。形・色・サイズ・アニメーションする速度を選べば即座に完成するというお手軽さ。だからといってできあがるアニメーションはしょぼくないというのがポイントです。 実際のサンプルや作り方などは以下から。 Preloaders.net | Free AJAX animated loading gif's | 3 dimensional (3D) http://www.preloaders.net/ 種類は「3次元（3 dimensional）」「四角形（Rectangular）」「円（Circula
12 Standard Screen Patterns
2010 Update- 15 patterns and 80 new examples By Theresa Neil As Bill mentioned in an earlier post, we don’t want to limit this blog to just the principles and patterns found in the book. For that you can check out our Explore the Book section. In the spirit of that, I want to share an additional set of principles and patterns I have been using for RIA design. While the book takes a much more consu
デザイナーが知っておくべき背景画像のリソースサイト集:phpspot開発日誌
36 Must Have Backgrounds and Patterns Resources for all Designers : Speckyboy - Web Design, Web Development and Graphic Design Resources デザイナーが知っておくべき背景画像のリソースサイト集。 背景画像のダウンロードやWEB上で動作するジェネレーターがまとまっていました。 背景画像リソース集 Huge Magazine - Desktop Patterns and Tiles 綺麗orおしゃれな背景画像パターン多数 Barracuda Backgrounds 地味だけど汎用に使えそうな背景画像 HYBRID GENESIS カラフルだけどこちらも汎用性がありそうな背景集 DinPattern ちょっと個性的なパターン集 ジェネレーター Tiled Back
【ハウツー】ゼロからはじめるPaint.NET - 無料の強力グラフィックソフトで画像編集 (1) Paint.NETの概要とインストール | パソコン | マイコミジャーナル
どんなソフト？ 手軽に画像編集を楽しみたい、でもWindows付属の「ペイント」では物足りない。こんなユーザーにおすすめしたいのが「Paint.NET」です。無料のソフトでありながら、レイヤーやヒストグラム補正、プラグインによる機能拡張、無制限アンドゥ機能を備え、市販ソフト並みの多機能さが特徴。それでいて動作が軽快で、起動も早く、使いやすいソフトです。対応する保存形式は、Paint.NET(.pdn), BMP, JPEG, GIF, PNG, TIFF, TGA, DDS。Microsoftのサポートを受け、ワシントン州立大学で開発されたソフトですが、日本語にも対応しており、メニューやダイアログも日本語で表記されます。 なお、解説にはバージョン3.31を使用しています。対応OSは、Windows XP(SP2) / Vista、Windows Server 2003(SP1)、.NET
ＷＥＢ用の背景・ボタン・ロゴ・ヘッダー・テクスチャ・ナビゲーションボタン・ドット絵・写真素材加工等のテクニック（MdNのような…）がたくさん載っているサ…
ＷＥＢ用の背景・ボタン・ロゴ・ヘッダー・テクスチャ・ナビゲーションボタン・ドット絵・写真素材加工等のテクニック（MdNのような…）がたくさん載っているサイトを紹介して下さい。 書籍でも構いませんが、商用前提です（お絵かき系は避けてください）。 DTP系のサイト・書籍、英語サイトでもOKです。 素材屋さんでもTIPSが役に立ちそうだったり、参考になりそうな素材屋さんでもOK。 フリーのプラグイン・テクスチャやオススメのエクステンションの紹介 （できれば製作者様のサイトや使用例・チュートリアルがあると嬉しいです。） WEB用の綺麗な素材処理方法が載っているサイトは特に歓迎です。 使用ツールは下記の3点です。 ・フォトショップ（5.5） ・イラストレーター（9） ・FIREWORKS（2004MX） 重複はしないようお願いいたします。 できる限り長期間募集いたします。
凄くクールな名刺を作成するPhotoShopチュートリアル:phpspot開発日誌
Luxa - Photoshop Tutorials, Videos, Brushes, Tips & Tricks There are many different ways to attack a business card design. 凄くクールな名刺を作成するPhotoShopチュートリアル 次のようなカッコいいデザインの名刺をPhotoShopで作っていきます。 こんな名刺を渡されたら、つい取っておきたくなる、あるいは自慢したくなるかもしれません。 名刺をデザインするような際には是非覚えておきたいチュートリアルですね。 関連エントリ WindowsVista風のガラス風ボタンを作成するPhotoShopチュートリアル テキストに迫力ある隕石風エフェクトをかけるPhotoShopチュートリアル Photoshopで幻想的なファイナルファンタジー風のロゴ作成チュートリアル
PictBear SE で Cool な Sleipnir ユーザーバナーを作ってみよう！
こんにちは、フェンリル デザイナーのヒロユキです。 Sleipnir ユーザーバナーページにはユーザーの皆様から提供された素敵なバナーが掲載されています。「作ってみたい！」とは思っても Photoshop などの画像編集ソフトは高価だし、難しそうだなと思っている方も多いと思います。 今回はそんな方の為に、無料の画像編集ソフト PictBear SE で簡単に Cool な Sleipnir ユーザーバナーを作る手順を書いてみました。 必要なものは ・PictBear SE Latest Version ・Filter – 拡張フィルタ だけです。 ではまず準備からはじめてみましょう！ 【準 備】 1.PictBear SE Latest Version をインストールします。 Yasuyuki Lab.（http://www.fenrir.co.jp/labs/yasuyuki/）から P
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp： 実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~: 市瀬 裕哉, 福島 英児, 望月 真琴: 本
kuler
背景画像をつくるのに便利なサイト12選 | IDEA*IDEA
bne.jp
2007年度web制作者の為のまとめ再構築30選*ホームページを作る人のネタ帳
ロゴのテンプレート配布サイト -Logo Temlater
今度こそフリーの画像編集ソフト『GIMP』をマスターしようという人の為のまとめ*ホームページを作る人のネタ帳
貧乏ウェブデザイナーの無料写真素材サイト : HotWeb Magazine
WEBデザインセンス向上まとめ。カラー統一サイト30×5・計150サイト＋2200以上の無料HTMLテンプレ*ホームページを作る人のネタ帳
