Webデザイン

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

Webデザイン

【Illustrator】複数の要素のカラーを一括で変更するワザ

今日はアプリのモックアップなどを作成する時に便利なTipsを紹介します。 例えばこの状況で、headerの色やボタンの色に変更が入ったら、とっても面倒ですよね。ページがたくさんあればなおさらです。 沢山あるオブジェクトをひとつひとつ選択して色を変更しても良いですが、実はこの作業はもっと時短できます。 共通の塗りをまとめて変更する2つの方法 時短の方法は2つあります。Illustratorって便利ですね。 方法1:何度も使用する色を「グローバルなカラー」としてスウォッチに登録す […]

Webデザイン

SVGアニメーションを気軽に作成!Lazy Line Painterを使おう

こんにちは。工藤です。 今回はSVGアニメーションを気軽に作成できるLazy Line Painterについてご紹介します。 1.jQuery本体とjquery.lazylinepainterを読み込ませよう

とりあえずはjQuery本体とGithubからダウンロードした『jquery.lazylinepainter』を読み込ませます。 2.SVG画像を読み込ませてサイト上からコードを作成 サイトをスクロールし […]

Webデザイン

【photoshop】トーンを合わせて写真を自然に合成する

今回はこちらのペンギンの写真に帽子をかぶせる合成をしてみましょう。 ペンギンの写真は青みのトーンが強く、女性の写真は赤みの強い写真なので、このまま切り抜いて合成してしまうと帽子が浮いて見えてしまいます。 そんな時にはphotohsopの「カラーを適用」という機能が大変便利です。カラーを適用の機能について、使い方をお話ししたいと思います。 手順 大まかな手順は下記です。10分程度の作業で完成します。 1.合成元の写真と、合成したい写真、両方のファイルを開く 2.合成したい写真に […]

Webデザイン

【フリー素材】Web年賀状を送ろう!

2018年度、戌年のWeb年賀状を作成しました! 文章や住所を書き換えて、お手持ちのサーバへアップすれば、簡単にWeb年賀状を作成できます。 後は丁寧な文言でメールにてURLを送ればOK完了です。紙の年賀状を刷らなくても良いのでコスト削減にも。 商用利用OKです。ぜひご利用ください。 DEMO zipファイル 更新方法は以下をご一読ください。 更新できる箇所 ①あいさつ文 ②署名 ③画像 ④会社ロゴ ⑤住所 ⑥URL zipを解凍すると、「inde.html」というフォルダが […]

Webデザイン

フリーで使えるwebフォント「Google Fonts」を試してみました

こんにちは、工藤です。 今回はフリーで使えるwebフォント「Google Fonts」を試してみました。 Noto Sansは結構お世話になっているのですが、よく考えると他のフォントはきちんと試したことが無かったもので…。 以降の画像は上段は通常のウェイト、下段は800のウェイトをかけています。 なんとなく表示の参考になりましたら幸いです。 Google Fonts + 日本語 早期アクセス M+ 1p フリーフォントでおなじみM+ 1pです。ちょっと角ばったゴシック体です。 […]

1 2 3 9