はてなブックマーク

WebデザインやUIデザインを、AdobeXDで制作される方も多いかと思います。私も今ではXDをメインでWebデザインを制作しています！ 今回は、XDでデザインを制作される際に「入れておくと便利！役に立つ！」おすすめプラグインをご紹介します。オブジェクト関連・アートボード関連・レイヤー関連・テキスト／フォント関連のカテゴリ別でまとめています。 【おすすめXDプラグイン】オブジェクト関連 Singari［キーオブジェクトに整列・分布］ キーオブジェクトに合わせて、整列と分布ができるプラグインです。 整列機能ならデフォルトの機能がありますが「キーオブジェクト」に合わせた整列できないのです。イラレだとデフォルトで使える機能なので、イラレの操作に慣れている人からすると、とても不便に感じます。 このプラグインを使うと、例えば、以下のように「一番右のオブジェクトを基準に天地中央揃え」のようにキーとなる

今回は「大正ロマン」「昭和レトロ」などのデザインと相性バッチリなレトロでモダンな日本語フリーフォントをご紹介します！ Z世代を中心に、純喫茶やクリームソーダなどの『昭和レトロ』が人気です。それにあわせグラフィックやWebデザインでも懐かしさを感じる「エモい！」レトロデザインも見かけるようになりました。 レトロ感をデザインで表現する際にフォントが大きく影響します。今回は打ち込むだけでレトロ感を感じさせることができる日本語のフリーフォントを選びました。 レトロでモダンな日本語フリーフォント 今回は『レトロでモダン』なフリーフォント、またはAdobe Fontsから使えるフォントをご紹介していきます。フォントによっては「カタカタのみ」「ひらがなのみ」のフォントもあるのでご留意ください。 ※念の為各自で使用ライセンスの確認をお願いします。 キリギリス（Adobe Fonts） 一文字一文字がイラス

今回は、Photoshopで背景が透けているガラスのような透明感ある文字の作り方を解説します。 レイヤースタイルのみで作成できるので、とっても簡単で、インパクトがある文字を作り出すことができます。 ガラスのような透明感ある文字の作り方 今回はこのような背景が透けているガラスのような、プラスティックのような透明感のある文字の作り方を解説していきます！ 作例では、英字を使って解説していますが日本語（ウェイトが太めがオススメ！）でも作成することができます。背景が透けているところが可愛い！ ベース文字の作成 カンバスサイズ：横2000px × 縦1000px背景色：#000000 文字ツールで、以下のサイズと色の文字を作成します。 文字サイズ：500px文字色：#ffffff 背景色やサイズなどはお好みでもOKですが、サイズを変更する場合はレイヤー効果の適用数値が変わってくるので、任意で調整してみ

こちらの記事はアプリ「Adobe Photoshop」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 淡い光刺差し込む「ライトリーク（光漏れ）」の加工方法 このような感じに、オレンジ色の淡い光が差し込んだような加工していきます！素材をオーバーレイするだけなので、とっても簡単に作り出すことができます！ ライトリーク用素材を準備する ライトリーク素材をダウンロードする方法を３つご紹介します。 【１】ストックフォトサイトからダウンロード 普段使っているストック素材サイトなどで【 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】グラ

デザイン制作や資料作成などで、タイトルやキャッチコピーなどの文字をレイアウトする際に「なんだかバランスが悪い」「イマイチ目立たない」「美しくない」と感じる時があるかと思います。 それらを解消するために、文字（フォント）を変えてみたり、文章の伝えやすくするためにサイズを調整したり、文字の視認性・判読性・可読性を高めるための調整を「文字組み」と呼ばれます。 今回は、少しの工夫でグッと良くなる！まずはしっかりと覚えておきたい「文字組み」の基本テクニックをご紹介します。 文字組みの基本テクニックとコツ 助詞は小さくする 「の」「が」「を」などの助詞を小さくすることで、文字や文章にメリハリが生まれ、単語やキーワードを強調させることができます。 特に『タイトル』や『キャッチコピー』など、目立たせたい重要な文字要素で調整することで、文章を読みやすくできたり、視線誘導ができたり、デザインにアクセントをつけ

こちらの記事はアプリ「Adobe Illustrator」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 イラレのアピアランスで立体文字を作る方法！ このような立体文字をイラレのアピアランス機能を使って簡単に作ることができます。立体文字は使い勝手が良く、様々なシーンで使えるので、覚えておくととっても便利なテクニックの１つです！ 【Step1】文字を打ち込み、「新規塗り」を２つ用意する テキストを打ち込みます。背景色を茶色にしていますが、何色でも大丈夫です。 アピアランスパネルを開きます（表示されていない方は上部メニュー［ウインドウ］→［アピアランス］から開くことができます） アピアランスを開いたら、左下の［新規塗りを追加］から２つの『新規塗り』を作成します。 上から１つ目の塗り→文字色になります 上から２つ目の

こちらの記事はアプリ「Adobe Illustrator」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 ハーフトーンとは？ ハーフトーン（網点）とは、グレースケール印刷の場合は、異なるグレーの濃度を、さまざまなサイズのドットの表現。カラー印刷の場合は、シアン(C)、マゼンタ(M)、イエロー(Y)、ブラック(K)で4色それぞれでドットを描画し、重ね表現したものです。印刷物などで、離れた距離から見ているので、紙に写真が描かれているように見えますが、近くで見るとドットの集合体になっています。 今回は、印刷で使われてるハーフトーンの技術を、イラレ上で再現するというテクニックになります！ イラレのカラーハーフトーンの作り方 【Step1】濃淡を作る 単色の場合だとハーフトーンを作ることができないので、濃淡できるように作

デザイン制作において、写真の加工や修正は重要なテクニックの１つです。写真ひとつでデザイン全体の印象が大きく変わってしまうこともあります。 今回は、当ブログで紹介してきたPhotoshopを駆使した、写真加工のアイディアとテクニックを、加工前後の画像を比べながらまとめてご紹介します。自分が作ってみたい写真加工のテクニックが見つかったら、ぜひご参考にしてもらえたら嬉しいです。 できるだけ『わかりやすく』『お手軽』そして『スピーディー』にPhotoshopで写真加工ができるように解説してます！

こちらの記事はアプリ「Adobe Illustrator」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 タイトルやロゴをデザインする８つのアイディアと作り方 フォントを少しアレンジすることで、タイトルやロゴのデザインを作成します。 そのため、使用しているフォントの紹介をしていますが、一部有料フォントも使用していますが、持っていないフォントの場合は似ているフォントなどで代用してもらって全然OKです！ 今回ご紹介する８つのタイトル・ロゴのデザインアイディアです。 映画ポスターや小説表紙っぽいですが、バナーデザイン、ポスターデザイン、Youtubeサムネでも使えるテクニック・アイディアなので、ぜひ参考にしてみてください！ （１）三角形を追加して疾走感・加速感 使用フォント：ＶＤ ロゴジー 特太 文字を斜体に変形 三

このように「文字のオブジェクト」と「黄色の背景オブジェクト」の重なっている部分が、反転させます。 これは文字のパスで切抜きをしているわけではなく、小技テクニックを使っている反転させています！今回はこの作り方になります！ さっそく作ってみましょう。 【Step1】文字と背景オブジェクトを作る 文字レイヤーと背景レイヤーをそれぞれ作成し、重ねます。 背景は四角形でなくて、丸型でも三角形でも、パスデータになっているならどんな形でもOKです！ 【Step2】グループ化をする 文字レイヤーと背景レイヤーの２つを選択した状態で、右クリック→［グループ］でグループ化します。 グループ化をしておかなければ、この後の工程でうまく反映できなくなってしまうので要注意です。 【Step3】パスファインダー→［中マド］を適用 【Step2】で作成したグループを選択した状態で、上部メニュー［効果］→［パスファインダー

デザナビでは、フォトショップやイラストレーターを使って様々な加工方法をいくつか解説しています！ その中からイラストレーター(イラレ)を使った文字の�加工方法のチュートリアル記事をピックアップしてまとめていきます。 今後も現在掲載している記事以外にも随時更新・追加していきますので、もし良ければブックマークなどしておいてもらえたら嬉しいです。ぜひ参考にしてみてください！

2023年9月22日 【2023年】Figmaの勉強におすすめ本！初心者〜上級者までレベル別にご紹介！