タグ

photoshopに関するblend27のブックマーク (54)

  • デザインのアイデアが豊富!最近のWebデザインで採用されているレイアウトやUI要素が揃った素材のまとめ

    最近のWebデザインは、フラットデザインやマテリアルデザインが少しずつ進化し、コンテンツにフォーカスされたシンプルなデザインが定着してきました。写真は大きく、テキストは読みやすく、空白スペースは大胆に配置されています。 レイアウトは縦長型や分割型、カード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインをよく見かけます。 最近のWebデザインで使われているさまざまなテクニックの勉強になるレイアウトやUIコンポーネント・要素が揃ったPhotoshop用、Sketch用の無料素材を紹介します。

    デザインのアイデアが豊富!最近のWebデザインで採用されているレイアウトやUI要素が揃った素材のまとめ
  • Photoshopのコンテンツに応じる塗りつぶしで不要なモノを消すコツ

    Photoshopで「画像の中にある●●を消す」といった作業は画像編集でよくある作業だと思います。 togetterで「初心者のPhotoshop加工はプレデターが生まれる→「例えが秀逸」「あるある」と腹を痛めるTL」というまとめがありました。その最初のツイートがこれ。 僕がPhotoshopを教えていて一番好きな瞬間は、「○○を消せ」系の初心者向け課題で、必死で作業すればするほどプレデターを次々に生み出して絶望していく生徒に「もうお前の地球は終わりだ」と講評することです。 pic.twitter.com/gEpXGVx7xo ? レイニー氏 (@moeebu) 2016年3月8日 おもしろい例えですね。スタンプツールで補正をすると、同じパターンが連続してしまうパターンです。 Photoshopで●●を消す作業の基はスタンプツールですが、スタンプツールでチマチマ消す時間もない!という方に

    Photoshopのコンテンツに応じる塗りつぶしで不要なモノを消すコツ
  • Photoshop用無料のレイヤースタイル1000+で作業時間を大幅短縮 | co-jin

    Photoshopでの作業を劇的に効率化してくれる無料のレイヤースタイルをご紹介します。 これさえあれば、スタイルボタン1つ押すだけで、手の込んだレイヤースタイルをオブジェクトやテキストに適用することが可能になります。 こんな便利なものを使わない手はありません。 今回はそんな便利なPhotoshop用レイヤースタイルのうち、無料で利用できるレイヤースタイルを1000以上集めてみました。 これらのPhotoshop用レイヤースタイルで作業時間を大幅に短縮していただければ幸いです。 ダウンロードしたレイヤースタイルをPhotoshopで利用する方法 具体的にPhotoshop用のレイヤースタイルをご紹介するために、ダウンロードしたレイヤースタイルをPhotoshopで利用する方法をご紹介します。 まだ、使ったことがないという方は参考にしてみてください。 aslファイルをApplications

    Photoshop用無料のレイヤースタイル1000+で作業時間を大幅短縮 | co-jin
  • PSDからiOSのソースコードを生成してくれるMacアプリ「Replia」 - ぬんびりぶろぐ

    Repliaというアプリのアイコンと、サンプルPSDを描きました! デザイナーにも開発者にもうれしいアプリなので、使い方を解説します Repliaとは RepliaはPhotoshopのデザインからiOSのソースコードを生成してくれるアプリです まずは30秒の使い方動画をみてください!魔法みたい Repliaで書きだしたプロジェクトファイルをSimulatorで見るとこんな感じ! あっという間にSimulaterで見られるかたちに整えてくれるのはスゴイ…スゴイよ… ざっくりしたアプリ使用の流れは Repliaでpsdを読み込む Xcodeのプロジェクトファイルに書き出し です セットアップ方法 Repliaを使うにはAdobeのPhotoshopで設定が必要です フォトエディター | Adobe Photoshop CC無償体験版ダウンロード 公式ページのガイド:Guide - Repli

    PSDからiOSのソースコードを生成してくれるMacアプリ「Replia」 - ぬんびりぶろぐ
  • Photoshop Tips/波形フィルタを使った泡の表現

    水中に漂う泡を作ってみます。 窓につく水滴や、葉っぱの上のしずくなどの描写にも応用できると思います。 まず、元になる泡を作成します。 Photoshop上で、背景を黒にした100×100ピクセルの新規画像を用意し、新規レイヤーを作成し、楕円選択ツールで円の選択範囲を作ります。(図左上) 選択範囲をアクティブにしたまま、白のブラシツールで泡のフチになる部分をわりとラフな感じでなぞります。 (図右上) 映り込みにあたる部分は、ブラシツールの不透明度を50%に落として、他の部分より薄くなるように塗ります。(図左下) ハイライトを2箇所、左上と右下に入れます。(図右下) 全くこの通りでなくても構いませんし、それらしく見えればリアルに描く必要はありません。

  • 50 Best Text Effect Tutorials Graphic Design Junction

    Best of 2015, Photoshop and Illustrator text effect tutorials are for those who really love to make outstanding typography, calligraphy type artwork. Big list of text effect tutorials which can really helpful to improve your typography skills. Photoshop text effect tutorials, Learn to create 2D, 3D, Retro & Vintage text effects in Photoshop tutorials. These tutorials are very useful to learn the m

    50 Best Text Effect Tutorials Graphic Design Junction
  • Group Layer Renaming

    Hey! I made a script. Again. This time (I hope) it will help you with group layer renaming. Script can append, prepend or replace layer name with entered text. Should be useful if you are layer organization geek or if you use applications like Slicy or new Photoshop CC feature called Image Assets, that can export layers using tags in their names. Download Requires Adobe Photoshop CS5, CS6, CC2014

    Group Layer Renaming
  • 使い方・活用法 - スライスより便利!画像アセット機能でWeb用にパーツを保存する | Adobe Creative Station

    Access Adobe Creative Cloud apps, services, file management, and more. Sign in to start creating.

  • Ink. Specs for your Photoshop Layers

    Handling mockups to developer teams can be tricky. As a designer, sometimes I wrongly assume that everyone knows about how photoshop shapes, effects, and typography works. Sometimes lack of specifications leads to inaccurate front-end outputs. Sometimes the final product just doesn’t look exactly as expected. Ink is a plugin that helps you providing few extra important informations about your mock

  • 新着記事

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

    新着記事
  • ディスプレイの調整

    ディスプレイは、製品ごとに色の再現性が異なります。 機種が違うと、もちろん色も異なるのですが、同じ機種でも 個体差があったりします。 もっと端的には、みなさんがお使い のディスプレイも、 使用年数が経つに従って、性能が劣化するため 購入当時とは、 色の再現性が異なってきていることでしょう。 ディスプレイの表示品質に整えることを、ディスプレイの キャリブレーションと言います。 キャリブレーションは、コンピュータで画像を扱う上で、 まず最初にすべき大切なことです。 せっかく、綺麗に取り込んだ 写真を、他のディスプレイでみたら、がっかり! なんてことのないように しっかりとキャリブレーションを行いましょう! また、ディスプレイとプリンタのカラーマッチングを行うためには、 できるだけ正確に キャリブレーションを行って できるだけ 正確なICCプロファイルを作成することが重要になります。 Photo

    ディスプレイの調整
  • Page Not Found • Namecheap.com

    DashboardExpiring SoonDomain ListHosting ListPrivate EmailSSL CertificatesSubscriptionsMy OffersNEWProfile Oops! This page cannot be found.Unfortunately, this page is unavailable. But don’t worry, we can get you right back on track! Go to homepage

  • 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
  • ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

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

    ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
  • Photoshopで変数を使って見出し画像リソースを管理する | A Day in the Life

    December 10, 2008 2エントリー連続でPhotoshop関連になります。今回は左のような見出し画像を書き出すリソースファイルを変数を使って管理します。 このような見出し画像を作成する場合、通常だと背景画像レイヤーを複数枚と見出し名テキストレイヤーを大量に作らなければなりません。私も今まではテキストレイヤーだらけになっていました。このような余分なレイヤーを作らないでリソースを管理出来る方法が変数を使ったリソース管理法になります。 簡単に変数を使った管理法の説明をすると、背景画像レイヤーを数種類用意し、日語名の見出しと英語名の見出しはCSVファイルで管理すると言う方法になります。 それでは詳しく説明をしていきます。 今回作るファイルのレイヤー構成は左のようになっています。 背景画像フォルダには背景画像が4種類。そして見出し名を設定するテキストレイヤーが日語用と英語用の2種類

  • Retinize It - Photoshop actions for slicing retina assets @2x @3x

    What it includes? There are 3 actions in the package: – 1x is for for slicing selected layer(s)/group only, great for a quick export of the element in the original size. - 1x, 2x is for slicing selected element + it’s scaled by 200% version. Perfect for Retina-ready websites. - 1x, 2x, 3x for the selected element + scaled 200% + scaled 300%. Perfect for iOS assets. What should I keep in mind? Work

  • PhotoshopってFireworksと違ってここがダメだよねって思ってたけど使い方知らないだけだった件

    Posted: 2013.04.23 / Category: WebDesign WebデザインツールとしてFireworksとPhotoshopがよく挙げられますが、私はFireworksをメインに使用しています。理由はFireworksと比べるいろいろと不便な点があったからなのですが、ちょっと調べたらいろいろと知らないだけだったのでメモしておきたいと思います。 Photoshopってキャンバスで直接選択できなくね? Fireworksは選択ツールでキャンバスでオブジェクトを直接選択できるのに、Photoshopはレイヤーから選択しないといけないから直感的じゃないですよね。いえいえ直接選択もできますよ。 左パレットから「移動ツール」を選択ます。そのままだと選択されているレイヤーを移動させるだけのツールですが、「cmd + 左クリック」することで選択することができます。 ドラッグすれば範囲

    PhotoshopってFireworksと違ってここがダメだよねって思ってたけど使い方知らないだけだった件
  • ワンランク上のデザインにはかかせないPhotoshopの文字詰め「カーニング・トラッキング」のまとめ

    こんにちは。今日も元気にPhotoshopと戯れます井畑です。 今回はPhotoshopの文字詰めに使うツールについてちゃんと調べてみました。 今では息をするように文字詰めをしていますが、デザイン初めたての時は勝手が分からず苦労しました…Photoshopの文字詰め♪ 基的なことがほとんどなので、知ってる人にとっては当たり前のことですが、おさらいによろしければご覧ください。 それではどうぞ! ちょっと待って文字詰めって何? まずは文字詰めが何か分からない人の為に軽く説明しておきますね。 ワンランク上のデザインにはかかせない文字詰め 文字詰めとは読んで字のごとく、文字と文字の間を詰めてバランスをとる作業のことです。 通常文字を打っただけでは「ベタ組み」と呼ばれ、基的に文字と文字の間が空きすぎています。それを詰めてデザインのバランスをとります。 WEBの性質上テキストデータの文字詰めは難し

    ワンランク上のデザインにはかかせないPhotoshopの文字詰め「カーニング・トラッキング」のまとめ
  • 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のシェイプでできること。
  • 角丸の作成・修正の強力な武器になる機能拡張 -Corner Editor | コリス

    Corner Editor Corner Editorの主な特徴 Corner Editorのインストール Corner Editorの使い方 Corner Editorの主な特徴 旧版の全ての機能が使え、更に多くの機能を備えています。 直線で作成された角に角丸作成・修正ができます。 角を一つだけでも、複数同時でも、複数別でも簡単に角丸を適用できます。 角の種類は角丸だけでなく、計4種類のスタイルに増えました。 多角形にも対応しました。 一度設定した内容をセーブできるようになりました。 パスがスムースになりました。 各コーナーにラベルを付与できるようになりました。 Corner Editorのインストール インストールは簡単です。 ※Win/Mac共通です。 ダウンロードして解凍した「Corner Editor.jsx」を、Photoshopフォルダ内の「/Presets/Scripts/