ゲームUI素材の作り方まとめ【2020年6月後半】
6月中旬からはじめた「ゲームUI素材の作り方」画像が増えてきたので、振り返りの意味も込めてまとめました。 ちなみに、「ゲーム関連のデザインで何に興味があるか」というアンケートをとりました。結果は、下記の通り。 ボタンやゲージなどの「UIパーツの作り方」が最も多かったです。この辺りも考慮に入れて、作り方の1枚画像をアップしていこうと思っています。 最近、1枚画像芸になりつつありますが・・・ UI素材（ボタン、ゲージ他） 戻るボタンの作り方 これは、ゲームアプリ「連結だいすき」のゲームUIデザインをしたときに作成したボタンです。 属性アイコン（水）の作り方 ソシャゲでおなじみの属性アイコンです。戦闘時に敵と自分の属性で威力が変わるというゲームシステムはよく見かけますよね。 フラットボタン（光彩）の作り方 ゲームでも、フラット系のUIデザインが流行っています。今回は光彩を強めにつけました。こ
【無料DL可！】デザインの幅がグッと広がる高解像度のテクスチャ、パターン素材47選
この記事では、デザイン制作で役立つ無料の高画質テクスチャ、パターン素材をまとめています。 そのまま背景や壁紙として利用したり、ウェブサイトのヘッダーやバナー、ファブリック生地、パッケージデザインなど幅広いデザイン制作に活用でき、どれも無料ダウンロードできるというのも魅力です。お気に入りの無料テクスチャ素材を見つけて、自分のコレクションに追加してみてはいかがでしょう。 【無料DL可！】デザインの幅が広がる高解像度のテクスチャ素材47選 Precious Gold Textures Kit デザイン制作でもなにかと重宝する、光沢感たっぷりの黄金テクスチャ14枚が高画質なJPGファイルで収録されています。 Rose Gold Foil Textures ピンクゴールド、ローズゴールドの美しいテクスチャ素材12枚セットで、金属メタルやレザー、コンクリート、レンガ、ウッドなどのスタイルと組み合わせる
PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売
私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
chot.design - 毎日ちょっとずつデザインを学ぼう
毎日ちょっとずつ、デザインを学ぼう毎日ちょっとずつデザインを学ぼうIT/Web業界のデザイン学習サイト
Illustratorの代わりにAffinity Designerを使う
Adobe Illustrator を CS4 から 10 年以上使っているんですが、そろそろ Adobe にも飽きてきたので他の選択肢を探してみようと思い色々休日に調べていました。 探してみると選択肢は非常に少なく、フリーの Inkscape か有償の Affinity Designer のどちらかを選ぶという状況です。 Affinity Designer も有償と言えど 6,000 円程なので、たったの CC1 ヶ月分です。 https://affinity.serif.com/ja-jp/designer/ Affinity という名前は初めて聞いたのですが、多くの Illustrator の機能をサポートしている上に、公式サイト・ヘルプが日本語に翻訳されており敷居も低いです。製品ラインは 3 つ用意されており、 Affinity Photo: Adobe Photoshop の代替
無料(フリー)イラスト 素材Good
フレーム枠イラスト 縦型 | かわいい | おしゃれ | シンプル | エレガント | アンティーク | ポップ | 和風・和柄 | 花 | ミモザ | 桜 | 紫陽花 | ひまわり | チューリップ | コスモス(秋桜) | カーネーション | 丸 円 | 青 | 家 | うさぎ | 梅 | 運動 スポーツ | テロップ横長 | 背景イラスト 夏 | 秋 | 春 | 冬 | かっこいい | シンプル | おしゃれ | 和風 | かわいい | 桜 | 花 | 柄 | 空 | 街 町 | 縦 | 青(ブルー) | 春イラスト 桜 | 入学 | 新学期 | 新社会人 | こどもの日 | ゴールデンウィーク | 母の日 | カーネーション | 夏イラスト 父の日 | 梅雨 | 夏休み | 海・プール・水泳 | 暑中・残暑見舞い | 七夕 | 熱中症 | お祭り | 花火 | ひまわり | 金魚
iOS 11 iPhone GUI from Design at Meta
Today, there are many user interface kits available for designers to speed up their work. However, few if any incorporate motion. This year, we’ve created Origami and Framer components that mirror the behavior of the most important UI elements in iOS 11 as well as recreating elements found in the public release of iOS 11 in Sketch and Photoshop. Whether using these files to mock up apps, concept i
もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる3,000種類のシンプルなアイコン素材
商用でも無料で利用できる1,000種類のアイコンが3つのスタイル、そしてPhotoshoop用・Adobe XD用・Sketch用・Figma用・inVision用、そしてSVGまで完備されたMaterial Icons Libraryを紹介します。 一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います。 Material Icons Library ラインセスはApache License Version 2.0で、個人でも商用でも無料で利用できます。 アイコンはMaterial Designを踏襲しており、全部で1,000種類のアイテムが揃っています。スタイルは角丸・アウトライン、ツートーンの3種類。合計すると、3,000種類以上になります。 アイコンの特徴 フォーマットは、Photoshop, Adobe XD, Sketch, Figma, inVision
プロのイラストレーターがiPadだけで1年間絵の仕事をしてわかった事 | Nomad Life
今回は久々のiPadの使用感のレビュー記事です。 Google検索でこのサイトに来てくださっている方はiPadは液タブとして使えるのかというところを気にして検索して来てくださっているようなので一年経った今回、改めて一年使ってみた使用感を書きます。自分でプロと名乗るのは少し恥ずかしいですがイラストの仕事して5年、フリーのイラストレーターとしては1年経ったのでいいかなと主にポジティブな感想になります。所々挟まる絵はiPadで描いたものです。 3年前の記事にもかかわらず、検索でこちらの記事を見てくださっている方が多いのでこちらでもアナウンスさせて頂きます。この3年間でiPad proは飛躍的に進化しているので最新の記事も合わせてご覧ください。こちらの記事で書いているiPa自体の魅力の部分は変わらないので是非読んでください。
センス抜群と話題！シームレスな背景画像が無料配布されている「PATTERN LIBRARY」
どうも、やなぎさわです。サイトの背景画像をちょっとお洒落な柄にしたいというデザイナーの方いませんか？ 今回は、シームレスな背景用パターンが無料でダウンロードできる「PATTERN LIBRARY」というサイトをご紹介します。 可愛らしいイラストから最近流行のインディアンパターンや上質な質感のパターンなど様々な種類が揃っています。全部で52枚ある素材を全てご紹介します。 パターン作りの手間が省ける「PATTERN LIBRARY」 気に入ったパターンが見つかったら、すぐにダウンロードができて使えるから便利です。 しかし、ダウンロードした時に画像のサイズが小さいなって思うかもしれません。 パターンの柄によってサイズが異なりますが、全てそこまで大きなサイズの画像ではありません。そこで、私の場合はPhotoshopを使って、ダウンロードした画像をパターン化させてしまいます。 その詳しいやり方は、以
ホントにRAWは高画質なの？RAWとJPEGの違いとメリットデメリットをまとめてみた！
いままでJPEGで写真を撮っていたけどそろそろRAWで撮ってみようかな？という声を良く聞きます。多くの人は「RAWは高画質だから」と言うのですがそれってホントでしょうか？今回は一眼レフやミラーレスでよく使われるRAWとJPEGの違いやメリット、デメリットについてご紹介します！ RAWはホントに高画質なの？？写真を始めたばかりの人にはあまりなじみのないRAW（ロウ）画像ですが、あるとき「高画質に記録できる”RAW”というものがあるらしい」とRAWの存在に気づきます（笑） どうも「RAWで記録すると写真がキレイになる」というフワフワした情報だけが一人歩きしているような感じなのでここで一度スッキリとRAWとJPEGの違い、それぞれのメリット、デメリットについてまとめてみましょう！ ほんとにRAWは高画質なのでしょうか？？ ＊ここでの”JPEG”とはカメラ内で生成された”JPEG形式の写真”として
Webデザインにデザイナーはどれくらい時間をかけているのか | インソースマーケティングデザイン | ホームページ制作・リニューアル・運用改善で課題を解決
2015.2.23デザイン インソースマーケティングデザイン 2021年8月1日「マリンロード」は「インソースマーケティングデザイン」へ社名を変更いたしました Webデザインにデザイナーはどれくらい時間をかけているのか Webサイトの制作費は主に人件費です。 人が企画し、人が設計/デザインし、人がシステムを作ったり、HTML化します。 そのデザイン部分を担当させていただいております馬淵です。 デザインするのにどのくらい時間かかるの？ 最近作業工数について見直す機会がありました。 お見積りは最終的には営業さんが作成するものですが、作業工数の見積りは制作担当者までおりてくることもあります。 さっくりサーチしたところWebサイトのトップページデザインを作るのに1日1〜2案？といった感じでした。 ※「1日」、「1案」の定義にバラつきがありますが、ここでは1日=8h、1案=Photoshopで作るビ
PhotoshopでiPhoneアプリのUIを作るための準備と設定
WebデザイナーがWebサイトだけでなく、スマートフォンアプリをデザインする機会が増えています。 ところが、Photoshopを使いこなしているデザイナーでも、UIのデザインとなると勝手が違い、試行錯誤している方が少なくないようです。本連載では、Photoshopを使ってアプリのUIをデザインするコツを、デザイナーのハマダナヲミさんが解説します。（編集部） Photoshopはもともと写真編集のためのソフトでしたが、印刷物やWebのデザインツールとしても使われるようになり、いまではデザインツールとしてPhotoshopを使っている方が多いのではないでしょうか。最近ではアプリのUIデザインにも便利な機能がどんどん追加されています。この連載ではWebデザイナーを対象に、iPhoneアプリを題材として、PhotoshopでUIをデザインする方法を紹介します。 第1回は、アプリ開発の大まかな流れを
現役UIデザイナーが語る「今、プロトタイピング開発に求められること」UI Crunch #3
現役UIデザイナーが語る「今、プロトタイピング開発に求められること」UI Crunch #3 馬場 美由紀（HTML5 Experts.jp編集部） この1～2年、Webサービスやスマートフォンアプリの開発現場では、早い段階から評価・検証により課題を洗い出し、制作の効率化を図るプロトタイピングがさまざまな手法・ツールによって試されている。 「UI Crunch」第3回となる今回のテーマは、「今、プロトタイピング開発に求められること」。講座は、元山和之氏（クックパッド）、吉竹遼氏（Standard Inc.）、村越悟氏（グリー）、土屋尚史氏（Goodpatch CEO）デザイナー各氏によるスピーチ、および坪田朋氏（DeNA）を加えたパネルディスカッションを通じて考え、深めていくという構成で行われた。 チーム開発におけるKeynoteを使ったプロトタイピング 最初のセッションは、クックパッドの
コピペ自由！美しいグラデーションを180種類揃えた WebGradients
最近のウェブデザインでよく見かける、鮮やかな配色のグラデーションカラーをお探しですか。 WebGradients は、どんなウェブサイトでも利用できる美しいグラデーションカラー180種類を揃えた、無料の配色コレクションツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSS3コードをコピペできます。使い勝手もよいので、ワークフローに加えたいサービスのひとつです。 詳細は以下から。 コピペ自由！美しいグラデーションを180種類揃えた WebGradients WebGradients では、配色の参考にしたい美しいグラデーションカラーが一覧で揃っており、使い方もとてもシンプルです。各パネルでは、2500x2500pxのPNGファイルをダウンロードできたり、使用している色のHEXコードもまとめて確認でき、Webデザイン制作に便
iPhone 6 & 6 plusのデザイン対応について【随時更新】 - デザインメモ
iPhone 6とiPhone 6 plusが発表されましたが、アプリのデザインを担当している私がもっとも気になるのが「今のアプリのデザインをどう変える必要があるのか？」。 実際、Appleは謎の解像度にしてしまったため、単純に拡大すれば良いってわけじゃなさそうなので、私なりに調べたこと・わかったことを随時更新していこうと思います！ 最終的には、こうしたら上手くいった！リデザインはこうしたら良い！までもっていけたらと思ってます。 目次 1、画面解像度について 2、画像サイズやデザイン作業について その他 1、画面解像度について 解像度などを比較するインフォグラフィックス ↓ 2014/09/16 up 海外でこんなサイトが公開されていました！ iPhone 6 Screens Demystified – PaintCode 解像度がわかりやすく紹介されています。 iPhone6 plusは
【簡単】2023年Photoshop切り抜きおすすめテクニック15選 完全ガイド
コンテンツ目次 「被写体の選択」機能 「選択とマスク」機能 「選択とマスク」（複雑な背景バージョン） オブジェクト選択ツール レイヤースタイル「ブレンド条件」 消しゴムツール 自動選択ツール クイック選択ツール 多角形選択ツール ペンツール チャネル設定 色域指定 レイヤーマスク クリッピングマスク 境界線を調整 さいごに、 1. 「被写体の選択」機能 もっとも簡単な、最新の切り抜きテクニック。 ボタンをクリックして、数秒待つだけで完成という、嘘のようなホントのはなし。 試しに、こちらの写真の女性を選択してみましょう。 元の画像をコピー（Command/Ctrl+J）したら、プロパティパネルの「被写体を選択」をクリック。 たったこれだけで、女性モデルのみを選択することができました。 選択範囲をレイヤーマスクとして適用したら、完成です。 Adobe Stockで「背景の削除」も一発完了 実は
【無料・商用可能】シームレスパターン|背景素材ダウンロードサイト|イラストレーター フォトショップデータ配布
商用可能シームレスパターン背景素材です。デザイナーさんのための無料eps,jpgデータですのでイラストレーター、フォトショップ等でのデザイン制作の短縮にお役立て下さい。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト
新着記事
