タグ

photoshopに関するblueleのブックマーク (8)

  • UI Kit·スマートフォンアプリ/Webのデザイン作成に使えるデザインテンプレート MOONGIFT

    Webサイトのモックアップ作成をPhotoshopを使って行っているデザイナーは多いかと思います。そんな時に一から作るのではなく、ある程度のUIキットがあると作業の進めやすさが格段に違うでしょう。 手書き風やiOS 7風など様々なテーマがあると思いますが、UI KitはフラットUIに適したアプリ/Webサイトのモックアップに適したデザインになっています。 UI Kitの使い方 全体像はこのようになっています。 設定画面風。 アイコンも多数あります。 カレンダーは色々な場面で使われますよね。 プロフィール風。 UI KitはPSDファイルになっていて、大きく分けて13種類くらいのデザインが登録されています。シンプルなデザインなので、これらの部品を組み合わせることでスマートフォン向けのWebサイトやアプリのデザインがさくさく進むのではないでしょうか。 UI KitはPhotoshop用のオープ

    UI Kit·スマートフォンアプリ/Webのデザイン作成に使えるデザインテンプレート MOONGIFT
  • PhotoshopでのRetina対応リソースの生成を自動化·Retinize It MOONGIFT

    Retinize ItはPhotoshop用アクションで、Retina対応のリソースを作成する作業を自動化します。 iPhone 4S以降、Retinaディスプレイに対応したリソースの作成が求められるようになりました。都度2倍にして@2xをつけて保存が面倒に感じているデザイナーの方はRetinize Itの利用をお勧めします。 Photoshopアクションが登録されました。 元画像。 保存ダイアログが出ます。この後、2倍の画像も保存確認されます。 2倍の画像が保存されました。 こちらは等倍。都度拡大して保存といった手間がなくなります。 Retinize ItはPhotoshopのアクションです。元の画像に対して等倍の画像をWeb用として保存させ、次に2倍に拡大したものをまた保存させます。繰り返しの作業は面倒ですが、F6がショートカットキーとして登録されていますので、作業負担が楽になるのでは

    PhotoshopでのRetina対応リソースの生成を自動化·Retinize It MOONGIFT
  • これからPhotoshopでWebデザインをしたい初心者さんのためのツールパネルとかいろいろ

    Webデザインをするときにいつも使っている Photoshop ... あまりに高機能なので、ツールパネルだけでもボタンがいっぱい。はじめて Photoshop に触れる人にとってはちょっと難解なインターフェイスかもしれません。Photoshop を始めたばかりの初心者さん向けの、ツールパネルのまとめです。 Webデザインするときに、いつも使っている Photoshop。でも当にはじめて Photoshop を使い始めた人にとっては、Photoshop の画面に並んだ、たくさんあるボタン類からして意味がわからないんだと思います…。そー思ってツールパネルのボタンを端から見ていくと、自分でもコレなんだっけ?っていうのがいくつか …。 実は最近友達が Photoshop を使い始めました。全く Photoshop を使ったことのない彼女に使い方を教えてあげるって約束しちゃったので …。 そんな

    bluele
    bluele 2014/01/11
    入門
  • Webデザインで使えるフリーシームレステクスチャ100枚 – poyosi.com

    初めまして、@poyosiです、こんにちは。 Webデザインなどで壁紙を作る際に便利そうなテクスチャを100枚作りました。 このブログの制作や、他Webサイト制作でノイズがかった背景や、ちょっと変わった背景が必要だったので自分用にちょっとした加工で簡単に背景が作れるテクスチャを色々用意しました。 大きめの画像にしたので、Webサイトの背景などで繰り返し(リピート)使用しても繰り返し部分が目立たなくなるようになっています。個人利用可、商用利用可なので、もしよろしければWebサイトの背景やバナーの背景を作るときに自由に使ってみてください。 テクスチャ一覧 Photoshopでテクスチャを使ってみよう 1:パターンを登録しましょう。 パターンに登録したいテクスチャ画像をPhotoshopで開きます。 「編集」 > 「パターンを定義」からパターンを登録します。 2:背景画像を作ってみましょう。 新

  • Web屋のーりー » WebデザイナーとPhotoshop【前編】 君はいかにしてPhotoshopをWebデザインツールとして用いるか?

    Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/nori44/nori44.jp/public_html/blog/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524 ウェブデザイナーを目指す初心者さんにとって、「ウェブサイトって、どうやってデザインしているの?」というのは大きな疑問ですよね。 じつは、多くのウェブデザイナーさんは、Photoshopでデザインをしているんです。 この記事では、どうやってPhotoshopを使えばウェブデザインができるのかを、PSDのサンプルを使って手順

    Web屋のーりー » WebデザイナーとPhotoshop【前編】 君はいかにしてPhotoshopをWebデザインツールとして用いるか?
  • 数分で簡単にできる、写真画像をミニチュア風のチルトシフトにするPhotoshopのチュートリアル | コリス

    元の画像 Stock photo: Observation Point 写真画像にミニチュア風のチルトシフトのエフェクトを適用する方法 Step 1 まずは、写真の選別です。 写真はどのタイプのものでも構いませんが、できるだけ高い位置から撮影している写真がいいです。 元となる画像 Step 2 フォーカスのポイントを指定します。 クイックマスクモード[Q]にし、グラデーションツール[G]を選択します。前景がブラック、背景がホワイトであることを確認してください。使用するグラデーションは反射したタイプを使用します。 グラデーションツールでフォーカスのポイント選択します。

  • Photoshop VIP

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

    Photoshop VIP
    bluele
    bluele 2012/12/10
    参考にしたい
  • アイコンを作ってみませんか。高品質アイコンの作り方チュートリアル50個まとめ

    アイコンはデスクトップで目立つ存在で、使いやすい様にアイコンを変更している人もいるのではないでしょうか。 Photoshop VIPでも、これまでにたくさんの無料アイコンを紹介しています。 → 無料アイコンダウンロードコーナーへ どんだけアイコンを探しても見つからないアイコン、それが自分で作成したオリジナルアイコンです。 今回は、そんな高品質なオリジナルアイコンを作ることができる、50のチュートリアルをまとめた「50+ High Quality Icon Design Tutroials (Part1)」をご紹介します。 どれもWeb2.0を飛び越えて、立体的なアイコンの作り方ばかりが紹介されており、その中で特に気に入ったものをいくつかピックアップしてみました。 基的に英語表記となっていますが、画像ファイルがステップごとに掲載されているので、比較的分かりやすいものをセレクトしています。

  • 1