アイコン作りに特化したチュートリアルの数々！とにかく真似まくった先にオリジナルを作る意識！ | バンクーバーのうぇぶ屋
世の中にあるチュートリアル見まくって、沢山の技術や表現力を得て自分自身のオリジナルへと昇華させようぜ！的な記事を以前書かせて頂いたのですが、この記事を友人にもみてもらい、感想もらったりした結果、中々具体的な作る目的が無いと、チュートリアルとか出さないのが正直な所なのかもしれませんね。「これ、作るぞ！」みたいなやる気というかそういうの。 しかし、色々な人の話しを聞いている中で、以前のチュートリアル記事の中で、アイコンを作るチュートリアルに関して多くの人からコメントを頂きました。「おぉ、アイコンつくるチュートリアルすかー」みたいな。んで、もしかしたら、アイコンという誰しも一度は作ってみようと思う物を通したチュートリアルであれば、結構楽しくスキルアップできるんじゃないかと思った訳です！ アイコンであれば色々なところで必要になるし、ミニマルだろうが、ポータルだろうが、コーポレートだろうが、ECだろ
良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと
デザイナーになりたいって思った時にPhotoshopやIllustrator、cssやhtmlを勉強しなきゃな〜><て考えると思うのですが、技術的なことを学ぶ前にまずデザインが出来なきゃ始まりませんよね。 センス？かっこ良さ？奇麗さ？良いデザインにしたいけど、何をしたらいいかわからない。そんな時に何を考えたら良いのかデザインの基本をまとめてみようと思います XD はじめに 良いデザインって？ 最良の方法？ 1.コンテンツの目的 2.ターゲット 3.これらを組み合わせた例 デザインの基本 1.書体について 2.ジャンプ率 3.ホワイトスペースを生かす >ホワイトスペースで情報を分割する >ホワイトスペースで囲む >ホワイトスペースにあえてはみ出す 最後に はじめに デザインという言葉を聞くと、かっこいい、かわいい、おしゃれ、きれい、などと感覚的なものを思い浮かべる方が多いのではないでしょうか
『こんな部屋にしたい！』時間の経過を忘れてしまう程美しいインテリアを紹介しまくってるサイト色々！ | バンクーバーのうぇぶ屋
将来、家族を持ったらどんな家にしよう… 次引越ししたらどんな部屋にしよう… フリーランスならどんなホームオフィスにしよう… パーティーするならどんな部屋だと良いだろう… 僕自身、何千回、何万回こんなことを考えたか見当も付きませんが、皆さんの中にもきっとそんなことを思い描くのが大好きな人はきっと多いはず。 ついこの間、Facebookの方で『DESK』というクリエイターのデスクを紹介しまくっているサイトを投稿させてもらった時の反応の多さに、「あぁ、やっぱり僕だけじゃないんだな」と改めて思いました。 僕もインテリアを眺めるのが大好きで、以前に僕の記事でも紹介させて頂きましたIDSに行って来た時から、とにかく色んなインテリアというインテリアを眺めては、将来自分が住んでみたい部屋を妄想し続けている毎日です。 …誰に向けた言い訳でも無いのですが、たまにはWEB以外のデザインを眺めて新しいインスピレー
これからIllustratorを始めてみようという人のための基本操作とかいろいろ
Illustrator を使い始めるにあたっての、予備知識や基本操作をまとめてみました。Illustrator って簡単ではないと思うんですけど、Webデザイナーなら使いこなしたいソフトウェアのひとつですよね。これからWebデザインで Illustrator を使ってみようという人が、少しでも Illustrator に親しんでくれればいいなーと思って書きました。 私はいつも Web制作の時には、Photoshop と Illustrator を使っています。ずっと前、Webデザインを勉強しはじめた頃、私は Illustrator より先に、まず Photoshop から使い始めました。そしてそのあと初めて Illustrator に触ったとき、Photoshop よりもとっても難しく感じて、基本操作もなかなか覚えられなかった想い出があります。 もちろん ベジェ曲線 や パス など、Ill
WEBデザインとは何か？迷った人に読んでほしい言葉 80+
WEBデザインしていて、ちょっとモチベーションが上がらないときなんかに、先人たちのデザインについての洞察を読むと、「デザインってそういうことだったのか」とか、「初心だけど忘れてるねー」とか、小さいですが、そんなところからモチベーション、インスピレーションを分けてもらえることがあります。 この記事では、そんな名言、格言を Web Design Mash, Design Was Here とその他のサイトからピックアップして翻訳しました。 毎日少しずつインスピレーションを取り入れるのに役立てて下さい！ 更新: 2011-12-23 誤訳を2点修正しました。※1の箇所です。また、他何点か分かりにくい表現を見直しました。 初出: 2011-12-20 良いデザインは他のデザイナーに無力感を味わわせるものです。なぜならそれは、彼らにはなかった、その人だけのアイデアだからです。 Good design
WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？
WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？ 2013年3月23日 Webサイト制作, Wordpress, スマートフォン 以前「WebサイトをiPhoneで見やすくする5つの方法」という記事でWebサイトをスマートフォンに対応させる方法を紹介しました。当時はそこで紹介しているMobifyというサービスでスマートフォンに対応させていたのですが、JavaScriptが使えないので、リデザインを期に別の方法でスマートフォンに対応させる事にしました。タイトルにあるとおり、WordPressのテーマを変更する方法とCSS Media Queriesを使った方法の２通りを試したので、その比較についても書いてみようと思います。 ↑私が10年以上利用している会計ソフト！ 最初に試した方法はCSSのMedia Queries（メディア クエ
ByeBye 2011 今年の記事をおさらい。今年はデザイン関連が多いです。 / Maka-Veli .com
もう2011年が終わるんですねー・・・早いですね。1年って。今年は色々ありました。カダフィ、ジョブズの死、ヒドイおせち、タイの洪水、なでしこジャパンの優勝etc…でもやはり、3.11の震災が一番大きいですね。今年のニュースはWikipediaで事細かく調べられるので、そちらをどうぞ。2011年の日本 自分のブログを振り返る事は大事なので、1年まとめくらい出そうと思います。 主な記事だけですが、どうぞ。 今年書いた主な記事 デザインに関する考察色々 配色初心者でも効果的なカラーデザインが出来るようになる4つの工程 1337 users 2011/12/15 タイトル間違えました。 「僕みたいなクソデザイナーが配色する時に騙し騙しデザインする手法」です。 配色には色々作法があります。そして言葉もあります。加法、減法 … 一番最近の記事です。まとめ系じゃない記事でここまでヒットしたの
配色初心者でも効果的なカラーデザインが出来るようになる4つの工程 / Maka-Veli .com
タイトル間違えました。 「僕みたいなクソデザイナーが配色する時に騙し騙しデザインする手法」です。 配色には色々作法があります。そして言葉もあります。加法、減法、色の三属性、伝統、政治的意味合い、などなど。厳密に出したらキリがありませんし、プロじゃないので、細かい事は抜きにして、個人的に抑えておく簡単なポイントをまとめてみました。 雰囲気のキーワードを出す なんとなくのキーワードを出します。 カッコイイ！ うぉ！すっげ！って感じ クール とにかく渋く。鳥肌立つ感じで 可愛いっぽく。 やっぱ少し可愛くが良い ラブリー♡ もうワクワクーって感じで♥ シンプルに。 余計な物はいらん インパクトどーん とにかく覚えてもらいたい！ 爽やかーーー キレイに見せたい！ 楽しい！ ﾁｮｰﾊｯﾋﾟ ｽｰﾊﾟｰﾊｯﾋﾟ ﾉ…(ry など。 ここで決めたキーワードがベースになります。 常に頭に入れてお
光から移動まで、すべてCSSで作る光るアニメーション
ゲーム型キャンペーンサイト「URBAN RESEARCH Christmas 2011」 意匠部ME課あらため、HTMLファイ部所属となった比留間です。 今回は、先日リリースした「アーバンリサーチ」のキャンペーンで 「アーバンサンタ」からのプレゼント、というサイト制作に携わりました。 簡単にキャンペーンの概要を説明すると、Webとアーバンリサーチの店舗が連動して先着でクリスマス限定のキャンドルをもらえるというキャンペーンです。 内容はサイト内に隠されたプレゼントボックスを見つけ出して、それをアーバンサンタにおねだりする、 というとてもシンプルなゲーム型キャンペーンサイトになっています。 さらに抽選でおねだりした商品がもらえるので、ぜひぜひ参加してみてください。 さて、今回この記事でご紹介したいのは、 このキャンペーンサイトで使用した「CSSで作る光のアニメーション」の作り方を 簡単に説明し
WordPressテーマ制作チュートリアル
この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。 なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。 おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。 このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。 実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストール まだレンタルサーバを借りていない
インスピレーションの宝庫！Web制作会社のポートフォリオWebサイト35
2017年7月14日 Webデザイン, インスピレーション 先週末、ぼけーっと世界各国のWeb制作会社のWebサイトをひたすら眺めていました。デザイン・Web制作会社のWebサイトって細かいところまで気をきかせていたり、クスッと笑ってしまうような仕掛けがあったりして、見ていて飽きないんですよね。さらにそのサイトだけでなく、彼らの作る作品も素敵なものが揃っているという点もおもしろいです。そんなWeb制作会社のWebサイトと、その見どころを紹介します！ ↑私が10年以上利用している会計ソフト！ Web制作会社のサイトの特徴 Web制作会社のポートフォリオサイトを眺めていて、いくつか発見があったのでまとめてみます。 制作実績 多くの会社がjQueryなどを使って動きをつけて作品を紹介していました。また、以下の情報を載せているサイトが多かったです。 スクリーンショット クライアント名 制作したサイ
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
Webデザイナーが知っておく、DTPの基礎知識
Webデザイナーが知っておく、DTPの基礎知識 2011-05-08 CMYK RGB(加法混色)で表現される色を、塗料や染料では全ての色を再現できないため、印刷する場合はCMYK(減法混色)ににする必要があります。 CMYKは、シアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）、キー・プレート（Key Plate）から成っており、シアン、マゼンタ、イエローの三色で理論上、黒も表現できますが、実際は強く表現されないためブラックを補ったCMYKが使用されています。 しかしCMYKの黒でも本当の黒には見えません。 そこで他の色も混ぜて、本当の黒に近づけることをリッチブラックといいます。 印刷会社によっては推奨されているリッチブラックの濃度もありますが、C30%＋M20%＋Y20%＋K100%で問題ないと思います。 入稿時にはCMYKの色指定を、5%刻みで指定する様にするよ
HTMLをWPテーマ化する時の手順リスト - かちびと.net
一般的なHTMLファイルをWordPressの テーマにする時の手順と、使用するタグ をリスト化、というか自分用チートシート。 いつも子ページが時間掛かるので、単純 な構成のHTMLなら、テーマ化くらいは サクサク終わらせたいですね。 唯一の方法では無く、ベーシックな方法です。僕も一度作成してから必要に応じて別のタグを使います。 WPテーマ化手順リスト STEP.1 HTMLをindex.php、header.php、footer.php、sidebar.php等に分割。分割に関しては以前の記事をご参照下さい。 以下のインクルードタグをindex.php、search.php、archive.phpに追加。 <?php get_header(); ?> <?php get_footer(); ?> <?php get_sidebar(); ?> STEP.2 header.phpのmeta
WordPressでWebサイトを構築するまでの手順リスト - かちびと.net
私的なメモです。WordPressで個人的にWebサイトを構築したり、受注した際の手順リストをメモ。自分用のチートシートです。いつも何かしら忘れている気がするのでいつもやる事をぱっと見で分かりようにリスト化しておきます。※個人的な主観が入っています。 Todoソフト等はあまり使わないので本当に私的なメモですが、これが誰かのお役に立てたら幸甚です。プラグインなども好みが有ると思いますのでご参考までに。。 [note]情報が古くなったので改正版としてアップデートしました。[/note] インストール DB作成 WP最新版をダウンロード wp-config.phpをDBに合わせて変更 接頭語も変える（wp_ → example_） FTPソフトでサーバーにインストール ログインして管理者権限のユーザーを作成 作成したユーザー名で再ログイン adminユーザーを削除 ダッシュボードの不要なコンテン
クリエイティブな20のECサイトデザイン
2017年6月29日 Webデザイン, インスピレーション ECサイトを作る際は、使いやすさだけでなく、デザインももっとクリエイティブに！商品を理解し、それにあったデザインをすることでより効果的にユーザーにアピールすることができます。ここではサイトを開いた瞬間に「おっ！」と思うようなECサイトを紹介します！ ↑私が10年以上利用している会計ソフト！ 商品をより引き立たせるWebデザイン集 free people http://www.freepeople.com/ ノートに落書きをしたような手描き風のデザインや、ほどよくレトロ感のある写真加工に思わず釘付け。 DUCHY of CORNWALL NURSERY http://www.duchyofcornwallnursery.co.uk/ 落ち着いた色合い、ほどよいグランジ感、バナー写真の切り抜きなど商品であるお花を引き立てています。 k
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
配色センス０でも大丈夫！？服、インテリア、デザイン、様々な“色使い”を改善するかもしれない『60-30-10 Rule』！ | バンクーバーのうぇぶ屋
2011年を振り返り、人として腐らんばかりの「ありがとう！」を伝えたい記事、サイトの数々【Part 2】 | バンクーバーのうぇぶ屋
コリス
2011年を振り返り、WEB屋として腐らんばかりの「ありがとう！」を伝えたい記事、サイトの数々【Part 1】 | バンクーバーのうぇぶ屋