![PNGとGIFとJPEG…Web用画像の書き出し、どんな風に使い分けていますか?[2011年7月現在] – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-](https://cdn-ak-scissors.b.st-hatena.com/image/square/f1141343b5c8ebb3b8e47c0ab86152bbb7d359d1/height=288;version=1;width=512/http%3A%2F%2Fblog.v-colors.com%2Fwp-content%2Fuploads%2F0012.png)
☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。???(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ
投稿日:2010年12月21日 レベル:− ソフトウェア:− このチュートリアルでは、正しい色づかいの良いウェブサイトを作成する方法をご紹介します ウェブサイトをデザインするには、基本となる型やレイアウト、色づかいなど、様々なテクニックに関する知識が必要です。 中でも、配色はユーザーに最初の印象を与えることになるので特に重要です。 正しい色遣いはユーザーはユーザーに良い印象を与え、誤った色遣いはユーザーに悪い印象を与えてしまいます。 Step1 : 色の影響 Step2 : それぞれの色の効果 Step3 : ウェブサイトの色の役割 良いウェブサイトを作成するために、ウェブデザイナーは色が人々に与える影響を知っておく必要があります。 人間というのは無意識のうちに色に反応して、様々な感情や気分に結びつけています。 色はそのサイトを見る上での感情や気分を単に刺激するだけではなく、色に
デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、実はデザインというものは数々のルールによって成立しています・・・デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。 デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、 実はデザインというものは数々のルールによって成立しています。 そのルールの知識があればデザイナーレベルとはいかないものの、見た目がきれいなグラフィックは作れるはずです。 デザインという言葉の定義やソフトの使い方から始めてしまうとややこしくなるので、 今回はあくまでも「とりあえず見た目をキレイにする」ということに重点を置いて説明します。 記事内で
Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 もっと沢山あるんですが、特に利用しているものを。制作時には毎回利用しているかもしれません。基本的に無料のものを使っています。順不同。 960 grid system グリッドシステムです。ブックマークレットも含め、色々手軽なのが嬉しい。何よりグリッドレイアウトはお客さん受け良い傾向にある気がします。 960 grid system Firebug Web制作といえばFirebugですが、僕はChrome派なのでChromeエクステンションのLite版を使っています。元々、Chromeにはデベロッパーツールがありますし、FxのFirebugも使いこなせてなかったのでこれで十分。 Fi
ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、
投稿日:2010年07月06日 レベル:― ソフトウェア:― Step1 : はじめに Step2 : それぞれの色の働き Step3 : Webサイトにおける色の役割 ウェブサイトのデザインには、入力からレイアウトや色に至るまで、数々のスキルの積み重ねを要します。色は、ユーザーによる第一印象を決める、特に重要な要素です。色遣いが正しければユーザーに好印象を与え、色遣いを間違えるとユーザーに悪印象を与えます。 良いウェブサイトを作るために、ウェブデザイナーは人に印象を与える色の働きについて知る必要があります。人は無意識のうちに色に反応したり、色に対して異なる感情や感覚と関連付けたりします。色は、単に人の感情や感覚を刺激してサイトの見え方に影響を与えるのではなく、ユーザーをサイトの特定のセクションへ誘導するために巧妙に使われます。 最近インターネットで使えると思われるそれぞれの色に
10 Great Tips to Boost Creativity [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ウェブサイトをデザインするとき、ワンパターンに陥ってしまうことは簡単です。デザイナーは自分が何が得意であるか知っており、それを強みにして常用してしまう傾向があります。しかしながら、通常とは異なる視点をとることで、創造的なアプローチを新しい限界へとおし上げることができます。 創造力をアップさせることはウェブデザインの現在のトレンドを学び、何がそれを成功させたかを理解し、そしてあなた自身のユニークなスタイルを使ってそれらのテクニックを実行することから始めます。 あなたの創造力をあふれ出るようにするために、ここに考慮に入れるべき10のヒントがあります。 1. カラーを考えてみる サイトをゼロから作成する時や修正する時、コンセプトを強くするためにカラーの知識を深め
Photoshopのブラシを検索できる FindBrushesのご紹介。検索と 言うか、アイコンを探せる検索 エンジン、Iconfinderと同様で、 インデックスされたブラシを検索 する形ですが、量はかなりのもの。 目的から探せるのが検索系のいい所ですよね。FindBrushesには現在600セット以上、総計12000種以上もストックされているので覚えておくと役に立ちそうです。 シンプルな設計ですし、軽いので探すには最適かも。 カテゴリからも探せる 左上のメニューからカテゴリで探す事も可能なのでキーワードが思いつかない、という方はカテゴリで探してはいかがでしょうか。 例1・グランジ系を探したい グランジ系のブラシをお探しなら「grunge」で検索します。数は90と出ますが、ブラシはセットになっているので量としてはかなり豊富ですね。 例2・木のブラシを探したい treeで検索。検索スピード
illustratorのスキルを上げたい。 そんなあなたにおすすめなのが、『40 Fundamental Illustrator Tutorials You Must Know』。知っておきたいillustratorのチュートリアル集です。 いい感じのものが揃っているので、いくつかご紹介しますね。 How to Create a Gearbox Settings Icon Using Simple Shapes シンプルなシェイプを使って、ギアの形をした設定アイコンを作るチュートリアル How to Create an Abstract Vector Design in Illustrator 美しい抽象的なデザインは、シンプルな形から作られる。いくつかの形と透明度に変化を持たせたサンプルの作り方 How to Create an Open Book with Illustrator’s
Appleの美しいウェブサイトから学ぶ実用的な15のデザインヒントをDesign Shackから紹介します。 15 Design Tips to Learn From Apple 下記は各ポイントを意訳したものです。 サイトのキャプチャは可能なものは日本サイトのものにしています。 はじめに Apple社は高級なデザインと類語です。Appleが発信する偉大なデザインを観察することから、学べることはたくさんあります。 ここにあげた15のポイントはあなた自身の仕事に活用されることを意図したものです。この素晴らしいサイトデザインをあなたのインスピレーションとして使用してください。 1. Keep it Simple アップル Appleのウェブサイトを一目見てください。そして、あなたの目に見えるものではなく、見えないものについて注目してみてください。 例えば、空港でトイレを探していると想像してくだ
なんとなく目立たせるためにドロップシャドウを適用したり、ちょっとさみしいのでグラデーションを加えたりしていませんか? Web designer Depotからドロップシャドウとグラデーションをウェブデザインで的確に使用するためのチュートリアルを紹介します。 Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors 下記は、各ポイントを意訳したものです。 ドロップシャドウとグラデーションの役割 ドロップシャドウとグラデーションの使用の注意点 使用は、より繊細に よくある間違いと解決方法 おわりに ドロップシャドウとグラデーションの役割 ドロップシャドウとグラデーションは、スペースに錯覚を生じさせるための基本的なテクニックです。 Mac OS Xのドックを例にとると、輝いたテーブルの上に各メニューのアイコンが浮き上がっ
技術をやソフトを除いてWebデザイン時に 個人的に役になってるなぁと思うものを あげてみます。これがあるから時間短縮 できたり、自分にとって満足できるデザイン に出来たり、無いと結構困る、といったモノ。 タイトルはシンプルにしましたが、内容は「センスの無い僕をWebデザイン時に助けてもらっているもの」です。 こういったものは人それぞれだと思います。あって当たり前、基本でしょwという方もいらっしゃると思うし、これが何の役に立つの?という方もいらっしゃると思いますので参考程度になさってください。 配色パターン 配色だけでデザインは良いものにも悪いものにもなると思っています。 カラーコードを覚えられないので良いと思う配色は必ずローカル環境にストックするようにしています。これを使って微調整をしたり、合うものが無ければオンラインのカラースキームジェネレーター等を使います。 配色は時間が掛かるのでサク
font …… フォントに関する指定をまとめて行う font-style …… フォントをイタリック体・斜体にする font-variant …… フォントをスモールキャップにする font-weight …… フォントの太さを指定する font-size …… フォントのサイズを指定する font-family …… フォントの種類を指定する font-size-adjust …… フォントのサイズを調整する font-stretch …… フォントを縦長・横長にする line-height …… 行の高さを指定する text-align …… ブロックコンテナ内の行の揃え位置・均等割付を指定する text-justify …… 均等割付の形式を指定する vertical-align …… 縦方向の揃え位置を指定する text-decoration …… テキストの線・色・スタイルをまと
2024 07 ≪ 12345678910111213141516171819202122232425262728293031≫ 2024 09 1 名前:以下、名無しにかわりましてVIPがお送りします[] 投稿日:2009/11/24(火) 11:47:13.45 ID:ZAwq5sRE0 ちょっとカンプとかいうの作ったんで見て(´・.ゝ・`) 根本からダメなのはわかるけど完成だけはさせたいんで アドバイスおくれ(´・.ゝ・`) 見出しの中身・・・ 3 名前:以下、名無しにかわりましてVIPがお送りします[] 投稿日:2009/11/24(火) 11:52:02.96 ID:ZAwq5sRE0 こねえ(; ・`д・´) 4 名前:以下、名無しにかわりましてVIPがお送りします[] 投稿日:2009/11/24(火) 11:53:31.47 ID:ZAwq5sRE0 ぬ・・・ そうか、甘え
最近、白黒カラーベースのサイトを 作成したのですが、その際に色々と 参考にしたアイコンやバナーなど のWeb素材やインスピレーション 向上の為のWebデザイン例に なりそうなサイトをまとめておきます。 結局アイコン等は使わなかったんですが、また作る時の備忘録としてメモ&シェアしたいと思います。ライセンスはそれぞれご確認を。多少重いかもしれません。アイコン、ボタンやバナー、その他の素材、ギャラリーと続きます。 アイコン白黒やグレーのアイコンいろいろ。 40 greyscale icons グレースケールアイコンパック。 40 greyscale icons twotiny 白黒のミニアイコンが沢山。 twotiny 165 vector icons 165のうち、66が白黒のアイコン。 165 vector icons bwpx.icns かなりの数の白抜きミニアイコンが揃っています。 bw
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く