デザインに関するbeamsupernovaのブックマーク (35)

  • 「紙っぽいデザイン」の特徴を盗め!イベントポスター事例から学ぶ、紙っぽいデザインの特徴。

    quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。こんにちは。お盆休みまでもう少しですね!みなさま仕事の進捗はいかがでしょうか。 webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。 webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。 またお客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙(ポスター、雑誌)のような完成図をイメージされることが多いのではないのでしょうか。(特集ページや、LPや、メインビジュアルなどです。検索画面とかは違いますよ!) それで今回はLPやアバウトページ、特集ページでよくある「紙っぽく」オーダーをスマートに解決するため

    「紙っぽいデザイン」の特徴を盗め!イベントポスター事例から学ぶ、紙っぽいデザインの特徴。
  • How to Create 3D Anaglyph Images in Photoshop

    Trevin serves as the VP of Marketing at WebFX. He has worked on over 450 marketing campaigns and has been building websites for over 25 years. His work has been featured by Search Engine Land, USA Today, Fast Company and Inc. This tutorial will walk you through the process of making a 3D anaglyph image from a single image. It might not be quite a Hollywood-ready 3D effect but it’s still fun and mi

    How to Create 3D Anaglyph Images in Photoshop
  • | 【Photoshop】版ずれ・3Dエフェクトのチュートリアルと応用の仕方神戸ホームページ制作センター

    ファッション・美容系などのサイト使えるオシャレで簡単手軽なエフェクト「3Dエフェクト」 実際に立体な画像ではなく、雑誌とかでもたまにある赤と青の眼鏡かけたら飛び出てくるやつです。 DTPでは実際に印刷ミスで起きる現象でもあります。版ずれといいます。 WEBでもちらほら見る加工です。 photoshopだとほとんどショートカットだけでできてしまういたってシンプルな方法ですが、色の使い方レイヤーのブレンド方法にいろいろと学べる事が詰まってますし、ショートカットの勉強やおさらいにもなります。 では早速説明していきたいと思います。 Macの場合はCtrlをcmdに置き換えてください。 準備した画像のレイヤーを複製 今回使用した画像はphoto ACさんより(※要会員登録) 白いニットの白人女性27 白いニットの白人女性49 Ctrl + Jでレイヤーを複製します。 Ctrl + Jもう一度レイヤー

  • ガーリー好きがお届けするガーリーデザインのポイント5つ | Kana-Lier カナリエ

    ブログがとってもガーリーだね、と嬉しいお言葉を頂くことが多いKanaです。 とっても可愛いガーリーなデザインは、作っていても見ていても幸せな気分になるので大好きです。 そんな私がガーリーデザインをする際、気をつけているポイントをご紹介します。 1.配色は甘く、優しく。スイーツのような彩りを。2.テクスチャを利用して、やわらかさや、素材感を加えてみる!3.パターンを使うだけでガーリーに!ストライプとドットが素敵!4.安定感よりも、繊細なイメージを意識する。5.かわいい小物をコラージュしたり、装飾を加えて、可愛らしさをアップ! 1.配色は甘く、優しく。スイーツのような彩りを。 ガーリーデザインの配色を考えるときは、甘く優しい色使いを意識しています。 今ひとつピンと来ない時は、googleの画像検索でスイーツ、ケーキ、マカロン、アイスクリーム、ジェラート等を検索しイメージを沸かせます。 私が好き

    ガーリー好きがお届けするガーリーデザインのポイント5つ | Kana-Lier カナリエ
  • レイアウトが考えやすくなるデザインのルール |https://wp.yat-net.com/name

    デザインには意味があります。物を配置するにしても、なぜそれを配置するのか?なぜその色味なのか?なぜそこに置くのか?など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真

    レイアウトが考えやすくなるデザインのルール |https://wp.yat-net.com/name
  • WEBデザインが短期間で上達した方法

    この記事は、Webデザインが短期間で上達した2つの方法として、新たに書き直しました。 WEBデザイナーとして10年ちょっと経過。 未だにデザイナーとして足りないものは多いですが、 どうにかクライアントにも満足してもらえる デザインが提供できるようになったと思います。 これは、自分が新米デザイナーだった頃にやっていた、デザインの上達方法です。 「上手くデザインができない!」「上手くなるにはどうすればいいの?」など、 どうすればデザインが上達するのかわかならい人の参考になれば幸いです。 新米デザイナーの頃、ダメなデザインをして先輩からよく叱られていました。 クライアントからデザイナーを交代してくれと言われ、 激しく落ち込んだこともあります。 いまになると恥ずかしいですが、 その頃の自分には、 プロのデザイナーとして最低限の能力がなかったのです。 クライアントの満足するクオリティのデザインを 期

    WEBデザインが短期間で上達した方法
  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
  • Create a Trendy Retro Landscape Design in Photoshop

    This post was originally published in 2013 The tips and techniques explained may be outdated. My number one most popular tutorial from last year described the process of creating a trendy retro cityscape in Photoshop. I’ve noticed the retro and vintage styles are still in vogue, so today let’s take a look at creating another design that captures the abstract theme of old album art. Follow this ste

    Create a Trendy Retro Landscape Design in Photoshop
  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
  • Create a Trendy Retro Cityscape Design in Photoshop

    This post was originally published in 2012 The tips and techniques explained may be outdated. Follow this step by step Photoshop tutorial to create a cool cityscape poster design with the trendy retro style and effects that are so popular at the moment. We’ll use a range of texture resources and Photoshop techniques to give the design an aged and distressed appearance and send it back in time a fe

    Create a Trendy Retro Cityscape Design in Photoshop
  • 365 Days of Tumblr (& More)

    calligrafikas: Very busy Monday for me! Aside from doing a lot of advertising design work & a lot of photo editings today I also need to do these letterings for a client. Here are some drafts that I’m currently working on. Just trying to find out at this stage what style I’m going to use for this job. #calligrafikas #grafikas #dreweuropeo  #moderncalligraphy #lettering #handlettering #pilotparalle

    365 Days of Tumblr (& More)
  • The Dark Knight Rises Stencil Effect in Photoshop

    The Dark Knight Rises movie is a couple of weeks away and the amount of posters and viral images promoting the movie is quite amazing. There are some really cool ones and as usual, we want to learn how they were done. That is the case of this Photoshop tutorial based on another promotional image for the Dark Knight Rises. So in this tutorial, we will create a stencil and spray effect using basic f

  • 3 Cool Techniques For Your Next Web Design Project

    2017年3月27日 CSS, jQuery, Webサイト制作 Webデザインの勉強を始めたという方によく質問されるのが、「どうやって勉強すればいいですか?」。私はWeb制作の学校の学生だった頃から実践しているふたつの事があります。素敵だなって思えるWebサイトを見つけたら、どのように作られているのか自分なりに分析してみること。そしてそこで使われている技を実際に試してみること。そこで今日は最近見かけた素敵Webサイトと、そのサイトで使われていた技術を解説してみたいと思います! ↑私が10年以上利用している会計ソフト! 準備:分析&実践に役立つツール Chrome、Safariなら付属のデベロッパーツール ChromeとSafariならブラウザーにはじめからデベロッパーツールなる開発のためのツールがついています。私が愛用しているのはこのツール。表示しているWebページのHTMLCSSが確

    3 Cool Techniques For Your Next Web Design Project
  • WookMark

    Welcome to the world of dynamic web development and enriched user experiences. Our website is your gateway to the universe of JQuery plugins, where innovation meets functionality. We will try immerse you in the art of web development, portraying the power and potential of JQuery plugins. At wookmark.com, we understand that the digital landscape thrives on interactivity and seamless functionality.

  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
  • 円・サークルのエレメントをウェブデザインに使いたいときに参考になるサイトのまとめ

    コンテンツの重要な箇所を円形のエレメントで強調したり、背景にさりげなく円形のエレメントを使用したりなど、円形のエレメントを巧く使ったウェブサイトを紹介します。 また、円・サークルを効果的に使う方法は以前の記事を参考にどうぞ。 実例から学ぶ、円・サークルをウェブデザインで効果的に使う15のTips

  • ハロワのWEBデザイン講座で「◯時から本気出す時計」を作ってみた : ゴールデンタイムズ

    1 :以下、名無しにかわりましてVIPがお送りします :2012/02/20(月) 00:33:29.28 ID:2GJ3VTkF0 http://honkidasu-tokei.com/ ハロワの職業訓練校でwebデザイン講座を3ヶ月受けて、 そこで習ったhtmlcssjavascript使って作った。 時間ごとにコピーと背景が変わるようにしてる。 コピーは定番のやつを改変した。 web制作未経験者が手打ちで作ったのでいろいろ荒いと思うが、 よかったら見てください。んでアドバイスください。 2 :以下、名無しにかわりましてVIPがお送りします :2012/02/20(月) 00:35:12.36 ID:7zW9hZdO0 ちょっといいとおもっちゃったぞ!がんばれ! >>2 ありがとう!叩かれると思ってドキドキしてる。 4 :以下、名無しにかわりましてVIPがお送りします :2012/

    ハロワのWEBデザイン講座で「◯時から本気出す時計」を作ってみた : ゴールデンタイムズ
  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
  • Beautiful Watercolor Effect Tutorial and Photoshop Brushes

    2014年3月6日 Photoshop, Webデザイン 水彩画っていいですよね。なんだかほんわかした雰囲気が大好きです。ということで今回はPhotoshop CS5を使って画像を水彩画風に加工する方法と、便利なPhotoshopブラシ、水彩画風デザインのWebサイトを紹介します。デザインの参考にしてみてください! ↑私が10年以上利用している会計ソフト! 写真を水彩画風に加工する方法 また動画撮ってみました。ただでさえ時間かかってないのに、4倍速にしたら30秒くらいになっちゃいました。簡単なのでぜひ試してみてくださいね! 1. ぼかし 画像を開いて、そのレイヤーを複製します(コマンド+J)。 複製したレイヤーを「blur」にレイヤー名を変更します。 フィルター > ぼかし > ぼかし(詳細)で、「半径」を10、「しきい値」を25〜30に設定します。 2. エッジの光彩 元の画像レイヤーを

    Beautiful Watercolor Effect Tutorial and Photoshop Brushes
  • Awesome Light Effect in Pixelmator