目指せ!万能クリエーター!!デザイン・コーディングプログラミングまで幅広く書いています。

準備中

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

IE8より前のブラウザでレスポンシブらせる時のメモ

このエントリーをはてなブックマークに追加

こんにちは!銀ねこです。

最近は今更レスポンシブデザインを勉強会してます。笑
HTML5やCSS3とは無縁の今更なテーブルレイアウト大好きなWebショップに務めてて、最近自社サイトをせっかくレスポンシブに作り直してもらったにもかかわらず、バナー差し替えの時にフルードならないように設定したせいで、レイアウトがおかしくなっていることを発見。 これじゃいかんっということで本腰を入れて取り組もうと思います。

スポンサーサイト

続きを読む>>

  1. 2014/02/16(日) 12:17:47|
  2. デザイン
  3. | トラックバック:0
  4. | コメント:0

字詰めについてカンタンにまとめてみました*デザイン*

このエントリーをはてなブックマークに追加
私、普段ショップに商品ページを作ってるのですが、今更ですが思うとこあってメモ!

“ Webは字詰めが甘い”

はい、ゴメンナサイ。
Webと言っても、ピンキリ。いろいろあります。楽天やYahooのモールのランディングページも含みます。もちろん、素敵なページはたくさんあります!

続きを読む>>

  1. 2013/08/03(土) 12:33:41|
  2. デザイン
  3. | トラックバック:0
  4. | コメント:0

古びたプリント風*イラレ&フォトショ*

このエントリーをはてなブックマークに追加
現場であまり使うことがなさそうだけど、古びた??プリント風の素材を作ってみましたので、そのレシピのメモ。

あらかじめ、ベースとなるキャンバスっぽい素材を用意しておきます。(後日書きます!)
素材はレイヤーを複製しておきます。後で使うのでとりあえずかくしておいてもオッケーです。
イラレで適当なマークを作ります。全てアウトラインをかけてコピー(ctrl+C)フォトショップのキャンバスの上にシェイプレイヤーとしてペーストします。



シェイプレイヤーを「フィルター」→「ぼかし」→「ガウス」で2~5px程度にぼかします。
新しいレイヤーを直下に作り、白く塗りつぶし結合します。
「イメージ」→「色調補正」→「2階調」を選びフチがちょうど良い感じになるよう調整します。



「フィルター」→「イメージ」→「ブラシストローク」→「はね」でフチを荒くしておきます。これも様子を見ながら調整しましょう。



これでベースができました。
「選択範囲」→「色域指定」でマークの黒い部分を選びます。もうこのレイヤーは不要です。
キャンバスレイヤーの上側の目隠しを外し、レイヤーマスクの追加をクリック。キャンバスが選択範囲と同じ形にくり貫かれます。 「イメージ」→「色調補正」から「明るさ・コントラスト」で明るさを低めに調整。同じく「色調補正」より「特定色域の選択」から中間色、白色系あたりを中心に調整します。今回はえんじ色っぽく調整しました。



バランスを見ながら「指先ツール」を使って部分的ににじませます。



今回は「描画モード」を「ハードライト」にしてみました。
「描画モード」を変えてお好みの感じにしてみるともっと変わった雰囲気になります。
  1. 2012/11/24(土) 18:46:55|
  2. デザイン
  3. | トラックバック:0
  4. | コメント:0

インフォグラフィックとピクトグラム

このエントリーをはてなブックマークに追加
どうしてもブログにまとめたかったテーマの一つが
インフォグラフィックって何ぞや????
ウィキペディアによると、情報、データ、知識を視覚的に表現したものであるとのこと。
ウィキペディア→インフォグラフィック

プラモデルの組立説明書がすべて文字だったら…?組み立てる自信はないです…。
要はイラストや図形を使ってよりわかりやすく説明したものってことですね。

地下鉄の地図・棒グラフなど結構世の中にあふれていますね。

こんなインフォグラフィックにあふれたサイトも見つけました!
インフォグラ・ミー

そして、ピクトグラム。ピクトグラムとは「絵文字」「絵単語」などと呼ばれ、何らかの情報や注意を示すために表示される視覚記号(サイン)の一つである。地と図に明度差のある2色を用いて、表したい概念を単純な図として表現する技法が用いられるとウィキペディアにあります。
ウィキペディア→ピクトグラム

スカート姿のマークの付いたトイレには男性は入りませんよね。
単純で無駄のないピクトグラムの情報を伝える力はすごいと思います。

メラビアンの法則にによると人の印象は見た目が約9割、話は1割しか聞いてもらえていない。

デザインは情報を伝える立派な手段ですね。
  1. 2012/09/16(日) 10:39:41|
  2. デザイン
  3. | トラックバック:0
  4. | コメント:0

カラーの法則.3~困ったときのスーツ!~

このエントリーをはてなブックマークに追加
困ったときの同系色・セパレーションまではご紹介いたしました。

今回は配色の面積について。
配色・色の面積比は一般的なスーツスタイルと同じようにするとバランスよく仕上がりますよ。


1、ベースカラー→ジャケット…約75%
  中心となる色調。全体のイメージにも影響があります。イラストのジャケットの色は日本人の大好きな紺色。
  まじめで誠実なイメージを与えます。余談ですが就活にお勧めの色です。

2、サブカラー→シャツ…約20%
  ベースカラーを引き立てたり、アクセントカラーとベースカラーの仲を取り持ちます。
  イラストのシャツは白なのでセパレーション効果で配色を調和させています。
  ちなみにサブカラーは複数あってもOK。

3、アクセントカラー→ネクタイ…約5%
  イメージにアクセントをつけたり、変化を持たせます。大抵ベースカラーと差のある色を使います。
  イラストのネクタイはジャケットとは反対色の赤です。
  赤は情熱や力強い決断力をイメージさせます。アメリカ大統領がここ一番の演説でつけているネクタイの色。
  1. 2012/03/10(土) 12:32:10|
  2. デザイン
  3. | トラックバック:0
  4. | コメント:0
次のページ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。