絵心が無い人が簡単なグラフィック素材を作るのに役立つ記事8選
連載第1回の「初心者でもPhotoshopの基本的な使い方が分かる入門記事9選」、連載第2回の「HTML・CSS・WordPress初心者のためのDreamweaverの基本的な使い方が分かる記事10選」でWebサイトを作れるようになり、さらに前回の「HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選」でWebサイトにさまざまな動きを加えられるようにもなった。しかし、Web制作現場では、まだまだ必要とされることは多い。 例えば、Web制作を生業としていると、個々のパーツ／グラフィック素材をデザインする機会に遭遇することがよくある。絵心があるとか無いとかは別として、ワークフローに組み込まれている以上、ボタンを作るとか、背景のテクスチャを作るとか、できないと作業が前に進んでくれないことだってあるのだ。 そこで、今回はWeb制作で必要となるパーツ／グラフィック素材を簡単に作
黄金律を使ってデザイン性の高いウェブサイトを作る方法
by arnoKath 美しいウェブサイトを作ることは単純にユーザーの気分をよくするだけではなく、パフォーマンスを上げると言われています。ウェブサイトのデザイン性を上げるには使用するフォントも大切ですが、フォントの大きさも重要な要素。そこで、黄金律を使ってフォントサイズを決めることの重要さや方法をAdditive AnalyticsのCEOであるLaura Diane Hamiltonさんがまとめています。 The Golden Ratio and Typography - Laura Diane Hamilton http://www.lauradhamilton.com/the-golden-ratio-and-typography ウェブサイトに情報を記載する上で、フォントのサイズに階層を設けるとユーザーを情報へ正しく導くことが可能であるため、ウェブサイト上のフォントサイズは複数のも
CSS3も少し入れつつ自分流CSSプロパティの書き順を決めてみた
どの段階にあるかはCSS current work & how to participateで確認できます。 また、list-style、backgroundなどのように略せるものは略して書くようにしていますが、略さない場合も下に載せています。略し方については「まとめて書くことができるCSSプロパティの8つのパターン｜Webpark」をご参考に。 若干それましたが、試行錯誤して並べた結果がこちらです。普段よく使うプロパティのみ載せています。 表示に関するプロパティ まずは表示に関する内容です。見える見えないは一番大切なことということでしょうか。 display list-style list-style-type list-style-image list-style-position overflow clip visibility opacity 配置に関するプロパティ 次はどこに配置
配色に悩んだときに、きっと役立つ7つの配色技法【基本】
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
[CSS]画像を使用せずに、背景をストライプやチェック柄にするスタイルシート | コリス
Checkerboard, striped & other background patterns with CSS3 gradients [ad#ad-2] 対応ブラウザはFirefox 3.6+, Chrome, Safariです。 デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。 デモページ [ad#ad-2] スタイルシートは下記のようになります。 CSS：ストライプ 全てのベースとなる指定です。 L.8-10で、ストライプのサイズを指定します。 .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-siz
面倒なCSS3グラデーションのスタイルシートをグラデーションの画像から簡単に生成するツール -GradienFinder
Photoshopなどの使い慣れたソフトウェアで作成したグラデーション画像から、CSS3グラデーションのスタイルシートを生成するオンラインツールを紹介します。 GradienFinder ドロップすると、すぐにグラデーション画像が反映され、スタイルシートが生成されます。 CSS: 生成されたスタイルシート background: -webkit-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%); background: -o-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,r
モックアップ作成AIRアプリ『MockFlow』 – creamu
モックアップを作成したい。 そんなときに使えそうなのが、『MockFlow』。モックアップ作成AIRアプリです。 元々Webサービスでモックアップ / ワイヤーフレームを作成・共有できたMockFlowですが、そのAIRアプリが出たようですね。Web版と連携しているようです。 UIが洗練されていて、使っていて気持ちいいですね。コンポーネントも充実していて、imageやBanner、Button、Pagination、Textなど、ドラッグして配置することでモックアップを作成できます。 AIRアプリのUI。なかなかいい感じ。 ドラッグしたコンポーネントをダブルクリックすると、値や色を変更できたり、deleteキーで削除できたりと使いやすいですね。 ただ日本語が使用できないのが難点。アルファベットしか打てないようになっています。 一度見てみてください。 MockFlow 斉藤和義の武道館ライブ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Basic Design Note
IDEA * IDEA
https://jp.techcrunch.com/2010/04/07/20100406cacoo-lets-multiple-users-create-designs-collaboratively-and-in-real-time/
IDEA * IDEA
IDEA * IDEA