Webデザイン

Webデザイン

【Photoshop】生成塗りつぶしを使ってみよう【AI】

Photoshop 2024(ver.25)から本格的にAIによる生成機能が追加されました。 今回はどんなことができるか、基本的なものをご紹介していきます。 対象のものを削除したい ではまず、対象のものを削除する方法です。 Photoshop 2024(ver.25)で生成塗りつぶしに使いたい画像を開きましょう。 画像を開いたら、削除をしたいものを選択ツールを使用して範囲選択します。 範囲を選択したらコンテキストタスクバーが表示されるので、『生成塗りつぶし』をクリックします。 […]

Webデザイン

【AI画像生成】Adobe Fireflyを使ってみよう!【商用利用可】

昨今ますます勢いを増すAI画像生成。 今回はAdobe社の提供するFireflyという画像生成AIを使ってみましょう。 このような高画質の画像を生成することができます。 Adobe Fireflyの特長 著作権問題がクリア 著作権面で泥棒かのように言われることがある画像生成AIですが、Fireflyは自社の高品質フォトストックサービスを学習元としているため、著作権クリーンです。 作品を提供しているクリエイターからも同意を得ています。 また、生成物を使用した後に、知的財産に関す […]

Webデザイン

素敵な配色パターンを知りたい!おすすめ配色ツールのまとめ【2022年版】

初心者だと何を選んだらいいのかわからなくなったり、そこそこ経験のある人でも同じようなものを選んでしまったりで悩んでしまう『配色』。 今回はそんな配色のヒントを得られるサイトをご紹介します。 Color Drop 4つの色の組み合わせがずらっと用意されているサイトです。 気になる色をクリックすると右側にカラーコードが発行されるので、あとはコピーするだけ。 用意されている色に限りはありますが、シンプルなものを求めている方におすすめです。 実は地味に画像から色を抽出したりカラーコー […]

Webデザイン

【PremierePro】自動追尾で動画の被写体にモザイクをかける

PremiereProのモザイクフィルターを使用すれば、ワンクリックで簡単にモザイクをかけることができます。 被写体を自動追尾する便利機能 PremiereProのモザイクフィルターは、被写体を自動追尾します。 歩く男性の顔にモザイクをかけ、自動追尾させた例です。簡単にできるのでやってみましょう。 手順 1.モザイクエフェクトをかける まずプロジェクトを開いて、動画素材をタイムラインに配置し、選択します。 エフェクトパネルから「モザイク」を探し、動画にドラッグドロップして適用 […]

Webデザイン

【PremierePro】Ultraキーを使って動画の背景を透明に切り抜く

Premiere ProのUltraキーエフェクトを使用すると、動画の一部を透明にすることができます。 イメージ的には、テレビの天気予報でキャスターと定点カメラの映像を合成して表示するといったような状況で使用できます。最近では、実況動画などでも似た手法がよく見受けられますね。 Ultraキーの特徴 Ultraキーは、動画の背景を透明にすることができます。 実際には特定色を指定して透明にするため、動画自体はグリーンバックで撮影する必要があります。 ▼動画の緑色を指定して透明にし […]

Webデザイン

【Photoshop】クリックするだけ!? AIで風景を置き換える新機能”風景ミキサー”の使い方

PhotoshopCCのver23.0から搭載された新機能「風景ミキサー」を紹介します。 AIを使用したフィルター機能で、写真の背景をクリックするだけで簡単に変更できます! どんな機能? 左が元写真で、右がフィルター適用後です。 あくまで元の画像の構図や要素は崩さずに、雰囲気をガラリと変えてしまいます。 どんな雰囲気の背景にしたいか選択でき、昼夜の時間帯や、季節の具合などを調整できます。 使い方 手順1:被写体を選択する では、早速使ってみましょう。 被写体はそのままにしたい […]

Webデザイン

【Illustrator】手書きのスキャン画像をパスデータにする

Illustratorの「画像トレース」という機能を使用すれば、パスデータを作成することができます。 簡単に使えるので、ぜひロゴやイラストを作る時に活用してください。 「画像トレース」機能の使い方 画像トレースパネルを開く まず、メニューから画像トレースパネルを開きます。 [ウィンドウ]>[画像トレース] スキャンしたデータをトレースする スキャンしたデータをIllustratorで画像オブジェクトとして開きます。 配置した画像を選択ツールで選択すると、画像トレースパネルがア […]

Webデザイン

【Illustrator】長文をカラム分けして読みやすくする方法

リーフレットやチラシなどの印刷物を作る時、長文をカラム分けすると文章が読みやすくなります。 このカラム分けされたテキストボックスは互いにリンクされており、片方で改行などの編集をすると、溢れたテキストが自動で次のテキストへ送られるようになっています。 領域を作ってリンクするだけなので、非常に簡単です。ぜひ習得してください。 やり方解説 手順1:四角オブジェクトを配置する まず、カラムを作成したい領域を決めて、四角形オブジェクトを配置します。 手順2:四角オブジェクトをテキストボ […]

Webデザイン

【写真の副業】WEBデザイナーの私が思う”使いやすい写真素材”とは?

最近、副業としてPIXTAなどで写真素材を販売する方が多いとの話を聞きました。 スマホで撮影した写真があれば手軽に始められるので、人気の副業のようです。 では、素材サイトヘビーユーザーのデザイナー目線で素材として使いやすく、ダウンロードしたい素材とはどんなものでしょうか? 実際に写真をダウンロードして使う側の私が思う、使いやすい写真素材の特徴をまとめてみました。 その1.ピントがあっている これはマストです。ピントが合っていない・ブレている写真は、加工でもどうすることもできま […]

Webデザイン

iPhone 12 / iPhone 12 Pro のおすすめモックアップ素材

こんにちは。今回はiPhone 12 / iPhone 12 Pro のモックアップをまとめました。 一応ライセンスフリーのものを掲載していますが、使用用途によって異なるかと思いますので各サイトをご確認ください。 iPhone 12 iPhone 12のモックのセットです。 Psd iPhone 12 Mockup Set 全色分のモックがそろっています。正面を向いているため使い勝手もよさそうです。 Isometric Psd iPhone 12 Mockup Set 全色分 […]

Webデザイン

PhotoshopCCでWebP形式の画像を読み込み・書き出しをしよう!

『PageSpeed Insights』を使用するとよく出てくる画像フォーマット『WebP』。 Photoshopでは書き出しなどができません。 が、今回紹介する『WebPShop』を使用することで書き出しが可能になります。 今回はインストールの方法をご紹介します。 使い方 ダウンロード まずはGitHubからプラグインをダウンロードします。 インストール 『bin』のフォルダを開きます。 Macの方は『WebPShop_0_3_0_Mac_x64』、 Windowsの方は『 […]

Webサイト制作

【実績紹介】吉村卓さんのイラスト・WEBデザインを担当させて頂きました。

ご縁がありまして、セクシー男優の吉村卓さんの似顔絵イラストと、WEBサイトのデザインを担当させていただきました。 そこで似顔絵イラストのグッズを制作したとのことで、ご厚意でアクリルキーホルダーと消しゴムを頂きました。ありがとうございます! こちらのキーホルダーは今私のデスクの上に鎮座しており、時々笑顔を誘ってくれます。 トレードマークのブリーフ&仁王立ちポーズが、それらしいとご好評の様子で、「卓ちゃんマン」との愛称で親しまれているそうです。 喜んで頂けて私としても大変嬉しく思 […]

Webデザイン

Firefoxのデフォルト機能でスクリーンショットを撮ろう!

Firefoxのデフォルト機能についてるスクリーンショットは追尾してくる部分なども大体はきれいに処理してくれたり、使い勝手がよく便利です。 今回はその使い方をご紹介します。 PC表示で撮る 1.URL部分のマークをクリック URL部分にある『・・・』のマークをクリックします。 2.項目の中から『スクリーンショットを撮る』を選択 『スクリーンショットを撮る』をクリックします。 3.スクリーンショットを撮る範囲を指定 『全体を保存』『表示範囲を保存』『ページをドラッグまたはクリッ […]

Webデザイン

iPhone XR / XS Max / X / 8 のおすすめモックアップ素材

デザインやプレゼンテーションなどに欠かせないiPhoneモックアップ。 今回は機種ごとにまとめてご紹介していきます。 ライセンスなどは各サイトでご確認ください。 iPhone XR Psd iPhone XR Mockup XRの全色が用意されています。 Psd iPhone XR Mockup Isometric Vol1 横置きにされたXRのモックアップです。 iPhone XS(Maxも含みます) Psd iPhone XS Max Mockup XSとXS Maxの両 […]

Webデザイン

デザインを華やかに!Photoshopの花柄ブラシ10選

女性的なデザインでよく使うPhotoshopの花柄ブラシ。 今回は配布されている花柄ブラシを紹介していきます。 ※一応無料の物などを集めたつもりですが、規約が変わっている可能性もあるので使用の際にはチェックしてしてください。 Flower Brushes Part 3 – The Smell Of Roses ペンで書かれた花のブラシのセット。主線がある状態で塗り色を変えて使いたい時に便利そうです。 にじんだ水彩花柄 フェミニンな雰囲気を出せるにじんだ水彩の花柄の […]

Webデザイン

【Illustrator】解像度別の画像書き出しが爆速に!「アセット」機能の紹介

Androidアプリを作成する際に画面密度(dpi)別に画像素材を作るの、とてもめんどくさいですよね。 Androidのmdpiを基準に、xxdpiまで対応するとした場合、4枚の同じ画像が必要になります。 アセット機能って何? 1つのオブジェクトを倍率違いで複数書き出すことのできる機能です。まさに夢のような機能ですね。 ▲アセットに登録して書き出すと… ▲複数のサイズで書き出されます。 解像度ごとの素材書き出しがなんと一瞬。作業の時間も半分以下に。 アセット機能の使いかた 0 […]

Webデザイン

再出版本の装丁デザインを担当いたしました。

Web制作の書籍ではあまり書かれない、制作現場における支払いトラブルや瑕疵、著作権についての書籍が再出版となります。 以前、レクシスネクシス・ジャパン社より出版された「Web業界 受注契約の教科書」「Web業界 発注制作の教科書」の改訂版として、第一法規社より再出版されました。 前回に引き続き、両書の装丁デザインを担当致しました。 デザインに対する要望 今回、書名が変更になったため、書名の入れ替えと 書店に並んだ時に、より目を引きそうなデザインに変更したいとの要望がありました […]

Webデザイン

【photoshop】選択範囲の作成をトーンカーブで手早く済ませるテク

女性の写真のフォトレタッチでよく起こりがちなのが、髪と服の色が似ていて、クイック選択ツールで選択範囲が混ざってしまう現象。 今回は色調補正やトーンカーブを使用して、パーツごとに選択できる小技を紹介します。 例えば、この女性の写真の髪の色を変更してみましょう。 1.調整レイヤーを作成し、色の差を作る 考えてみれば実は簡単なことで、髪と服の色の差をつければ選択しやすくなります。 「色調・彩度」と「トーンカーブ」をあてて、色の差をつけていきます。 ※後で画像を基の色に戻す必要がある […]

Webデザイン

【Photoshop】CameraRAWフィルターで写真を補正する

PhotoshopのCameraRAWというフィルターの使い方を紹介します。 本来はカメラのデータ形式「RAW」を取りあつかうためのものなのですが、JPGなどの画像データにも適用することができます。 画像のトーンや明度彩度、シャープ、コントラト、レンズのゆがみ、色かぶり、モアレの解消…etc 様々な効果がこのフィルターひとつで調整できるため、作業の時短に有効です。 例えば、こんな風に色を補正することが可能です。 寒そうな廃屋の写真を、黄身っぽいカラーに変換しました […]

Webデザイン

Photoshopで、動画データ(mp4)をもとにGIFアニメーションを作成する

Photoshopでmp4データを扱える 実は、Photoshopで、mp4の簡単な編集なら行うことが可能です。ご存知でしたか? トリミングやほかのフェードインフェードアウトくらいのエフェクトなら使用できるので、GIFアニメーションを作る際にはとても便利です。 スマートフォンで撮った動画や、画面キャプチャ動画なんかも簡単に素材として取り入れることが可能です。 ブログで解説の記事を書く際や、シネマグラフ手法を取り入れたデザインを作る時などにも大変役立つのでぜひ覚えてくださいね。 […]

Webデザイン

UI/UXデザイン界の新しい風!Adobe XD CCを便利に使い倒す!

UI/UXデザインがラクラク!カンプデータが簡単に作れる Adobe XD サービスを立ち上げる時、まずは、画面の仕様や動作遷移の確認に、画面の設計を行うと思います。 いわゆるプロトタイプですね。(より完成品のイメージがしやすいよう、紙芝居のようなものを作ります。) iPhoneアプリ Andoroidアプリ Webサービス など… AdobeXDは、プロトタイプが簡単に作成できるアプリケーションです。 操作が非常に直感的で、画像をドラッグドロップするだけでマスク […]

Webデザイン

Illustratorでアミカケ。自作の柄パターンを登録する。

今回はIllustratorでスクリーントーンのようなアミカケを作ってみましょう。 応用で斜線や複雑な柄のパターンも登録できます。(Illustrator CCを使用して解説していきます。) アミカケを登録 パターンを使用する時は、スウォッチに登録します。 01.パターンを作る まずは1pxのアミカケを作ってみましょう。今回は長方形ツールを使用します。 実際に作る時は、作成したいパターンに合わせて好きなパスツールを使用してください。 02.作ったパターンをスウォッチパネルに登 […]

Webデザイン

【スマホアプリ】スプラッシュ画面デザイン集

スマートフォンアプリのスプラッシュ画面をデザイン機会があったので、参考にデザインを収集しました。 Pokémon GO 公式: Pokémon GO 皆さんご存知のポケモンGOです。NIANTICのロゴの下に横線があるのですが、こちらが簡単なローディングのバーになっています。 (画面が切り替わってもまだ読み込んでいるのでどこまで読んでいるのか謎ですが…) どうぶつの森 ポケットキャンプ 公式: どうぶつの森 ポケットキャンプ こちらも昨今のトレンド、どうぶつの森です。ゲームの […]

Webデザイン

デザイナーはアーティスト(芸術家)ではないという話。

最近、Web制作のご相談を受けていて、お客さまから「デザイナーな芸術家じゃないんだかさ!」というお話を伺うことが続いて何度かありました。 話のきっかけは、あるお店の名刺やロゴデザインをデザイナーにお願いした際に、早く名刺と店の看板用にロゴが欲しかったのに、なかなか納品してくれなかったという話でした。 詳しく理由を伺ってみると、作業自体が間に合っていなかったのではなく、デザイナーがロゴにいまいち納得いかないから納品できない、ということで納品してくれなかったそうです。 そのロゴと […]

Webデザイン

【photoshop】複雑な画像を毛先まで簡単に切り抜く方法

今回は、「選択とマスク」機能を使用した画像の切り抜きを紹介します。全体で10分程の作業です。 使用するのはこの画像。女の子の髪の毛と背景の切り抜きが複雑そうです。 切り抜く範囲を大まかに選択する クイック選択ツールなどを使い、女の子を大まかに選択します。毛先や透けて見える背景の緑は後で調整するので無視して大丈夫です。 「選択とマスク」機能を開く メニューから、[選択範囲] > [選択とマスク]。 選択とマスクのワークスペースへ画面が切り替わります。 作業に適した表示を選ぶ 属 […]

1 2 3 10