『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
まだまだメンバーの数が少なく、職種ごとの距離が近いスタートアップ。デザイナーの仕事をディレクターやエンジニアが理解することが、プロジェクトを円滑に進める秘訣です。 デザイナーではない方々にとって、デザイナーが普段何を悩み、どのようにWebデザインしているのか知るのは、非常に重要と言えるでしょう。今回は厳選した7つのスライドをご紹介しながら、「配色」「レイアウト」といったデザインのエッセンスを学びます。 もちろん、本職のデザイナーの方にも役立つスライド7連発です! 1.色彩センスのいらない配色講座 7000いいね! されたスライド 「時間がない! 今すぐ作り始めないと納期に間に合わない! でもどんな色を使ったらいいか分からない!」そんな人におすすめなのがコレ。Facebookで7000以上のいいね!がついた、@marippe_さんのモンスタースライドです。 配色や明度・彩度の基礎をお
ウェブデザイナー・ディレクターが実際に、サイトやブログ・ポートフォリオなどの設計をどのように行っているかが垣間見ることができる手書きのワイヤーフレームをDesignbeepからとプラスαで紹介します。 30 Great Examples of Web Design Sketches ちなみに僕は勝負用にA3、携帯用にB5サイズでしゃこしゃこしてました。
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる!」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス&タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが!フォトショでもFW並か、それ以上に楽ができると思います。 そ
2013年5月9日 Webデザイン, インスピレーション, 便利ツール 2013年を代表するデザイントレンドと言えばフラットデザイン。それを横目に、実は静かに流行り始めている「ポリゴン風デザイン」をご存知でしょうか?ローポリと呼ばれているものですね。今回はツールを使って写真からポリゴン風イラストを作ってみましょう!デザインの参考になるWebサイトやグラフィック・アートもまとめているので、オリジナルポリゴンアートに挑戦してみてください! ↑私が10年以上利用している会計ソフト! 「triangulator」でポリゴン風イラストを作成 ポリゴンは通常は3D系のソフトで作りますが、PhotoshopやIllustratorでも作ることができます。ただ、それではかなり時間がかかってしまうので、写真をサクッとローポリイラストに変換できる「triangulator」を使用します。こちらの動画をご覧頂け
この前「英語圏のWEB屋な人たちが読んでそうなブログ教えて」って具合の、まぁいつも通り取り留め無く唐突な質問がありまして、コレまた僕にとってはいつも通り『北米WEB屋なら誰でも知ってるんじゃないかって思うサイトをまとめてみた』って記事を共有しようとしたんですが、コレもう2年前の物じゃーないですかってことに気付いたわけです。 結構僕はこういう質問に返答するノリで書いた記事のリンク送るってコトが凄く多いので、じゃぁこの記事も古いし、リバイスするかって軽い気持ちで書きだしたんですが、コレが意外とめちゃめた大変。大変って言うか、量が半端ないことになっておりまして… 正直、去年くらいからだいぶ暇な時間が出来てしまい、購読するブログの数もだいぶ増えていて、うーんって感じなんですが、まぁ良い機会なので僕が『これは読んどいていんじゃね?』ってオススメするブログやら記事やらを色々共有させて頂こうかなと思いま
伊勢志摩 ホテル&リゾート 合歓の郷 |... / オリーブベイホテル 公式サイト|長崎県大島のスモ... / 黒川温泉 いこい旅館他...全9件
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね? さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
どうしたらクライアントの納得するデザインにたどり着けるのだろう。と考えたことはありませんか?デザインのフィードバック地獄で苦労したWebデザイナー、ディレクターの方は多いと思いますが、振り回されがちなWebデザイナーの特徴とその対処法について、ケーススタディでまとめてみました。 ■クライアントに振り回されるWebデザイナー/WEBディレクターの特徴 「フィードバック指示を額面通りに受け取ってしまう」 これに尽きます。クライアントはデザインをした事が無い人がほとんどなので、修正指示もデザイン的には正しくない事がかなりの割合であります。 これは映画を観て良かった悪かったは誰にでも評価できるが、その映画をどのように修正したらよりよくなるかは経験を積んだ者にしかわからない、というのと同じことです。 にもかかわらず、「ここのボタンを赤くしてください」、「背景をグレーにしてください」という指示を額面通
「なんかいつも同じような配色になってしまう」「思い切った配色ができない」と悩んだときに個人的にお世話になっているサイトを紹介します。 かなり有名なサイトばかりですが参考になればうれしいです。 メインの色を決めるたいときに まず、ウェブサイトのメインとなる色を決めるときに使っているサイトを紹介します。 WEB色見本 原色大辞典 - HTML Color Names この手のサイトは色々ありますが、私はこのサイト一筋です。様々な色が載っていますが、以下のページの色を参考にすることが多いです。 日本の伝統色 和色大辞典 - Traditional Japanese Color Names 世界の伝統色 洋色大辞典 - Traditional World Color Names ビビッドカラー - Vivid Colors カラーピッカーもよく使います。 カラーピッカー - 原色大辞典 アクセント
年度末の忙しさで精神的に追い詰められているWPD-Blueでございます。1ヶ月ぶりです。WP-Dの原稿締め切りは順調にぶっちしたので、おそらくこの記事が掲載されるのは4月、新しい年度に期待で胸膨らます季節です。そんな喜びの季節にこんな記事をアップしちゃっていいんでしょうか。まぁ、気にせず年度末テンションで書き進めますが…。 さて、筆者は普段は主にMovable TypeとかWebReleaseとか、.NETで組まれた独自CMSとか、とにかくその辺のプロプライエタリなCMSからWordPressへのマイグレーション(移行・変換)を含む案件に関わることが多いです。その辺のシステムはたいてい、WordPressより多機能でできることも多い。 対してWordPressは、コアはあくまでブログ。フックAPIを介した安全なカスタマイズが可能で、サードパーティ製のプラグインが無償で、かつものすごい数が揃
最近、WordPressの 事もあまり書く機会がなくなっていたので、たまには書いてみようかと思いまして、とりあえず、今このブログで使っている『WordPress プラグイン』をすべて挙げてみようと思います。 …というか、改めて挙げると、ぼくはやっぱり WordPress のことなんかちっともわかっちゃいないな…(・_・; まぁ、いっか。 ということで、今この『ノリロウ戦記』で使っているプラグインはこんなものたちです。 合わせて、参考にさせていただいた記事を掲載しておきます。ありがとうございます。(○´―`)ゞ。o ○ WordPressでまずは最初に入れておきたいプラグイン なんだかよくわからないけど、WordPressをインストールしたら、まずはとりあえず入れとけと言われた(誰ともなく)ので入れているプラグインたち。 1. Akismet WordPress › Akismet « Wo
今回はjQueryのanimateを使って、要素をアニメーションさせる方法を試してみようと思います。 本当はCSSのアニメーションだけで済めば良いのですが、特にIEを考えると難しいところです。そこでjQueryを使っての基本的な方法をおさらいしておきたいと思います。 書き方 まずanimateの書き方ですが、このような感じ。 animate(params, [duration], [easing], [complete]); animate(params, options); 2通りありどちらの書き方でも動きます。 1つめの書き方はそれぞれ引数を指定する方法で、2つめは連想配列で指定できるようになっています。今回は2つ目の連想配列の方法で説明していきます。 params ここには、アニメーションさせたいスタイルを書きます。 $('#btn01').click(function(){ $('
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集|Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
PhotoshopをWebデザイン制作として使ってると、画像を編集する事よりも、シェイプを使って図形を描く事の方が多い気がします。Illustratorで描くのと違って、ピクセル具合も気にしながら描けるので、小さいアイコンなんかはPhotoshop上で作った方がきれいに描けたりします。それでいてパスなので、拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せるし、いろいろ重宝ポイントがあるんです。 そんな万能シェイプの機能や特長について、個人的なまとめです。 ※この記事では、主にPhotoshop CS4を使っていますが、Photoshop CS6との違いも、分かる範囲で注釈入れてます。 ※OSはMac OS X 10.6 Snow Leopardを使ってますが、Mac OS X 10.8 Mountain Lionとの違いも、分か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く