タグ

webデザインとphotoshopに関するakiueosのブックマーク (7)

  • Photoshopのシェイプでできること。

    PhotoshopをWebデザイン制作として使ってると、画像を編集する事よりも、シェイプを使って図形を描く事の方が多い気がします。Illustratorで描くのと違って、ピクセル具合も気にしながら描けるので、小さいアイコンなんかはPhotoshop上で作った方がきれいに描けたりします。それでいてパスなので、拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せるし、いろいろ重宝ポイントがあるんです。 そんな万能シェイプの機能や特長について、個人的なまとめです。 ※この記事では、主にPhotoshop CS4を使っていますが、Photoshop CS6との違いも、分かる範囲で注釈入れてます。 ※OSはMac OS X 10.6 Snow Leopardを使ってますが、Mac OS X 10.8 Mountain Lionとの違いも、分か

    Photoshopのシェイプでできること。
  • デザイン効率大幅アップ!Photoshopとスマホの画面がリアルタイムに同期される神アプリ『Skala Preview』

    世の中にはこんなに便利なアプリがあったのかと驚きを隠せない霙(@xxmiz0rexx)です。なぜ今まで知らなかったのか!!なんて非効率な日常を送っていたのか!!悔やんでも悔やみきれないです当に。。 というわけで、今日は存在を知って以来 毎日使ってしまっている超絶神アプリをご紹介させて頂きます:) スマートフォンサイトやアプリデザインに最適なのでマカーなあなたは是非チェックしてみてください!! 『Skala Preview』とは Photoshopで開いているキャンバスをスマートフォンでリアルタイムプレビュー出来るアプリです! 今までスマートフォン向けのデザインをする時は、Dropboxにpngを保存し、同期させ、実機で確認していた私。 同期にいちいち時間がかかり かなりストレスだったので、このアプリを知って大歓喜なのでございます♡ 公式サイト:Skala Preview, a Mac a

    デザイン効率大幅アップ!Photoshopとスマホの画面がリアルタイムに同期される神アプリ『Skala Preview』
  • [連載]Webデザイン入門(3:光とボタン)

    3日目の講義ではちょっとしたボタンを制作したのですが、テキストに載っていたボタンがちょっとおかしな感じだったので、反射光に関して簡単に説明してから、反射光を取り入れたボタンを制作しました。 ちょっとおかしな HOME ボタン Photoshop のテキストの最後にボタンの作り方が載っていたのですが、なんだかちょっとおかしいですね…なぜおかしいのでしょうか。 電球マークは光源、オレンジの矢印は光線を表すものとします。 おそらく、著者の方はボタンには上から光があたっているものと考えて、このようなボタンにしたのではないでしょうか。 あるいは、単に Photoshop のデフォルトのグラデーションが白から黒なので、このようにしたのかもしれません。 しかし、このような光の当たり方は、現実世界ではありえません。 (たとえ太陽光などの入らない密室でも、壁や床に光が反射する場合があるため) もっと身近な例

    [連載]Webデザイン入門(3:光とボタン)
  • 初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color

    はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします! もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ(エッジを整列)」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…! CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください! 1.

    初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
  • 10 Tips For Creating Website Mockups In Photoshop // Plasticmind

    Here are some things I’ve discovered while creating website mockups in Photoshop. They’re not gospel, just things that you may find helpful: 1. Use shapes and shape layers as often as possible. You can resize then easily without quality loss, good for later changes. 2. Blending options are your friend. Double click a shape layer and you can do all sorts of effects: gradients, shadows, color overla

    10 Tips For Creating Website Mockups In Photoshop // Plasticmind
  • 新着記事

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

    新着記事
  • ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

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

  • 1