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の新機能 ｜ Tips Note by TAM
10月にPhotoshop CC 2018が新たにリリースされました。 様々な新機能が追加されたということで、さっそくアップデート！ 今回は実際に使ってみて、Web制作者として便利だなと思った新機能をいくつかご紹介したいと思います。 目次 Photoshopでもコピー&ペーストが可能に！ 作業効率が上がる！レイヤーのコピー&ペースト 地味に嬉しい、書式なしでペースト 変幻自在！バリアブルフォント バリアブルフォントとは？ ちょっとした太さや斜きも柔軟に再現 ブラシ管理機能もさらに改善 手振れ補正で滑らかイラスト フォルダ分けで整理整頓 初心者でも扱いやすい曲線ペンツール Photoshopでもコピー&ペーストが可能に！ 作業効率が上がる！レイヤーのコピー&ペースト 今回からFireworksやIllustratorと同様にコピー（⌘／ctrl+C）＆ペースト（⌘／ctrl+V）が可能になり
Chrome で cursor: pointer を !important しても効かない問題。原因は Photoshop にあり
Chrome で cursor: pointer を !important しても効かない問題。原因は Photoshop にあり ブログのリンク（aタグ）にマウスカーソルをホバーするとデフォルトの矢印のアイコンになっているのに気づきました。通常であれば、指アイコンになりますよね。（まぁスマホはアレですが。） 何かスタイルを弄った時におかしくなったのか、はたまたプラグインのアップデートなどでおかしくなったのか、いずれにせよサクッと修正する予定が全然カーソルが指アイコンにならず。 最終的にcursor: pointer !important;としても変わらないので、調べてみたところ、Photoshop を立ち上げていると、ブラウザのカーソルがデフォルトから変わらないバグがあるらしいことがわかりました。 cursor が変わらないバグが発生した私の環境 macOS Sierra 10.12.3
Photoshop CC 2018 からレイヤーを複製だけでなくコピペできるようになった - ろくデブログ
2017年10月、PhotoshopCCにいろいろな新機能が追加された。内容は次のページにまとまっているが、中でも「レイヤーをコピー＆ペーストできる」ようになったのが個人的に嬉しい。レイヤーのコピー＆...
空レイヤー名にルールを書くだけで Photoshop の自動アセットが劇的に楽になる - ろくデブログ
Photoshop CC の便利な画像書き出し機能、自動アセット。レイヤー名に必要な情報を入れておくと自動で書き出してくれる。しかし、Ratina対応などで複数サイズの画像を書き出そうとすると hog...
Photoshopの作業効率を上げるために覚えておきたいショートカット - NxWorld
最近ではXDやSketchを使う人を目にすることも多いですが、まだまだデザインカンプをはじめ、使っている人も多いと思うPhotoshopで覚えておきたい便利なショートカットを紹介します。 基本的なものが中心なので、デザイナーでバリバリ使用しているという人よりも、全体的に普段はデベロッパーでたまに触ることがあるぐらいの人やこれからPhotoshopを使い始めたい人向けです。 全部を一度に覚えるのは難しいかと思いますが、普段よく使う操作や機能を少し覚えておくだけでも、Photoshopを使った作業の効率アップに繋がると思います。 ここで紹介しているのは「Adobe Photoshop CC 2017」を使用した想定のものになり、バージョンによっては紹介している動きと異なる場合があります。 USキーボードを使用している場合、紹介しているものをそのまま使用できない場合があります。 その場合は、Ph
Photoshopパネルをツールに応じて切り替える、Workspace Switcherが超便利！狭い画面でも快適に！Illustrator/InDesign版も！
Photoshopパネルをツールに応じて切り替える、Workspace Switcherが超便利！狭い画面でも快適に！Illustrator/InDesign版も！ Photoshop用神！エクステンション、Workspace Switcher 『手抜きLab＠DTPの現場』のten氏による超便利Extensionです。 これを使うと…… ▼普段使いのパネルと、 ▼テキストツール使用時のパネルと、 ▼パスツール使用時のパネル、などを ツールに応じて自動的に切り替えることができます！ ノートPCの狭いモニタでも、使用ツールに必要なパネルを常時展開できます。画面が狭いと、パネルってアイコン化していても結構邪魔なんですよね。いちいちクリックして展開するのも面倒だし。 つかいかた CCの場合は… Photoshopウインドウメニューから、「機能拡張をオンラインで参照…」を選択します。Adobe A
Photoshopはもう使わない!? 場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選
CSS3では、Photoshopのようなフィルター効果を再現するイメージフィルターという機能があります。 Photoshopを使用すれば画像加工を行うことができますが、外出先などで画像の編集が行えない……そのような経験、Photoshopを使用するデザイン関連の仕事をされている方なら一度や二度ありますよね。そんな時に、少しのコードをCSSに足すだけで画像編集できてしまう機能がイメージフィルターです。 今回は、画像の明度や彩度などを簡単に調整することができる、CSSイメージフィルターについてご紹介します。 とてもシンプルなコードばかりですので、使えそうなものがあれば、早速試してみてください。 CSSフィルターができること ～基本機能「９」～ 1. レンズで覗き込むようにぼかしを加える「blur」 filter: blur( ぼかしの長さ ); blurを指定すると、ガウシアンぼかしタイプのブ
知っておくと便利なPhotoshopのテクニック10選
Aaron Jackson氏は、Pearson Realty社のグラフィック・Webのデザイナーです。フレズノ・シティ・カレッジとアートの専門学校で、グラフィックとWebデザインを習得しました。 UIデザイナーとして、長年のAdobeユーザーとして、私は今でもアイコン、Webやモバイルのモックアップを作成するのにPhotoshopを愛用しています。 過去５年間にわたり、日々のデザインワークを時間短縮するテクニックを磨いてきましたが、今回その中から、いくつかピックアップして紹介します。 １. ワンクリックでレイヤーを塗りつぶす 選択したレイヤーを現在の前景や背景カラーで塗りつぶすことができ、確実に時間の節約になります。 MAC：Alt+Backspace （前景カラー） または Cmd+Backspace （背景カラー） WINDOWS：Alt+Delete （前景カラー）または Ctrl+
プロのデザイナーが実践している！PhotoshopでWebデザインを素早く、効率的にするための8つの方法
PhotoshopでWebデザインのワークフローを効率的にするために、プロのデザイナーが実践している8つのテクニック・方法を紹介します。 Adobe CCのライブラリをもっと活用しよう、と思いました。 8 ways to design sites faster in Photoshop 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. ファイル管理のポイントは構造化 2. CSSフレームワークは勉強になる 3. PSDのレイヤーはコンテンツごとにフォルダ分け 4. よく使う操作はショートカットを覚える 5. Adobe CCのライブラリは使わないと損 6. イメージとベクターはスマートオブジェクトで 7. スタイルガイドをどう活用するか 8. コーダーと、そしてチーム内での共同作業 まとめ: デザインは正直に 1. ファイル
WEBデザインにIllustratorを使うと幸せになれる8つのポイントと注意する点 - 株式会社bridge
今までWEBデザインをする際には、Photoshop・Fireworksを使用していたのですが、最近になってIllustratorもいいなと思うようになってきました。 今回はWEBデザインでIllustratorを使用するとどんなメリットがあるのかということと、Illustratorの苦手分野を書いておきたいと思います。 https://twitter.com/YOSHI_YANO/status/828162720599941120 最初はPhotoshopを使っていた 〜これまでの僕のWEBデザインツールの流れ〜 まず最初にWEBデザインをはじめた時、Photoshopを使用していました。一昔前はWEBデザインといえばPhotoshopを使用するのが一般的だったので当然の流れだったのですが、使っているうちにPhotoshopの苦手分野がわかってきました。 Photoshopの苦手なところ
Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 以前、デザイナーもりたの、デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみたという記事が公開されましたね！ こんな風に、最近LIGのデザイナー＆フロントエンド間では、いかにお互いの仕事をスムーズにするかという話題が増えています。 まだまだ模索中ではありますが、今回は、これを知っておけばお互いにとってハッピーなのでは？というPhotoshopの機能や工夫の豆知識をご紹介したいなと思います。 フロントエンドの方にぜひ知ってもらいたい！というのはもちろんですが、デザイナーの方もこれを読んで気遣いがチラ見えするPSDを作れるようになったら、明日から職場の空気が和やかになるかもしれませんね。 その気遣い、伝わってないかも。 デザイナーは普段Photoshopを使っていて自分の使いやすいようにプラグインを入れていたり、さまざまな機能を駆使してい
Photoshopでスライスせずに「画像アセット生成」でラクチンに画像を書き出す方法 - ELLY'S HATENA BLOG
2016 - 06 - 14 Photoshopでスライスせずに「画像アセット生成」でラクチンに画像を書き出す方法 design 画像アセット生成 とは、切り取りたい画像をいちいちスライスせず、レイヤーに「 ◯◯◯.jpg 」など、レイヤー名+拡張子などを書くことにより、自動でかき出してくれる機能です。 スライスでも慣れていればこっちのほうが使い易いかもしれませんが、スライスずれで不要な部分がついていたり、切れたり、ミスが多いのは事実です。 それなら便利で新しい機能を使いこなしてみましょう。 基本は2つの操作 基本は2つのみです。 1.レイヤー名の後ろに拡張子をつける。 2. [ファイル]→[生成]→[画像アセット] にチェックを入れて書き出す。 チェックを入れた後でも、デザインを上書き保存したタイミングで最新のデータが自動で書き出されるので、修正するたびにチェックの付け外しをしなく
Photoshop CCの知ってると作業がサクサク快適になる時短テクニックのまとめ
Photoshopって知れば知るほど、使えば使うほど、便利で欠かせないツールですよね。そんなPhotoshop CCの実作業が快適になる時短テクニックを紹介します。 例えば一時的にスポイトツールを使う時、どのように操作していますか？ 「I」を押してスポイトツールに切り換える時に「I」を長押しで使うと、「I」を離した時に元のツールに戻すことができます（全ツール対応）。戻せるのはスペースバーの時だけではないんですね。 まだまだ知らないことばかりです。 28 Powerful hidden tips, tricks 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ※各ショートカットは、OS X用です。 Windowsの場合は、下記のように置き換えて利用してください。 command = Ctrl option = Alt delete =
画像の書き出し作業を圧縮する Photoshopデザインのポイント ｜ Tips Note by TAM
Photoshopをメインツールとして使い始めて数年になりますが、ここ最近のバージョンアップで使用感が大きく変わってきたなぁと実感しています。 特にウェブデザインのためのツールとしては、よりマークアップへの連携がしやすい方へと進化していると思います。 なかでも、スライスを使わずに画像の書き出しができる画像アセット機能のすばらしさについては、言うまでもありません！ マークアップとの連携を意識してデザインデータを作ると、マークアップの作業はかなり圧縮されます。 画像アセット機能をはじめとするウェブデザインツールとしてのPhotoshopの機能強化で、特にその傾向は顕著になってきていると思います。 もちろん、デザイナーだけでなくマークアップ側でも、知っておくとより作業がラクになります。 そこで今回は、普段デザインもマークアップもしている私が、デザインデータを作る際に工夫していることをご紹介します
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photoshopの新機能を見る - Adobe
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
便利すぎ！Bootstrapベースのデザインカンプ作成がびっくりするほど簡単にできてしまうPhotoshopの機能拡張 -Bootcomp
