【イラレ】10種のフォントと、シンプルな背景のアイディア（直線） - Books & design & illustration ia19200102 portfolio
直線だけで作る背景です。表紙やWeb画像やスライドの、ちょっとした余白を大急ぎでうめる時の参考に！ 線を面にしてブレンド 線をまとめてグループ化し面のように扱います。コピペと拡大で等間隔に重ねてもいいのですが、ブレンドを使うと、自分では思いつかないような間隔で並べてくれます。どんなブレンド結果が出るのか？意外性があり面白いです。 線を面にしてブレンド。軸を少し動かす ブレンドの中心の軸をパスで調整します。今回はまっすぐ垂直な線をななめにしました。びよーんと曲がる曲線の軸にもできます。これもまた意外性がある効果です。 おしゃれフォント「筑紫Ｂ丸ゴシック」はどんな漢字を打っても清潔感とやさしさと個性が出るフォントです。文字が多い堅めの経済本なども、さわやかで親近感のある雰囲気になるのでおすすめです。 直角をブレンド サイズの異なる大小の直角をブレンドします。直線くくりなのに直角を使うのはちょっ
目を引く作字に！文字の一部に切り込みを入れる加工方法
様々なデザインの参考を探していると、印象に残るようなタイポグラフィの文字デザインなど多くありますよね！ 「これってどうやって作っているんだろう？」「作り方が分からない」というデザイナー向けに、今回は、既成フォントから簡単な加工で印象に残る作字テクニック「文字の一部に切り込みを入れる」をお伝えします。 さく‐じ【作字】 ［名］(スル)印刷で、必要とする活字がないときに、既存の活字の部分を合成したり削ったりして新しい活字を作ること。また、その作った活字。パソコンなどで、内蔵・登録されていない字体を作ることにもいう。 https://kotobank.jp/word/%E4%BD%9C%E5%AD%97-509607 制作方法としてはとっても簡単で、一度覚えてたら、文字デザインの引き出しが増えますし、応用するとデザインの幅が必ず広ががります！ 今回の使用ツールは「Adobe Illustrato
美しいデザインの鍵は「密度を上げる」こと。レイアウトで意識したい、縦横斜めの概念
皆さんはレイアウトを構成するときに「密度」を意識していますか？今回は、情報が多いデザイン、余白が美しいデザインどちらを作りたいときにもいかせる「画面上の密度」について考えます。今まで感覚的に組んでいたレイアウトも、密度を意識することでより洗練されるはずです。 編集・執筆 ／ MAYU KUGUTSU,YOSHIKO INOUE 目次 1.美しいビジュアルは“密度”が高い 2.レイアウトの４つの基本原則 3.レイアウトを組む際に意識したい、縦横斜めの概念 4.要素を足して密度を上げる“足し算のデザイン” 5.余白を使って密度を上げる引き算のデザイン 最後に 1.美しいビジュアルは“密度”が高い あなたが美しいと感じる平面デザインを複数思い浮かべてみてください。「美しい」と感じる理由はさまざまかと思いますが、それらは共通して“密度の高い”画面ではありませんか？ “密度の高さ”を抽象化して表すと
imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im
2022年、Web制作・デザインに役立つ記事の総まとめ
2022年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figmaなどの使いこなし術 フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2022年のもっとも大きなニュースは、IEのサポートが終了したことではないでしょうか。IEに苦しめられていたWeb制作者は非常に多いと思いま
2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！
2023年はついに、CSSで三角関数が主要ブラウザのすべてで使用できるようになります！ CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされており、3月リリースのChrome 111でもサポートされる予定です。 CSSの三角関数を使用すると、複雑なアニメーションに使用するJavaScriptを減らしたり、要素を曲線に配置するレイアウトなどもCSSで実装できます。 Chrome Platform Status CSS Trigonometric functions（三角関数）はCSS Values and Units Module Level 4ですでに定義されています。 sin() 引数として与えた数のサイン ボックスのサイズ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
