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 [...]
2023.08.08 BUSINESS仕事効率化ツール ＜Google拡張機能＞webページ内の画像をまとめてダウンロードできる「Image Downloader」 webサイトのページ内の画像を一括でダウンロードできたなら、と思ったことはありませんか？ 弊社では、クライアントのwebサイトから二次利用可能な画像をダウンロードし、それらを用いてリニューアルページを作成することがよくあるため、画像のダウンロードは頻繁に行っています。 そのたびに、画像を右クリック [...]
2023.07.06 WEBWebデザイン 【Illustrator】一度作った装飾を保存しておける！「グラフィックスタイル」のご紹介 「グラフィックスタイル」とは？ Illustratorの「アピアランス」で指定した、「塗り」「線」「変形」や「効果」といったオブジェクトの装飾を保存しておくことで、いつでも他のオブジェクトに適用することができる機能です。 アピアランス機能について、詳しくは過去の記事でご紹介しています。 グラフィッ [...]
2023.06.06 WEBWebデザイン 【Illustrator新機能】複雑な重なりを簡単に表現できる！「クロスと重なり」機能をご紹介します 2022年10月、Illustrator（ver27.0）に様々な新機能が追加されました。 その中の一つ、「クロスと重なり」機能がとても便利かつ楽しいのでご紹介します！ 「クロスと重なり」とはどんな機能？ 簡単にいうと、複数のオブジェクトのレイヤーを部分的に入れ替えることができる機能です。 （Il [...]
2023.05.09 BUSINESS仕事効率化ツール 【Googleスプレッドシート】重複している値を確認・削除する方法 データ集計をしていると、重複している値を削除して一意の値にしたいケースがあります。 例として、下記表は「重複している値」が含まれた都道府県の一覧です。 情報量が少なければ目視で重複を確認・削除ができますが、データの件数が多くなってくると確認や削除に時間がかかりますし、精度も落ちます。 重複した値 [...]
