フィルターを重ねて自然な活字風の文字を表現 - MdN Design Interactive
ふつうに入力した文字でも、ちょっとした質感をプラスすることでデザイン全体の雰囲気を高めることができる。しかし、実際に手作業でつくるとなるとたいへんで手間もかかる。ここでは、インクのにじみや質感を表現した活字風の文字を作成する。ファイルサイズは100（W）×70（H）mm、解像度は350dpiで作業する。 ①下地となる文字を作成 まず、テクスチャ感のある下地の紙をPhotoshopで開いたら（左）、新規レイヤーを作成して白で塗りつぶす。次に、横書き文字ツールで文字を入力したら、前面の文字のレイヤーとその背面の白で塗りつぶしたレイヤーを結合し、［描画モード：乗算］にする（右） ②文字のエッジを滑らかにする 次に、描画色を黒、背景色を白に設定したら、“ブラシストローク”→“はね...”フィルターを［スプレー半径：8］、［滑らかさ：8］にして適用（左）。続いて、“スケッチ” →“スタンプ...”フ
デザインは基本が大切！ひとつ一つをしっかり見直しておきたい20のデザインテクニック
文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基本となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。 カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間のスペースを均等にし、テキストを美しく整然とした一つのまとまりにデザインします。 カーニングがされていない、カーニングがいいかげんな仕事は、デザインの世界において大罪の一つです。カーニングはデザイナーが早い段階で身につけるべき重要なスキルです。 20 Typography Mistakes Every Beginner Makes 基本的だけど大切なタイポグラフィのシンプルな14のルール リーダビリ
【フォントの些事】第2回 Photoshopでの文字詰めとフォントのボディについて | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、デザイナー兼イラストレーターのもりたです。 前回の「【フォントの些事】第1回 インストールする前に確認したいフリーフォントの基礎知識」で次回予告したものがうまくまとめられなかったので、今回は第3回で予定していた、Photoshopのフォントと文字ウィンドウについて書きます！ 普段仕事でPhotoshopを使ってる人でも、文字ウィンドウはその数値が何を指しているのかよくわからないまま使っていることが多いんじゃないでしょうか。 特に文字詰めに使用する「カーニング」「トラッキング」「ツメオプションの設定」の違いがいまいちよくわからない。 例えば「ツメオプションの設定」の「100％」という数値は、文字のどこを基準に何が100％詰まるの？とか。「トラッキング」の数値って何を基準に100なの？ピクセルじゃないしな？とか。 正直に言っちゃえばWebでは文字詰めをそんなに細かく設定することがないの
明朝体は絶滅するのか？ AXIS Font生みの親の挑戦
「明朝体はこのままだとあと20年もすればこの世から消えてしまうかもしれない」。独立系フォントベンダーであるタイププロジェクト社長の鈴木功さんはそう語る。鈴木さんはタイプデザイナーであり、デザイン業界で評価の高いAXIS Fontの生みの親として知られる人物だ。 事実、明朝体を目にする機会は激減している。PCのWebブラウザーはもちろん、スマートフォン、タブレットといったデバイスの基本フォントはいずれもゴシック体。ニュースは新聞ではなくニュースサイトやアプリでチェックし、知りたいことは本ではなくググるかFacebookで尋ねる時代。紙媒体ですら、ゴシック体で堂々と本文を組む書籍が増えた。私自身、Web業界の経験が長い新人編集者に、明朝体で組まれた新刊のゲラを「なんか読みづらい」と言われてしまった経験がある。 「気持ちが悪い」から始まった、明朝体の居場所作り 6年前。鈴木さんには忘れられないエ
多言語対応で超ハイクオリティーなフリーフォント「Noto Fonts(Source Han Sans・源ノ角ゴシック)」 #LOVEFONT | 世界同一理論
12月 12 2014 | fonts 多言語対応で超ハイクオリティーなフリーフォント「Noto Fonts(Source Han Sans・源ノ角ゴシック)」 #LOVEFONT この記事は#LOVEFONT Advent Calendar 2014の12日目の記事です。 去年に引き続き2度目の参加です。今年はつい先日話題になったばかりの巨大フォントプロジェクト、Noto Fontsを紹介したいと思います。 ※本来は私の本ブログのほうに置こうと思ってたのですが、現在ブログがぶっ壊れていて復旧できていないので、一時的にGitHub Pagesに置いています。パーマリンクはhttp://blog.hakatashi.com/exhibit/noto-fonts/です。 ※私はGoogleの中の人とかでは全くない完全な一般人なので、一部記述に誤りを含むかもしれません。間違いを発見した場合は遠慮
WEBデザイナーになるには
日本のWEBデザインをけん引し続けてきたテリー春子さんからの寄稿 WEBデザイナーになりたい学生のみなさんこんにちは。 テリー春子です。 WEBデザイナーになるにはどうしたいいのでしょうか？ そういった質問にこれまで1000回以上答えてきました。 私の答えはこうです。 「知りません」 そうわたしはWEBデザイナーになる方法を知らないのです。 唯一分かっていることと言えば、私がWEBデザイナーになれたというその事実だけです。 だからわたしはこう付け足します。 「わたしになれ」と。 初めてのホームページ作成 いわゆる「ファンサイト」と呼ばれるものをつくりました。 好きな作品についての二次創作や交流の場を提供するタイプのものです。 正直古いお話なので、今何かの役にたつかはわかりませんが、作成時期に言及がありませんでしたので昔話です。 レンタルサーバーは今はもうサービス終了したinfoseekが多
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
文字列を省略して「…」を付与する方法 – CSS/jQuery | DevelopersIO
通常、設計・デザインの段階であらかじめ表示する文字数の上限を決めておき、PHPやRuby、Javaなどサーバサイドで表示する文字列を加工することが多いかと思います。 しかし、この方法だと動的に変化する領域を基準に表示する文字数を制限する場合や、文字サイズや表示領域のサイズに合わせて上限を算出する場合に限界があります。 そこで、クライアントサイドで表示領域から文字列がはみ出す場合、文字列を省略して省略記号「…」をつける方法を紹介してみたいと思います。 実現方法として以下の2つの方法があります。 text-overflowプロパティを使う jQueryで表示領域の幅・高さに合わせて文字列を加工する text-overflowプロパティを使う text-overflowプロパティを用いると、文字列が表示領域からはみ出してしまった場合、はみ出した文字列を省略記号「…」で省略することができます。 尚
[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js
ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.Kerning.jsのデモ jQuery.Kerning.jsの使い方 jQuery.Kerning.jsのデモ デモでは上：カーニング無し、下：カーニング有りの状態で、明朝とゴシックの2書体がチェックできます。 適用されている方が、読みやすいですね。 ゴシック体のデモ、上：カーニング無し、下：カーニング有り jQuery.Kerning.jsの使い方 Step 1: 外部ファイル jquery.j
連載『嘘じゃない、フォントの話』(supported by モリサワ) 第11回目 ブックデザイナー祖父江慎インタビュー P3 | CINRA
『嘘じゃない、フォントの話』 連載『嘘じゃない、フォントの話』(supported by モリサワ) 第11回目 ブックデザイナー祖父江慎インタビュー P3 それでは続いて、ゴシック体についてのお話をうかがえますか？ 祖父江：ゴシック体を使うのは、例えば今行っているようなインタビューであるとか、物事を記録したようなものが多いですね。それから、ブログを書籍化したものや、子どもの本などですね。一般の読み物には明朝体を使うことが多いです。またゴシック体だと、視覚障害の方でも読みやすいという特徴があります。明朝体のように文字によって太さの差があると、なんの文字なのかわからなくなる場合があります。それから雑誌もゴシックが似合いますよね。 なぜ似合うんでしょう？ 祖父江：それは、雑誌が扱うのが、おもに情報だからですよ。味わって読むためには明朝体、情報収集にはゴシックが合っています。一概にはそう言えない
Photoshopで文字をよりシャープにクリアに見せるこつ -1px未満のこだわり
dribbbleに投稿されたデザインで、コメントのやり取りがちょっと興味深いものなので紹介します。 簡単に意訳すると、 ビジター「デザインきれいだな、文字周りの処理に秘訣とかあるの？」 オーナー「文字をクリアにみせるために、Photoshopでこういう風にやってるよ。」 という感じです。
校正記号これだけ知ってると大丈夫---あいわプリント
印刷に校正はつきものです。校正は原稿と校正刷りを対照し，誤りを修正指示したり，組版を修正指示したりする作業です。原稿の誤りを訂正する機会でもあります。（推敲する機会ではありません。） 出版社を介さない町の印刷物は著者や発注者が校正してその内容に責任を負うことになります。また，印刷所に出すものでなくても文章の推敲や点検をする機会は多いものです。画面の上でただちに直せることもありますが，紙に一旦プリントして加筆するほうが考えがまとまりやすいこともあります。 校正記号はこれを簡便に正確に記述する便利な記号です。印刷物校正には是非使用してください。 校正記号もJISZ 8208で2007年に改正がありました。より明確に幅の広い指示の仕方が認められています。記入しやすくかつ間違いを誘発しない書き方を考えて見ます。 記入は赤ボールペンで。 鉛筆や黒のボールペンは不適当です。 赤ダマートやクレヨンのよう
Adobe Photoshopで文字をはっきり、くっきりさせる方法 - (DxD)∞
Adobe Photoshopでかなり前から試行錯誤していることがあります。文字がどうしてもぼやけるというか、滲んでいるように見えてしまう場合があるのです。なんとかはっきり、くっきりさせられないかと色々試してみた結果、それなりに満足できる結果が得られたのでまとめておきます。 ラスタライズが前提であれば、フィルタなどで調整できる可能性はありますが、後から文字を変更したい場合に面倒なので、できればラスタライズしないでなんとか綺麗に見える方法がないかと試行錯誤してみました。使用しているのはCS2なので、バージョンによっては微妙な違いがあるかもしれません。 Photoshopの文字ツールの設定 まずは基本中の基本です。Photoshopの文字ツールは、注意しておかないと、すぐに文字のアンチエイリアスのかかり方が変わってしまいます。どういった場合にそうなるかというと、既に入力済みの文字を「文字ツール
[webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス
書体デザイナーと話し、長年の疑問を全て解消してきました 先日、[クリエイター]英Monotype社の書体デザイナー大曲都市さんに会いにいってきましたという記事を書きました。このときはたまたま英Monotype社の書体デザイナーの大曲都市さん(@Tosche_J)としっかりと話をする機会を得たわけですが、そこで私がフォントについて「こうだと思っているけど実際どうなのか」という質問をたくさんぶつけてきました。 私としてはすごく納得がいき、フォントというモノに対する認識がはっきりしました。なので今回はその都市さんから聞いた話を踏まえた上で私の現時点でのフォントについての考え方の着地を6つのアドバイスとして書いてみます。 特に独学でデザインの勉強をしてきた人は「こういうものだと思うんだけど、皆は実際どう考えているんだろう」という悩みを抱えているはずだと思うので、それに対する答えを出したいと思います
![[webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス](https://cdn-ak-scissors.b.st-hatena.com/image/square/b0e8c9c98b8c210bbed0a0d39aed243119c1eba7/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F05%2Ffont-six-stance-11-150x150.png)
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Illustratorのグランジ加工で文字やアイコンをかすれさせる方法 | Handy Web Design
Basic Design Note
新着記事