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）が可能になり
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の苦手なところ
Photoshopでスライスせずに「画像アセット生成」でラクチンに画像を書き出す方法 - ELLY'S HATENA BLOG
2016 - 06 - 14 Photoshopでスライスせずに「画像アセット生成」でラクチンに画像を書き出す方法 design 画像アセット生成 とは、切り取りたい画像をいちいちスライスせず、レイヤーに「 ◯◯◯.jpg 」など、レイヤー名+拡張子などを書くことにより、自動でかき出してくれる機能です。 スライスでも慣れていればこっちのほうが使い易いかもしれませんが、スライスずれで不要な部分がついていたり、切れたり、ミスが多いのは事実です。 それなら便利で新しい機能を使いこなしてみましょう。 基本は2つの操作 基本は2つのみです。 1.レイヤー名の後ろに拡張子をつける。 2. [ファイル]→[生成]→[画像アセット] にチェックを入れて書き出す。 チェックを入れた後でも、デザインを上書き保存したタイミングで最新のデータが自動で書き出されるので、修正するたびにチェックの付け外しをしなく
Photoshopを使う時に欠かせない、絶対オススメのプラグイン・機能拡張のまとめ
Photoshopはデザインに欠かせない便利なツールですが、そのまま使っているだけではもったいないです！ Photoshopでの作業がさらに捗る便利なプラグイン・機能拡張を紹介します。 ここで紹介するものは、当方の日本語環境（Win/Mac, CC 2015）で利用しています。 よく使うドキュメントはテンプレートとして管理 レイヤー数が多くても目的のレイヤーにすぐにアクセス ガイド引きの定番「GuideGuide」は大幅バージョンアップ ガイド引きは「QuickGuide」も欠かせない スクリーントーンや集中線を生成する「Comic Kit」 磨りガラスのようなエフェクトを与える「Blur Like Jony」 カラー・テキスト・フォントサイズなどに変数が使える「Ditto」 ガイドライン作成に欠かせない「Ink」も大幅バージョンアップ 複数の要素を変形させる時に位置はそのままで レイヤー
見やすく綺麗なPSDをつくるためのポイントや覚えておきたい便利機能 10 - NxWorld
自分が普段からどちらかといえばデザインよりもコーディングなどの作業が多いので、中にはただのコーダー側の意見や愚痴っぽいのもあるかもしれませんが、Photoshopでデザインする際に見やすく綺麗なPSDにすることができると思うポイントや知っておくと便利だと思う機能をいくつかあげてみました。 最近だと特にレスポンシブが関連してIllustratorやSketchを使ってるという人も多いとは思いますが、デザイン制作時にPhotoshopを愛用しているという方は参考にしてみてください :) あくまで個人的に思ったことなので、バリバリのデザイナーさんとかで「もっとこうしたら良くなるよ！」とか「それはしない方が良いのに...」みたいな意見があればアドバイスやツッコミ大歓迎です。 ここで紹介している内容やキャプチャは「Adobe Photoshop CC 2017」を使用した想定のものになり、バージョン
Photoshopの素敵グラデーションは無料設定ファイルを使うと超簡単！
Photoshopで何か作っていると、質感を出すためにグラデーションを多用すると思います。でもいちいち自分で最初からグラデーションを設定していたら、時間がかかって仕方がありません。そんな時、無料のグラデーションのプリセットファイルをベースに使えば、作業がすごく短縮されるのでオススメです。 無料グラデーションファイルのダウンロード gradients – deviantART 【deviantART ダウンロード方法】 右サイドエリアに「↓ Download File」というリンクがあります。 わかりにくいので注意して下さい。 Photoshopのグラデーションの無料プリセットファイルはいろんなところからダウンロードできますが、数が多い「deviantART」がおすすめです。 ここで赤系・青系・緑系など、ある程度どんなカラーでも対応できるように、一通りのカラーのグラデーションをダウンロードし
作業効率あがった！Photoshopの使い方と小技まとめ
作成：2013/12/2 更新：2014/11/01 無料素材 > 画像補正するときに、どうすれば良かったのか思い出せない。またあの方法を探し出さないといけない。そんなこんなで、Photoshopの便利な小技や、写真に関する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 画像補正 １．覚えておくと便利な小技 知っておきたい基本知識 ２．被写界深度（ひしゃかいしんど） ３．バンディング（トーンジャンプ） ４．白とび・黒つぶれ ５．ジャンプ率 ６．視覚度 ７．角版／切り抜き版の使い方 ８．画像フォーマット 使い方 ９．基本的な機能の使い方 画像補正 １．覚えておくと便利な小技 写真をPhotoshopで補正するときに役に立ちそうな小技をまとめました。異色なものもありますが、筆者が良くアクセスしてしまうもの一覧です。 ゴミを発見する／微細なロー
PhotoshopってFireworksと違ってここがダメだよねって思ってたけど使い方知らないだけだった件
Posted: 2013.04.23 / Category: WebDesign WebデザインツールとしてFireworksとPhotoshopがよく挙げられますが、私はFireworksをメインに使用しています。理由はFireworksと比べるいろいろと不便な点があったからなのですが、ちょっと調べたらいろいろと知らないだけだったのでメモしておきたいと思います。 Photoshopってキャンバスで直接選択できなくね？ Fireworksは選択ツールでキャンバスでオブジェクトを直接選択できるのに、Photoshopはレイヤーから選択しないといけないから直感的じゃないですよね。いえいえ直接選択もできますよ。 左パレットから「移動ツール」を選択ます。そのままだと選択されているレイヤーを移動させるだけのツールですが、「cmd + 左クリック」することで選択することができます。 ドラッグすれば範囲
Photoshop・これからのグレースケール画像のつくりかた
グレースケール変換の方法は多々ありますが、どうも「モード」→「グレー」がDisられる傾向があるようなのでそれは違うよ！というところから少し。 モード→グレーは結構優秀 （実際にはモードから変換するのではなくて、「編集」→「プロファイル変換」を勧めます。これだけは設定しておきたいPhotoshopショートカットキーの小ネタ） これを変換してみましょう。 (以下マウスオーバーでこの画像に変わります） モード変換グレー 他と比べると濃いのですが、色の濃度変換は最も感覚的に近いかと。PCの方はカーソル乗せたり外したりしてみてください。 参考：osakana.factory – グレースケールのひみつの３番目 どちらにしても、オフセット印刷向けに変換するのであればこの後の調整は「必須」です。これはどの方法でも同じです。 LabモードLチャンネル Lab変換後Lチャンネルのみ表示させ、そのままモード変
1クリックでレトロかわいくできるPhotoshopのレイヤースタイル素材のまとめ
テキストに1クリックで、レトロ風のかわいいエフェクトを適用できるPhotoshopのレイヤースタイルをpsd-dude.comから無料で利用できるものを厳選して紹介します。 Retro Layer Styles for Photoshop
美しいラインを描くPhotoshopのチュートリアルのまとめ
背景やアクセントにぴったりな美しいラインを描くPhotoshopのチュートリアルを紹介します。 壁紙素材：Energy flow background 以下、Photoshopのチュートリアルです。
Photoshopをもっともっと好きになる、テキストをかっこよく魅せるチュートリアルのまとめ -2012年版
Photoshopをもっともっと好きになる、テキストをかっこよく魅せるチュートリアルのまとめ -2012年版
【UI デザイン 練習用 - エアメール風】 - Webサイトのデザインをしよう
2014年8月17日 Photoshop, Webサイト制作, Webデザイン 「連載！実践で学ぶWebサイト制作ガイド」第四弾はAdobe Photoshopというツールを使って実寸のサイトデザインを作成します。Photoshopで説明していきますが、同様のグラフィックツールでもOK。Photoshopは体験版もあるのでぜひご利用ください。説明しやすいよう、簡単なデザインにしたつもりですが、すごく長くなってしまったような…。わかりにくくてすみません X( ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その4 目標：実際の幅にあったサイトデザインが作れる・Photoshopの基本的なツールを使った装飾ができる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 事前知識は以下の記事でおさらい！ これからP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
creative-tweet.net
新着記事
