WEBデザイン

WEBデザイン

【Illustrator】文字の属性をリセットする方法

先日の「できるかもデザイン」でプロのデザイナー2名が、イラレを使ってあえてダサく作った名刺のリデザインをしていました。文字の扱いに関する解説を聞いていた中で「これは使えるかも!」と思ったショートカットがあったので備忘録として残しておきます。...
WEBデザイン

【Adobe Fonts】2021年9月10日に提供終了予定のフォント

先月、Adobeさんが2021年9月10日以降「Adobe Fontsの一部フォントの提供を終了する」という旨のお知らせをしていました。どうやらモリサワフォント25種が対象のようです。 使用頻度高めなフォントが結構入っていたので残念ではあり...
WEBデザイン

【コーディング備忘録】改行タグ<br>に余白を指定する方法

文章を改行する際に使用する<br>タグですが、文章の余白を調整するのにも便利だったりします。 今回は、長文を読みやすくするために行間や段落間の余白を空けたい時に有効な<br>の活用法を解説したいと思います。 See the Pen <br>...
WEBデザイン

ロゴ制作で学んだことを振り返る

先月のお話になりますが、ある会社さんのデザイン・コーディング・ロゴ制作を全て任せていただきました。 その中でもロゴ制作は業務の中では初めての経験だったので、大変ながらも学びの多い機会を得ることができました。そこで、制作の中で学んだこと、意識...
WEBデザイン

【コーディング】カーソルを乗せると画像が「ズームイン」するホバーエフェクトの実装方法をご紹介

画像やリンクボタン等にカーソルを乗せた時の動きを「ホバーエフェクト」と呼びますが、調べてみると沢山の種類のエフェクトが紹介されていたりします。その中でもメジャーなズームイン系のホバーエフェクトを先日初めて使ってみたので、この場でおさらいして...
WEBデザイン

【コーディング備忘録】○番目の要素を指定する際の「nth-child」と「nth-of-type」について学ぶ

「○番目」や「奇数・偶数」などの特定の要素にだけ変化をつけたい、そんな時に便利な疑似クラス「nth-child」と「nth-of-type」について学んでみましょう。使う機会は多いものの、忘れたりごっちゃになったり、なかなか定着しないので簡...
WEBデザイン

【Illustrator】オブジェクトの拡大・縮小で変化する線幅の対処法

イラレでは初期設定の状態だと、オブジェクトを縮小するとこのようにオブジェクトの大きさに対して線幅が太くなってしまいます。元の線幅を維持したまま縮小しているからこうなってしまうんですね。 そこで今回は、線幅を大きさに応じて可変させながらオブジ...
WEBデザイン

【Illustrator】表示されるとなかなか消せないアレ(遠近グリッド)の消し方

イラレを使用中に、たまに表示されるコレ。ピンとくる方いないでしょうか。 遠近グリッドというツールで、上図の二点透視図法のような遠近表現をする際に便利なガイド機能です。結構な頻度で現れ、消そうにもなかなか消えてくれず、時間のロスになる事があり...
WEBデザイン

【Illustrator】写真の被写体を切り抜く方法〜クリッピングマスク〜

さて今回は、イラレのクリッピングマスクを使って写真や画像の被写体を切り抜いていきますよー。 やり方は、①ペンツールで被写体をなぞって、②クリッピングマスクをかけるというシンプルな工程ではありますが、ペンツールに慣れていないと苦戦するかもしれ...
WEBデザイン

【Illustrator】画像を文字で切り抜く方法〜クリッピングマスク〜

みなさん、イラレのクリッピングマスクは活用してますか? 個人的にはかなり使用頻度の高い機能のひとつなので、マストで覚えるべき機能だと思います。 そこで今回は、クリッピングマスクを使って①画像を文字で切り抜く方法と、 ②画像をオブジェクトのパ...