2025.03.19 WEBWebデザイン 【Illustrator】イラレのグラデーションにノイズを加えてみよう！ 昨今、ノイズ入りグラデーションを使ったデザインをよく見かける気がします。 参考：株式会社KKI様 採用サイト 参考：【栃木県宇都宮市】職員採用情報サイト ざらっとしたノイズを入れることで、ただのべた塗り・グラデーションにはない質感が生まれ、どこかレトロでありながら新鮮な印象を受けます。 業務でも取 [...]
2025.03.19 WEBWebデザイン 【Illustrator】イラレのグラデーション機能、基礎を覚えよう！ 今回は、イラレのグラデーション機能について、「基本的な使い方」から、「透過表現の方法や文字にかけるグラデーション」「アピアランスとは何か」まで、ご紹介したいと思います。Photoshopと少し勝手が違うところもあり、つまずきやすいポイントでもありますが、知っておくといろんな表現に応用が利くため、習 [...]
2024.12.23 WEBWebデザイン 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【後編・書き出しまで】 前編では、Photoshopのタイムライン機能を使って、ツリー上のスターの飾りを拡大・縮小する方法をご紹介しました。 APNG・WebPアニメーションについても下記ブログで解説しています。 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【前編】 続いて中編では、 [...]
2024.12.04 WEBWebデザイン 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【中編】 前回のおさらい 前編では、Photoshopのタイムライン機能を使って、ツリー上のスターの飾りを拡大・縮小する方法をご紹介しました。 APNG・WebPアニメーションについても下記ブログで解説しています。 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【前編】 前回 [...]
2024.11.19 WEBWebデザイン 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【前編】 前回、Photoshopを使って画像の中に動画を埋め込み、mp4形式で書き出す方法をご紹介しました。 【Photoshop】画像の中に動画を埋め込んで書き出す方法（モックアップ動画の作成方法） あれからアニメーションが面白くなってきたので、今回はPhotoshopを使ってアニメーションを作成し、A [...]
2024.09.27 WEBWebデザイン 【Photoshop】画像の中に動画を埋め込んで書き出す方法（モックアップ動画の作成方法） 今回は、Photoshopを使って画像の中に動画を埋め込み、mp4形式で書き出す方法をご紹介します。 なんと、Photoshopは動画編集もできたのです…。需要はニッチかもしれませんが、下記のようなPCモックアップのGIF画像を業務で作成することがあったため、備忘録として残しておこうと思います。P [...]
2024.09.11 WEBWebデザイン Illustratorの3D効果「3Dとマテリアル」で、立体的な文字を作ってみよう！ 過去の記事にて、Illustratorの3D効果でアイソメトリック図の作成方法をご紹介しました。 3D効果のおさらい 立方体・直方体の作り方はこちら Illustratorの3D効果で、アイソメトリック図を作ってみよう！【立方体・直方体編】 回転体の作り方はこちら Illustratorの3 [...]
2024.08.21 WEBWebデザイン Adobe間の素材の共有が簡単に！CCライブラリの使い方 Adobe製品を横断して使用しながらデザインを作成しているとき、このようなことはありませんか？ 以前Illustratorで作成した図を、XDのデザインカンプに配置したいが、どこに格納したのか忘れてしまった Photoshopで作成し、XDのデザインカンプに配置している図に変更が入ってしまっ [...]
2024.07.02 WEBWebデザイン 【流行デザイン】XD・Photoshopでニューモーフィズムデザインを作ってみよう！ 2020年頃から、一部のwebデザインで取り入れられている「ニューモーフィズム（Neumorphism）」。 ニューモーフィズムは色数が少なく、シャドウで要素の境界を表現するため、洗練された近代的なデザインを作り上げることができます。 今回は、そんなニューモーフィズムを、Adobe XD・Phot [...]
2024.06.04 WEBWebデザイン 【Photoshopシャドウシリーズ②】写真から被写体と影を残して背景のみを合成する方法 デザインをしているとき、商品写真などから、被写体を切り抜き、別の背景に合成したい！そんなことがたまにあります。 切り抜き画像に影を付けたい場合、被写体のみを選択して切り抜き、後から被写体に対してドロップシャドウをかける方法が一般的かと思います。 右のメガネにドロップシャドウをかけた画像も、悪くは [...]
2024.05.02 WEBWebデザイン 【Photoshopシャドウシリーズ①】ドロップシャドウの使い方 「キレイに見せるコツも解説！」 Photoshopなどで文字や画像・オブジェクトに影を付けたいときによく使われる、ドロップシャドウ。 ドロップシャドウを使うと、下記のように、オブジェクトが浮き出ているように見せることができます。 一口にドロップシャドウといっても、効果のかけ方で印象がかなり変わります。 下のイメージ画像を見て [...]
2024.04.15 WEBWebデザイン 【Illustratorの生成AI機能】テキストからベクターデータを生成！イラスト・アイコン・パターンを素早く作る！ 先日、弊社ブログ記事「【新機能】Photoshopの生成AI機能「生成塗りつぶし・生成拡張」がすごすぎる！使い方をご紹介します。」を公開しましたが、Photoshopの「生成塗りつぶし・生成拡張」機能と同時期に、Adobe Fireflyを活用した生成AI機能が、Illustratorにも実装され [...]
2024.03.27 WEBWebデザイン 情報を視覚的に伝える！インフォグラフィックスの使い方・作り方 突然ですが、PDCAの4つのプロセスを表す上で、どちらが分かりやすいでしょうか？ テキストを羅列しているだけのAよりも、Bのほうが、4つあるプロセスが循環している、という情報が目に入りやすいかと思います。 このことから、情報伝達において、ビジュアルという要素は重要であることがわかります。 このよ [...]
2023.12.27 WEBWebデザイン 【新機能】Photoshopの生成AI機能「生成塗りつぶし・生成拡張」がすごすぎる！使い方をご紹介します。 写真を使ってデザインをしているとき、「もう少し背景のエリアを広げたい…」「被写体が近すぎる…もう少し引きの画が欲しい」などと思ったことはありませんか？ 背景を無理やり引き延ばしたり、複製した写真をずらしたりしてみてもなにか不自然になってしまいますよね。 また、写真の中に映りこんだ物を消したいこと [...]
2023.12.26 WEBWebデザイン パワーポイントでバナーを作るための実用的テクニック4選！パワポでもここまでできる！ 先日、弊社ブログ記事「＜ノンデザイナー・初心者向け＞デザインツールがなくてもOK！パワポでバナーを作るために押さえておきたい6ステップ」が公開されました。 その際、「この表現は、パワーポイントではどうやっているの？」という声が寄せられたため、今回具体的なテクニックとしてご紹介したいと思います。 パ [...]
2023.10.25 WEBWebデザイン Illustratorの3D効果で、アイソメトリック図を作ってみよう！【回転体編】 前回の記事では、Illustratorの3D機能を使って立方体・直方体の作り方をご紹介しました。 アイソメトリック図のおさらい・立方体・直方体の作り方はこちらIllustratorの3D効果で、アイソメトリック図を作ってみよう！【立方体・直方体編】 今回は、「回転体」の作り方をご紹介しようと思い [...]
2023.09.13 WEBWebデザイン Illustratorの3D効果で、アイソメトリック図を作ってみよう！【立方体・直方体編】 アイソメトリックとは アイソメトリックとは、立体の製法のひとつである「等角投影法」のことで、正式には「アイソメトリック・プロジェクション（Isometric Projection）」といいます。 物体を斜め上から見下ろした構図で、傾斜させた立体を、幅・奥行き・高さの3方向で作る角度がそれぞれ120 [...]
