サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ドラクエ3
wkwkdesign.com
今回は、Illustratorの3D機能を使用して、バルーンのような膨らんだ文字に加工する方法を紹介します。 Illustrator 2023を起動する際に、表示されるスプラッシュ画面(以下の画面)で使用されている作品が個人的に気になりました。イラレでそれを再現できるかどうか調べてみたところ、3D機能を使うことで簡単に作成できました。もし興味のある方がいらっしゃいましたら、ぜひ参考にしてみてください! ポイント こちらの記事はアプリ「Adobe Illustrator」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 画像引用:Adobe Illustrator 2023 スプラッシュ画面(起動画面) バルーンのように膨らんだ文字を作る方法 今回は、このようにバルーンのように膨らんだ文字を作る方法を紹介していきま
こちらの記事はアプリ「Adobe Illustrator」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 ブレンドツールの基本 「ブレンドツール」とは、2つ以上のオブジェクトを繋げることで、中間のオブジェクトを作り出し、均等に分布させることができる機能です。上記作例のように、丸と四角形の2つのオブジェクトを作成し、ブレンドツールで繋げることで、丸から四角形に形状を変化させ、カラーもブレンドすることが可能になります。 この「ブレンドツール」を使うことで、デザイン制作やイラスト制作で面白い表現ができるようになるので、覚えておくと便利な機能です。 ブレンドツールの使い方 ブレンドツールを使うには大きく3つの方法があります。 ブレンドツールの使い方【方法①:ツールバー】 ツールバーより[ブレンドツール]を選択し、2つの
現在のWebデザインの主流スタイルの1つに「フラットデザイン」というスタイルがありますが、源流を辿ると19世紀に発祥した『スイス・スタイル』や『バウハウス』がルーツとされています。 このようにデザインスタイルは0から生まれるだけではなく、過去に流行したスタイルが現代風にアレンジされ、リバイバルされ、取り入れられることも多いのです。 『故きを温ね新しきを知る』 デザインの表現力を広げるなら、自分の知識だけではなく、過去の事跡や先人の知恵に学ぶことで、現在を考えるということです。 ということで、今回はデザイン史をすべて取り上げることが難しいので、近年によく見かけるデザインスタイルをピックアップしてご紹介します! アール・ヌーヴォー 出典元:アルフォンス・ミュシャ代表作のひとつ『夢想』(1898)(wikipedia) アール・ヌーヴォーとは、「新しい芸術(Art Nouveau)」を意味するフ
こちらの記事はアプリ「Adobe Illustrator」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 イラレでノイズグラデーションを作ってみよう! 今回の解説(チュートリアル)での、完成品です!質感があるだけで、印象がすごく変わってきます。 一度覚えておくと今後いろんなシーンでも使えるかなと思うので、是非覚えておきましょう! 【Step1】文字を打ち込む 文字サイズ:100pt 使用フォント:IMPACT(フォントをお好きなものでOKです) お好きな文字をテキストツールを使って打ち込みます。 文字サイズによって、後工程の数値などに影響してくるので、今回は文字サイズは[100pt]で設定しています。 文字色、背景色は何色でも大丈夫です。最終工程で自由に変更できます。 【Step2】グラデーションオブジェクトを
デザインを始めてから文字の大切さを学んだものの「フォントってたくさんありすぎてどれから覚えれば良いかわからない!」と嘆いてる方もたくさんいるかと思います。 今回紹介するのは、世界中のデザイナーから愛されている”ド定番”のサンセリフ系(ゴシック系)のフォントをご紹介します! フォントを学びたいならまず定番フォントから抑えておけば、実際のデザイン現場でもフォント選びで悩む時間を短縮できるはずです。 フォントはとても奥が深く、すべてを解説できませんが、簡単に各フォントの特徴や使用事例などを触りだけ解説しています。もしもっと学びたい方は、フォントの本を買ってみたり、調べてみたりすると、フォント沼の深みにハマりとっても面白いかなと思います! 本記事で紹介しているフォントを実際にデザインで使用してみることで、フォントごとの癖や特徴などの理解が深まります。パソコンのOSによっては、入っているフォントが違
WebデザインやUIデザインを、AdobeXDで制作される方も多いかと思います。私も今ではXDをメインでWebデザインを制作しています! 今回は、XDでデザインを制作される際に「入れておくと便利!役に立つ!」おすすめプラグインをご紹介します。オブジェクト関連・アートボード関連・レイヤー関連・テキスト/フォント関連のカテゴリ別でまとめています。 【おすすめXDプラグイン】オブジェクト関連 Singari[キーオブジェクトに整列・分布] キーオブジェクトに合わせて、整列と分布ができるプラグインです。 整列機能ならデフォルトの機能がありますが「キーオブジェクト」に合わせた整列できないのです。イラレだとデフォルトで使える機能なので、イラレの操作に慣れている人からすると、とても不便に感じます。 このプラグインを使うと、例えば、以下のように「一番右のオブジェクトを基準に天地中央揃え」のようにキーとなる
こちらの記事はアプリ「Adobe Photoshop」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 ぷるっと光沢のある文字を作る方法 このように文字に光沢が入ることで、ぷるっと立体感がある文字を作る方法を解説します! サンプルPSDもダウンロード可能なので、うまくできない方はダウンロードして参考にしてみてください。 テキストの作成 キャンバスサイズ:横1000px × 縦500px 使用フォント:キリギリス 文字サイズ:300pt 文字色:#0078ff お好きな数値に変更して、作成しても大丈夫ですが、後工程で作成するレイヤー効果の数値も適宜調整しながら、作成してみてください。 レイヤー効果を適用 ベベルとエンボス スタイル:ベベル(内側) 深さ:1000% サイズ:10px ソフト:1pt 角度:90° 高
今回は「大正ロマン」「昭和レトロ」などのデザインと相性バッチリなレトロでモダンな日本語フリーフォントをご紹介します! Z世代を中心に、純喫茶やクリームソーダなどの『昭和レトロ』が人気です。それにあわせグラフィックやWebデザインでも懐かしさを感じる「エモい!」レトロデザインも見かけるようになりました。 レトロ感をデザインで表現する際にフォントが大きく影響します。今回は打ち込むだけでレトロ感を感じさせることができる日本語のフリーフォントを選びました。 レトロでモダンな日本語フリーフォント 今回は『レトロでモダン』なフリーフォント、またはAdobe Fontsから使えるフォントをご紹介していきます。フォントによっては「カタカタのみ」「ひらがなのみ」のフォントもあるのでご留意ください。 ※念の為各自で使用ライセンスの確認をお願いします。 キリギリス(Adobe Fonts) 一文字一文字がイラス
今回は、Photoshopで背景が透けているガラスのような透明感ある文字の作り方を解説します。 レイヤースタイルのみで作成できるので、とっても簡単で、インパクトがある文字を作り出すことができます。 ガラスのような透明感ある文字の作り方 今回はこのような背景が透けているガラスのような、プラスティックのような透明感のある文字の作り方を解説していきます! 作例では、英字を使って解説していますが日本語(ウェイトが太めがオススメ!)でも作成することができます。背景が透けているところが可愛い! ベース文字の作成 カンバスサイズ:横2000px × 縦1000px背景色:#000000 文字ツールで、以下のサイズと色の文字を作成します。 文字サイズ:500px文字色:#ffffff 背景色やサイズなどはお好みでもOKですが、サイズを変更する場合はレイヤー効果の適用数値が変わってくるので、任意で調整してみ
こちらの記事はアプリ「Adobe Photoshop」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 淡い光刺差し込む「ライトリーク(光漏れ)」の加工方法 このような感じに、オレンジ色の淡い光が差し込んだような加工していきます!素材をオーバーレイするだけなので、とっても簡単に作り出すことができます! ライトリーク用素材を準備する ライトリーク素材をダウンロードする方法を3つご紹介します。 【1】ストックフォトサイトからダウンロード 普段使っているストック素材サイトなどで【 Light Leak 】や【ライトリーク】と検索すると黒地に光が差し込んだような素材がでてくるので、お好きな画像をダウンロードしましょう。 上記サイトは『Adobe Stock』です。有料・無料どちらもあり、AdobeCCユーザーなら無料素材
タイポグラフィをメインに使ったビジュアルデザインなどで、フォントをそのまま使う場合が多いですが、少し遊び心として、ワンポイントで少し加工をするだけでデザインのクオリティがグッと上がります! 今回はIllustrator(イラレ)を使って、文字の画線の交差部分に滲んだ「墨だまり文字」と、レトロな活版印刷のような「かすれた文字」を表現するチュートリアルを解説します! 今回のチュートリアルで使っているIllustratorのバージョンは「Illustrator 2021」を使っていますが、相当古いバージョンじゃなければ同じ機能が恐らくあるはず。(なかったらすいません!)
町中で見かけたポスターデザインや、Webサイトのバナーデザインなど見ている際に「使用しているこのフォントはなんだろう?」と気になる瞬間があるかと思います! 有名なフォントならなんとなくわかるけど、初めて見るようなフォントはまったくわからないですよね。 そんなときに使えるフォントを調べる6つの検索方法をご紹介いたします。 スマホアプリ「Adobe Capture」をフォントを使って調べる方法 アプリ「Adobe Capture」でフォントを調べる方法は「英語のみに対応」しています。 検索方法はとても簡単で、スマホのカメラで調べたい文字を撮影すると、同じフォントまたは類似しているフォントを2万種類あるフォントサービスAdobe Fontsから抽出して表示してくれるという方法になります。 【Step1】「Adobe Capture」アプリダウンロード iPhoneユーザーはApp Storeから
手書きフォントを使うことで、手作りの雰囲気や人の温もり人肌感が感じさせるデザインを作り出すことができます。バナーやグラフィックでもデザインのアクセントとして使うことが多々あるかと思います。 個人的にもデザインで手書きフォントを使うことがあり、今までの数多くの手書きフォントを使ってきました。今回はその中でも、よく使うおすすめの手書きフリーフォント(またはAdobe fonts)をご紹介します。 最近さまざまな業界やジャンルで良く見かけるようになってきた手書きロゴ👀エモい。 pic.twitter.com/BaULGVrver — ナナ👀デザナビ|デザインを図解で解説 (@wkwdesigner) February 17, 2022 上記のツイートで紹介しているロゴは、実際に書いて作成していると思いますが、共通しているのは少し右上がり角度になっている手書き文字が最近トレンドのようです。右上
フォントの印象でデザインの印象が大きく変わってくるので、フォント選びはとっても大切です。 フォントの種類もたくさんあって迷ってしまいがちですが、今回はオススメの『可愛い!』無料で使える日本語フリーフォントをご紹介します! かわいい日本語フリーフォント 本記事では、漢字も収録されている『可愛い!キュート!プリティ!』な日本語フリーフォント、またはAdobe Fontsから使えるフォントをご紹介していきます。 ※念の為、各サイトで使用ライセンスの確認をお願いします。 今回ご紹介する『可愛いフリーフォント』は手書き風フォントは除外しております。手書きフリーフォントをお探しの方はこちらの記事をあわせて参考にしてもらえれば嬉しいです 2022年2月19日オシャレでエモい!手書き日本語フリーフォントと右上がり加工方法 キリギリス(Adobe Fonts) 商用利用可 Adobe Fonts みんな大好
こちらの記事はアプリ「Adobe Illustrator」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 【Step1】オブジェクトを作成→【Step2】アピアランス:新規塗りを追加 【Step1】オブジェクトを適用したいオブジェクトを作成しましょう。 【Step2】そのオブジェクトを選択した状態で、アピアランスパネルから「新規塗り」を追加します。(アピアランスパネルは上部メニューのウィンドウ→アピアランスで表示できます) 【Step3】新規塗りをグラデーションを適用する 【Step3】Step2で追加したオブジェクトをグラデーションに設定します。 グラデーションの設定は、「白→黒」に設定しておき、白の不透明度は0%に設定しておきましょう!(黒の方がこのあとノイズが適用される部分になります) 【Step4】グラ
デザイン制作や資料作成などで、タイトルやキャッチコピーなどの文字をレイアウトする際に「なんだかバランスが悪い」「イマイチ目立たない」「美しくない」と感じる時があるかと思います。 それらを解消するために、文字(フォント)を変えてみたり、文章の伝えやすくするためにサイズを調整したり、文字の視認性・判読性・可読性を高めるための調整を「文字組み」と呼ばれます。 今回は、少しの工夫でグッと良くなる!まずはしっかりと覚えておきたい「文字組み」の基本テクニックをご紹介します。 文字組みの基本テクニックとコツ 助詞は小さくする 「の」「が」「を」などの助詞を小さくすることで、文字や文章にメリハリが生まれ、単語やキーワードを強調させることができます。 特に『タイトル』や『キャッチコピー』など、目立たせたい重要な文字要素で調整することで、文章を読みやすくできたり、視線誘導ができたり、デザインにアクセントをつけ
バナーデザインの作成の手順とコツ! バナーデザインに慣れていない新人デザイナー・新米デザイナーに向け、バナーデザインの手順とコツを紹介します。 デザイナーによって、作り方や手順に違いはあると思いますが、今回ご紹介する手順を基本として覚えておくと良いかもしれません。 今回は、ECサイトの「セールのお知らせバナー」を制作する想定で、上記の作成流れを細かく解説します。 【Step.1】要件整理 手を動かす前に、まずはバナーの要件定義・整理から行ってみましょう。要件定義とは、制作物の目的やターゲットなどのわかりやすく言語化してまとめていく作業です。 事前に要件定義と整理をしておくことで、制作を進めて行くうちに立ち返ることができ、目的の脱線を防止する役割も果たすことができます。 以下のような情報を、ノートやメモアプリなどにドキュメント化しておきます。 バナーの目的 「期間限定でイベントが開催するので
こちらの記事はアプリ「Adobe Illustrator」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 イラレのアピアランスで立体文字を作る方法! このような立体文字をイラレのアピアランス機能を使って簡単に作ることができます。立体文字は使い勝手が良く、様々なシーンで使えるので、覚えておくととっても便利なテクニックの1つです! 【Step1】文字を打ち込み、「新規塗り」を2つ用意する テキストを打ち込みます。背景色を茶色にしていますが、何色でも大丈夫です。 アピアランスパネルを開きます(表示されていない方は上部メニュー[ウインドウ]→[アピアランス]から開くことができます) アピアランスを開いたら、左下の[新規塗りを追加]から2つの『新規塗り』を作成します。 上から1つ目の塗り→文字色になります 上から2つ目の
こちらの記事はアプリ「Adobe Illustrator」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 ハーフトーンとは? ハーフトーン(網点)とは、グレースケール印刷の場合は、異なるグレーの濃度を、さまざまなサイズのドットの表現。カラー印刷の場合は、シアン(C)、マゼンタ(M)、イエロー(Y)、ブラック(K)で4色それぞれでドットを描画し、重ね表現したものです。印刷物などで、離れた距離から見ているので、紙に写真が描かれているように見えますが、近くで見るとドットの集合体になっています。 今回は、印刷で使われてるハーフトーンの技術を、イラレ上で再現するというテクニックになります! イラレのカラーハーフトーンの作り方 【Step1】濃淡を作る 単色の場合だとハーフトーンを作ることができないので、濃淡できるように作
デザイン制作において、写真の加工や修正は重要なテクニックの1つです。写真ひとつでデザイン全体の印象が大きく変わってしまうこともあります。 今回は、当ブログで紹介してきたPhotoshopを駆使した、写真加工のアイディアとテクニックを、加工前後の画像を比べながらまとめてご紹介します。自分が作ってみたい写真加工のテクニックが見つかったら、ぜひご参考にしてもらえたら嬉しいです。 できるだけ『わかりやすく』『お手軽』そして『スピーディー』にPhotoshopで写真加工ができるように解説してます!
【Step2】写真を透過で配置、レイヤーフォルダを分ける トレース作業がしやすいように以下のようにレイヤー環境を作成しておくと、トレース作業がしやすくなります! 写真をイラレで配置後、写真レイヤーとイラストレイヤーを分ける。 写真レイヤーの不透明度を50%に設定。(トレースした際に、線が見えづらくなってしまうため。) 写真レイヤーはロックをかけておく 【Step3】ブラシを作成する(おすすめ設定) トレースしていく際の線になるブラシを作成しておきます。画像の一番上が通常パスの均等線ですが、下2つの作成ブラシ線は『書き始めと書き終わりが若干細く』なっています。 均等線で描くとちょっと無機質なイラストになってしまうのですが、線に太い線と細い線など抑揚を付けておくことでイラストがいい具合の味がでてくるので、私はいつもこのようなブラシを使っています。 必ずこのブラシを使ったほうが良いというわけでは
こちらの記事はアプリ「Adobe Illustrator」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 タイトルやロゴをデザインする8つのアイディアと作り方 フォントを少しアレンジすることで、タイトルやロゴのデザインを作成します。 そのため、使用しているフォントの紹介をしていますが、一部有料フォントも使用していますが、持っていないフォントの場合は似ているフォントなどで代用してもらって全然OKです! 今回ご紹介する8つのタイトル・ロゴのデザインアイディアです。 映画ポスターや小説表紙っぽいですが、バナーデザイン、ポスターデザイン、Youtubeサムネでも使えるテクニック・アイディアなので、ぜひ参考にしてみてください! (1)三角形を追加して疾走感・加速感 使用フォント:VD ロゴジー 特太 文字を斜体に変形 三
ここ数年「Z世代」を中心に、音楽、写真、ファッション、フードをはじめ、さまざまな分野でレトロブームが流行しています。 もちろんこのレトロブームは、Webデザインにも大きく影響しており、レトロテイストを取り込んだデザインがトレンドになっています。 今回は、レトロデザインを細分化した『ジャンル名』と『特徴』と『Webデザインに上手く取り入れられているデザイン事例』をまとめてみました。Webデザイン、グラフィックデザインなどでも使えるネタなので、覚えておいて損なしです!参考になれば嬉しいです。 レトロデザインの9つのジャンル 昨今のレトロブームの影響やデザイントレンドから、Webデザインのレトロテイストでは以下の9つのジャンルが主に取り入れられているように感じます。今回の記事では、以下の9つのジャンルに絞ってデザインを解説していきたいと思います。 ヴェイパーウェイブデザイン(Vaporwave)
自分のカメラやスマホで写真を撮影する時、Webデザインで写真をトリミングする時、撮影ディレクションを任された時、写真に関わるシーンで知っておくと「バランスの良い」写真に見える便利な構図を12つ紹介します。 普段写真をなんとなくで撮るんではなく、色んな構図のパターンを知っておくと「バランスの良い写真」を撮れるようになります👀 pic.twitter.com/Gzt3DWtX5g — ナナ👀デザナビ|デザインを図解で解説 (@wkwdesigner) November 29, 2021 twitterでも多くの方に見て頂けたので、一覧でサクッと見たい方は上記twitterより! バランスが良くなる写真構図の12のパターン バランスが良いとは、写真からストーリーを感じることができ、写真の被写体(主役)がひと目が伝わってくる魅力的な写真と思っております。 デザイナーの方で写真をトリミングをする
このように「文字のオブジェクト」と「黄色の背景オブジェクト」の重なっている部分が、反転させます。 これは文字のパスで切抜きをしているわけではなく、小技テクニックを使っている反転させています!今回はこの作り方になります! さっそく作ってみましょう。 【Step1】文字と背景オブジェクトを作る 文字レイヤーと背景レイヤーをそれぞれ作成し、重ねます。 背景は四角形でなくて、丸型でも三角形でも、パスデータになっているならどんな形でもOKです! 【Step2】グループ化をする 文字レイヤーと背景レイヤーの2つを選択した状態で、右クリック→[グループ]でグループ化します。 グループ化をしておかなければ、この後の工程でうまく反映できなくなってしまうので要注意です。 【Step3】パスファインダー→[中マド]を適用 【Step2】で作成したグループを選択した状態で、上部メニュー[効果]→[パスファインダー
デザナビでは、フォトショップやイラストレーターを使って様々な加工方法をいくつか解説しています! その中からイラストレーター(イラレ)を使った文字の�加工方法のチュートリアル記事をピックアップしてまとめていきます。 今後も現在掲載している記事以外にも随時更新・追加していきますので、もし良ければブックマークなどしておいてもらえたら嬉しいです。ぜひ参考にしてみてください!
2023年9月22日 【2023年】Figmaの勉強におすすめ本!初心者〜上級者までレベル別にご紹介!
このページを最初にブックマークしてみませんか?
『デザナビ|マネしてデザインを学ぶブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く