ゲームUI素材の作り方まとめ【2020年6月後半】
6月中旬からはじめた「ゲームUI素材の作り方」画像が増えてきたので、振り返りの意味も込めてまとめました。 ちなみに、「ゲーム関連のデザインで何に興味があるか」というアンケートをとりました。結果は、下記の通り。 ボタンやゲージなどの「UIパーツの作り方」が最も多かったです。この辺りも考慮に入れて、作り方の1枚画像をアップしていこうと思っています。 最近、1枚画像芸になりつつありますが・・・ UI素材（ボタン、ゲージ他） 戻るボタンの作り方 これは、ゲームアプリ「連結だいすき」のゲームUIデザインをしたときに作成したボタンです。 属性アイコン（水）の作り方 ソシャゲでおなじみの属性アイコンです。戦闘時に敵と自分の属性で威力が変わるというゲームシステムはよく見かけますよね。 フラットボタン（光彩）の作り方 ゲームでも、フラット系のUIデザインが流行っています。今回は光彩を強めにつけました。こ
Photoshop CCの知ってると作業がサクサク快適になる時短テクニックのまとめ
Photoshopって知れば知るほど、使えば使うほど、便利で欠かせないツールですよね。そんなPhotoshop CCの実作業が快適になる時短テクニックを紹介します。 例えば一時的にスポイトツールを使う時、どのように操作していますか？ 「I」を押してスポイトツールに切り換える時に「I」を長押しで使うと、「I」を離した時に元のツールに戻すことができます（全ツール対応）。戻せるのはスペースバーの時だけではないんですね。 まだまだ知らないことばかりです。 28 Powerful hidden tips, tricks 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ※各ショートカットは、OS X用です。 Windowsの場合は、下記のように置き換えて利用してください。 command = Ctrl option = Alt delete =
Bootcomp｜Bootstrap × Photoshop CC 2015 エクステンション
�10倍ラクするデザインカンプ制作 Photoshop CC 2019に「Bootcomp」を導入すればWebサイトやアプリのデザインカンプ制作にかける時間を大幅に短縮することが可能です。 ダウンロードする フォーマット作成 Webサイトやアプリのデザインをスタートする際にまずはレイアウトのガイドを作成するなど事前準備に時間がかかっていました。 Bootcompを使えば１クリックでフォーマットが瞬時に作成されるのですぐにデザイン作業をスタートさせることができます。 画像挿入もワンストップ シェイプを作成してクリックするだけで画像挿入〜リサイズをワンストップで行うことができます。画像がまだ未定の場合は画像挿入をキャンセルすれば自動でダミー画像が挿入されます。ぶっこみ機能を使用すれば大量の画像もあっという間に配置することができます。
Photoshopを使う時に欠かせない、絶対オススメのプラグイン・機能拡張のまとめ
Photoshopはデザインに欠かせない便利なツールですが、そのまま使っているだけではもったいないです！ Photoshopでの作業がさらに捗る便利なプラグイン・機能拡張を紹介します。 ここで紹介するものは、当方の日本語環境（Win/Mac, CC 2015）で利用しています。 よく使うドキュメントはテンプレートとして管理 レイヤー数が多くても目的のレイヤーにすぐにアクセス ガイド引きの定番「GuideGuide」は大幅バージョンアップ ガイド引きは「QuickGuide」も欠かせない スクリーントーンや集中線を生成する「Comic Kit」 磨りガラスのようなエフェクトを与える「Blur Like Jony」 カラー・テキスト・フォントサイズなどに変数が使える「Ditto」 ガイドライン作成に欠かせない「Ink」も大幅バージョンアップ 複数の要素を変形させる時に位置はそのままで レイヤー
Photoshopのスマートオブジェクトを拡大して書き出すとぼける現象について - saucer
Photoshopのデザインカンプ上で、スマートオブジェクトを50％以下に縮小しておき、画像アセット生成などで200％にして書き出す手法があります。スマホなどの高解像度ディスプレイ対策としては定番ですね。しかし、ある条件下では、元の画像を50％以下に縮小しているにも関わらず、書き出し後の200％画像がぼけてしまうことがあります。この点について気になったので、少し整理してみました。（2016.4.15／注意点を追記） 2016.4.15／注意点を追記スマートオブジェクトの特長スマートオブジェクトは、拡大、縮小を繰り返しても劣化しないというのが特長です。もちろん、オリジナルのサイズより大きくする場合は別ですが、いったん縮小してから再び拡大しても、その都度オリジナルからピクセルを生成しますので、常に最適な画質が保持されるというわけです。 スマートオブジェクト入門～直しに強いPhotoshopデー
真っ暗な写真を「ラクに」きれいに明るく補正！Photoshopトーンカーブと描画モードの合わせ技
露出不足写真悩ましいですね、こんな暗いの入稿するんだ…なんて思ったり、しませんけど、しませんてば。 でももっと楽に明るくしてベースを作っちゃえばいつもの補正でいけるのになぁ、とは思いますよ…ね？ そこで！ 効果のほどをごらんください。 どうでしょ？むりくり明るくした感あまりありません。色もそれほど破綻してませんよね。 では、やり方。 ちょー簡単です。 いじょ。 トーンカーブやレベル補正などを描画モード「除算」で乗せるだけ、です。 （注意：描画モード「除算」の搭載はPhotoshop CS5以降です） 乗せた直後は、 こうなっちゃったり真っ白になったりするんでビビりますが、 シャドウポイントをそのまま、ぐいっと持ち上げると、どんどん色が出てきます。 一番上まで持ち上げると元の画像に。反応が敏感なので、トーンカーブをキーボード操作した方がいいですね。 ショートカットキーはこちらで→Photos
Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS MEDIA
みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し（従来）」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 ［ファイル］→［書き出し］→［書き出
デザイン設計に集中する時間を増やしてみよう - クックパッド開発者ブログ
こんにちは！ ユーザーファースト推進部のデザイングループのジョン・ジンホ(@img75)です。 前回、クックパッドのデザインプロセスについてご紹介しましたが、私からはクックパッドのデザインプロセスをより効率的にまわす為に、デザイナーとしてどのようなツールを活用しているのかを、今回は Adobe Photoshop CC のプラグインを中心にご紹介したいと思います。 デザイン設計に集中できる Photoshop などでの作業効率を向上させると、デザイナーにとって貴重な「デザイン設計に集中できる時間」が生まれます。それは結果的にクックパッドを利用してくださるみなさまにより良い機能をすばやく提供できることにつながるので、私はいつもデザインするにあたって不必要な時間を減らす努力をしています。 最近、私は「撮るレシピ」（Android/ SPweb版）のデザインを担当しました。 「撮るレシピ」は、こ
Photoshopがもっと便利になるすごい機能拡張・プラグインのまとめ
Photoshopは標準機能だけでも便利なツールですが、もっともっと便利になる機能拡張やアクションを紹介します。 定番として入れておきたいものから、特別な使用シーンに使うものまで、優れ物ばかりです。 Photoshopでのガイド引きに欠かせない強力な機能拡張 定番のGuideGuideは3.1.2にバージョンアップ 幅の異なる複数のガイドを一気に作成できる優れ物 Photoshopのスウォッチをフォルダで管理 カラーピッカーを開かずにカラーのコードを簡単コピー 複数のさまざまなオブジェクトのカラーを一元管理 手元の画像からシームレスなテクスチャを1クリックで作成 ビットマップのオブジェクトをベクターに変換 画像にパースをつけてかっこよく見せる パラグラフのレイアウトを段組みに変更 要素のサイズやエフェクトやフォントなどの情報を書き出す エレメントやマージンのサイズを書き出してくれる 黄金比
【Photoshop】簡単！キラキラ輝く星空の描き方
こんにちは！ 会社では主にイラストを描くお仕事をしています。みさこです。 ガクガク{{{{（*ω*）}}}}プルプル 関東でも最近大雪が降りまして、まだまだ冬の寒さが続いております。冬は寒くてあまり好きではないですが、空気が澄んでいて星空が綺麗に見えるのは良いですよねーﾍ(ﾟ∀ﾟﾍ) ということで今回は、キラキラ輝く星空の描き方(Photoshop)について書かせて頂こうと思います！！（雑な入り方でスミマセン…） 目次 星空の描き方 おまけ 最後に 星空の描き方 1.［ファイル］→［新規］で新規ファイルを制作する。 2.描画色を白、背景色を黒に設定する。 3.ちりめんじわフィルターで星を作る。 ［フィルター］→［スケッチ］→［ちりめんじわ…］を選択し、下図のように設定して［OK］します。 4.星の輝きを強くする。 星空レイヤーを複製し、描画モードをスクリーンモードにします。 レイヤーを全て
Photoshopのスライスを他のファイルに移すことができるかどうか - Fireworksだとスライスのコピーができます。たとえば、... - Yahoo!知恵袋
Photoshopのスライスを他のファイルに移すことができるかどうか Fireworksだとスライスのコピーができます。 たとえば、第一版でスライスしていて、第二版ができた場合、 第一版のスライスデータをコピーして第二版のファイルに移行することができます。 Photoshopはそのファイルでスライス自体はできますが、 そのファイルのみで有効で、他のファイルへの移行（コピペ）ができません。 何らかの方法でそれは可能なのでしょうか。
Photoshopできらきらした魔法の光を描く
今回はPhotoshopでディズニーチックな、きらきらの描き方をご紹介します。きらきらはロマンチックなイメージをつくりたい時、画面が華やぐので重宝しますよ！このチュートリアルで使う「きらきらブラシ」は無料でダウンロードできます。商用利用もOK！※詳しい利用規約は同封のドキュメントをご確認ください。 ブラシ素材／magic_light_br.zip PSDファイル（CS4）／magic_light_psd.zip Step1 背景を塗りつぶす 新しいカンバスを開きます。今回は「幅：500px×高さ：400px ／ 72pixel/inch」のカンバスを用意しました。 まず、背景レイヤーを塗りつぶします。濃い色なら何でもOK。今回は夜空のようなイメージにするため、青をチョイスしました。描画色を「#141838」にして、レイヤーパレットで「背景レイヤー」を選択。メニューの[編集]＞[塗りつぶし]
The ustwo™ Pixel Perfect Precision Handbook 2 日本語版
『Pixel Perfect Precision™ Handbook 2』（以下PPP™）は、ウェブサイトなどのデジタル環境用のデザインをする上での基本原則と、実践ですぐに使える具体的なPhotoshopのテクニックが収録されているドキュメントです。その名の通り、パーフェクトな精度のピクセルでデザインをするためのノウハウが、わかりやすいビジュアルと簡潔な文章でまとまっています。 元々PPP™は、グローバルに拠点を置くデジタルデザインスタジオustwo™ のGyppsy氏が制作したドキュメントです。iBooks版とPDF版のPPP™ドキュメントに加え、スクリプトやPhotoshopパターン集を付録の「エクストラ」として、ustwo™ ウェブサイトにて無償で配布しています。 PPP™は、デジタルデザインを学びたい人に、デザインの基礎知識と概念的な全体像を提供できるドキュメントであると同時に、既
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
Learn | Adobe Creative Cloud
新着記事
Photoshop CC 2015は最近のワークフロー、UIデザインを効率化する新機能が満載、アップデート時の注意事項
Free Web Design Resources - Freebiesbug
「アセットを抽出」の出力は油断するとボケる (Photoshop CC 2014)
イマドキのスライス事情
