Adobe XDとPhotoshopのアセット連携が便利! 快適なデザイン制作フローを実現しよう - ICS MEDIA
Adobe XDがデザインやプロトタイプのツールとして広まっていますが、Photoshopなど他のデザインツールとの使い分けや連携に悩んでいるウェブデザイナーの方も多いのではないでしょうか？ この記事では、デザインフェーズにおいてXDとPhotoshopを併用してデザインする方法を紹介します。 Photoshop単体で最後までデザインすることもできますが、XDと連携することによって以下のような恩恵を受けられるようになります。 XDの機能「リピートグリッド」で作業効率をアップ プロトタイプで実際の動作をシミュレーション URL共有でフィードバックや修正のサイクルコストを短縮 XDの強みである動作の軽快さを利用して全体の画面を見通す PhotoshopとXDを行き来してデザインする場合 Photoshopでパーツをデザインし、XDでレイアウトする方法を紹介します。 Creative Cloud
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 | スペースマーケットブログ
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 デザイナーの横井です。こんにちは！ 猫飼いなのですが猫に顔をうずめるのが難しい季節になってまいりました（毛まみれ） 久しぶりのデザイン記事となりましたが、今日は弊社デザインチームが行ったAtomic Designのシステム化の紹介と失敗体験、そしてその道のりを、赤裸々にご紹介しちゃいたいと思います。 既に完成したデザインのコンポーネント化に悩んでいる方々の参考に、少しでもなれば幸いです。 初期のスペースマーケットデザイン ゴリゴリのPhotoshopデザインだった時代 弊社のメインサービスである、スペースマーケットのデザインは約3年前にリニューアルリリースされました。 当時は全てPhotoshopでデザインされ、１ページにつき１ファイル、スマートフォンもPCも別フ
ろくでブログ
Adobe XDが台頭してきていますが、まだまだPhotoshopでデータ作成が必要な場面も多いです。特にレスポンシブデザインの制作では、PC、タブレット、スマホそれぞれのデータを用意する必要がある一...
Photoshop CC 2018 からレイヤーを複製だけでなくコピペできるようになった - ろくデブログ
2017年10月、PhotoshopCCにいろいろな新機能が追加された。内容は次のページにまとまっているが、中でも「レイヤーをコピー＆ペーストできる」ようになったのが個人的に嬉しい。レイヤーのコピー＆...
見やすく綺麗なPSDをつくるためのポイントや覚えておきたい便利機能 10 - NxWorld
自分が普段からどちらかといえばデザインよりもコーディングなどの作業が多いので、中にはただのコーダー側の意見や愚痴っぽいのもあるかもしれませんが、Photoshopでデザインする際に見やすく綺麗なPSDにすることができると思うポイントや知っておくと便利だと思う機能をいくつかあげてみました。 最近だと特にレスポンシブが関連してIllustratorやSketchを使ってるという人も多いとは思いますが、デザイン制作時にPhotoshopを愛用しているという方は参考にしてみてください :) あくまで個人的に思ったことなので、バリバリのデザイナーさんとかで「もっとこうしたら良くなるよ！」とか「それはしない方が良いのに...」みたいな意見があればアドバイスやツッコミ大歓迎です。 ここで紹介している内容やキャプチャは「Adobe Photoshop CC 2017」を使用した想定のものになり、バージョン
これは面白い！Photoshopで高性能なHTML/CSSエディタが使えるようになるプラグイン -HTML Block
PhotoshopのPSD上に、HTMLとCSSのコードでエレメントを作成できるPhotoshopのプラグインを紹介します。 外部スタイルシートにも対応した高性能で、Bootstrapのエレメントをといった使い方もできます。 HTML Block HTML Blockの特徴 HTML Blockのダウンロードとインストール HTML Blockの使い方 HTML Blockの特徴 HTML Blockは、Photoshop CC2015 for OS Xのみ対応で、Webkitエンジンを利用してHTMLとCSSのコードでエレメントを作成できます。 ↓左パネルがエディタに見えるかもしれませんが、Photoshop上でのHTML Blockです。
Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS MEDIA
みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し（従来）」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 ［ファイル］→［書き出し］→［書き出
PhotoshopってFireworksと違ってここがダメだよねって思ってたけど使い方知らないだけだった件
Posted: 2013.04.23 / Category: WebDesign WebデザインツールとしてFireworksとPhotoshopがよく挙げられますが、私はFireworksをメインに使用しています。理由はFireworksと比べるいろいろと不便な点があったからなのですが、ちょっと調べたらいろいろと知らないだけだったのでメモしておきたいと思います。 Photoshopってキャンバスで直接選択できなくね？ Fireworksは選択ツールでキャンバスでオブジェクトを直接選択できるのに、Photoshopはレイヤーから選択しないといけないから直感的じゃないですよね。いえいえ直接選択もできますよ。 左パレットから「移動ツール」を選択ます。そのままだと選択されているレイヤーを移動させるだけのツールですが、「cmd + 左クリック」することで選択することができます。 ドラッグすれば範囲
Photoshopの効率化になるショートカットキー一覧とカスタム方法【2022年最新】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。ぼくは普段Photoshopを使うとき、極力ショートカットを使っているショートカット野郎です。 英語で言うところの「ショートカット」は、「近道」を表しているというのはみなさんご存知ですよね。方向音痴の方は別として……近道があれば、誰しも遠回りしようだなんて思わないはずです。 今回は、Photoshopの作業効率化におすすめのショートカットを一挙に紹介します。前半では基本のショートカットキー、後半ではプロ向けに選んだ意外と知られていない隠れショートカットも紹介しているので、ぜひ実践してみてください。 macの場合とWindowsの場合それぞれで記述しているので、該当する欄をご確認ください。 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もお
Photoshopでよく使うパーツをどのドキュメントでも利用できるようにするプラグイン -Pixel Dropr
Pixel Dropr 簡単に機能を説明すると、アイコンやパーツなどよく使うエレメントをリフィルと呼ばれるセットにし、Photoshopでどのドキュメントを開いても呼び出せるプラグインです。 上記のサイトでは動画も公開されています。 インストールしてみた！ Pixel Droprは有償のプラグインで、無料版のRefill Readerもあります。二つの違いは、オリジナルのリフィルを作成できるかできないかです。 上記はとりあえず無料版のRefill Readerです。 無料版のRefill Readerは配布されているリフィルを利用することができます。 リフィル配布サイト 配布サイトへはRefill Readerのパネルの左から2番目のボタン「load Refill」をクリックすると行くことができます。 プラグインのインストール Refill Readerのインストール方法を紹介します。 お
角丸の作成・修正の強力な武器になる機能拡張 -Corner Editor | コリス
Corner Editor Corner Editorの主な特徴 Corner Editorのインストール Corner Editorの使い方 Corner Editorの主な特徴 旧版の全ての機能が使え、更に多くの機能を備えています。 直線で作成された角に角丸作成・修正ができます。 角を一つだけでも、複数同時でも、複数別でも簡単に角丸を適用できます。 角の種類は角丸だけでなく、計4種類のスタイルに増えました。 多角形にも対応しました。 一度設定した内容をセーブできるようになりました。 パスがスムースになりました。 各コーナーにラベルを付与できるようになりました。 Corner Editorのインストール インストールは簡単です。 ※Win/Mac共通です。 ダウンロードして解凍した「Corner Editor.jsx」を、Photoshopフォルダ内の「/Presets/Scripts/
[Photoshop]レイヤースタイルの重なり方を研究する
私はフォトショップが好きです。webデザインも、バナー作成、ドットワーク、イラストワークもほとんどフォトショップです。 ですがこいつは人気者なので永遠の片想いが続いています。まあ一つのツールにばかりは構ってられないわけですが、せっかくですのでこのブログでときどきこいつのことを探っていきたいと思っています。 レイヤースタイルについてです 今回はこれについてちょっと考えてみました。 凄く便利な機能です。パターン等とも併用でき、一度しっかり作っておけばボタンや文字等のエレメントにつけた装飾がいくらでも再利用できます。フィルタといい、マスクといい、出会ったときの衝撃はそのままに、フォトショップはいつまでもドキドキさせてくれるヤツですね。 レイヤースタイルの構成 一応レイヤースタイルの各項目について軽く説明しましょう(別に知ってるよと言う人は次の節まで読み飛ばしてください)。 ドロップシャドウ その
![[Photoshop]レイヤースタイルの重なり方を研究する](https://cdn-ak-scissors.b.st-hatena.com/image/square/b811296f14066e5cb0ca4cbba47ba35a213c2c98/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F06%2Fphotoshop-layer-style-01-150x150.gif)
Photoshopユーザが今すぐFireworksに乗り換えるべき10の理由 | ベイジの社長ブログ
Webデザインにおけるメインのデザインツールとして多く使われているPhotoshopとFireworks。我々の業界内において、どちらの方がデザインツールとして便利か、という議論がよく行われますが、いずれか一つしか使いこなしていないユーザによる比較論ではあまり意味がないでしょう。日頃から使いなれているツールの方が使いやすい、と感じるに決まっているからです。ここで参考になるのは、両方のツールを同等に使った経験を持ち、かついずれにも過剰なこだわりや愛着を持ってないデザイナーの声なのではないでしょうか。 実は私自身はもともとPhotoshopでWebサイトのデザインを作っていました。しかし以前勤めていた会社でFireworksを使っていた人が多かったため、あるプロジェクトで一時的にFireworksを使ってみたところ、色々な面でFireworksの方が優れていると感じ、Fireworksに乗り換
みんなで使おう！Fireworks！ 〜Fireworksで画像最適化〜
自己紹介 株式会社EC studio でHTMLコーダーやってます、赤堀巴絵です。 EC studio デザインブログでコーダー向けネタやパフォーマンスアップネタを投稿してます。 Twitterは「tomo_e」でやってるのでよかったらフォローよろしくお願いします！ 最近は趣味でイラストを描いたりもしてます。 目次 FireworksとPhotoshopのPNG比較 png8アルファチャンネルでさらに軽量化！ FireworksとPhotoshopのJPEG比較 JPEGマスクで見せたい部分をキレイに！ まとめ FireworksとPhotoshopのPNG比較 実はPNGで同じ画像を書き出すならFireworksのほうが画像を軽く書き出せます。 チャンクという画像情報以外のその他の情報がPhotoshopのほうが多いからです。 実際、FireworksとPhotoshopのPNG8で書
CMYKラヴな方へのRGB補正のすすめ（追記あり） – やもめも
このエントリーは最新版があります。こちらもどうぞ 『まだCMYKで消耗してるの？〜大幅な色補正をCMYKで行ってはいけない理由〜 – やもめも』 いいわけ 印刷関係の方とお話していると、「とりあえずCMYKでないと感覚が掴めないよー」という方が多いかな、という印象を持ちました。WEBの人や合成大好きな方には今更なのでしょうが、ここではRGBでの補正を簡単に説明しようと思います。異論反論たくさん出ると思いますが、これをきっかけにRGBで触って慣れてもらえれば、というエントリですのでお手柔らかに。入ったJPEGをまずCMYK分解してから補正するぜ！な方向けのエントリです。 なぜRGBか フィルタが全部使えるぜ！とかいろいろ利点はありますが、印刷業に限って言うと きちゃない写真をいじくるのが楽になる！ とりあえずものは試し、同じ写真（暗いやつ）のCMYKとRGB版を用意して、トーンカーブで明るさ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
Ngi-d.net
新着記事
新着記事
http://webdesignmatome.com/web-tips/photoshop-shortcut
