グラフィックソフトをで使う機会の多いグラデーション。そのグラデーションと合わせて使われるディザ処理についてまとめてみました。 ※以前 Twitter 投稿した作図をリライトしたものになります。 画像のディザ処理 まずは画像のディザ処理ってなんぞや。ということで、比較的わかりやすいサンプルで図にまとめました。 アプリケーションごとのグラデーションとディザ処理の違い 上記で説明した画像のディザ処理を含め、どのようにグラデーションを描画しているのか、各種主要アプリケーションでチェックしてみました。 Figma 以外のアプリは、チェックしたのが 2018 年の半ばなので、現在のバージョンでは仕様が異なっているかもしれません。気になる方は、スクリーンショットを撮って比較してみてくださいね。 以上、アプリケーションごとのグラデーションとディザ処理についてでした。 Twitter で投稿したものはこちら
昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。 サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。 ということで、HTMLはこんな感じになります。 <a href="#" class="btn sample1">sample 1</a> 普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。 では、共通部分のCSSです。 a.bt
月の満ち欠けは球体に光を当てた結果のもので、円を円でカットするようなものではない。CSSでは立体を立体としては扱うのは難しいので、それを平面として捉え、半円を円で膨らませたり押し出したりすることで近いものにすることが可能になりそうだ。 Demo: Lunar Phase CSSグラデーションで作った半円に、border-radiusで作った半楕円を組み合わせることで実現している。月齢15以上の場合は半円を逆転させる。地球と太陽と月の位置関係から平面で捉えると、半円を基本にするということであっている(と思う)。 例えば月齢5の場合は以下の様なCSSで構成されている。 .moon { border-radius: 51%; height: 3rem; overflow: hidden; position: relative; width: 3rem; } .phase5 { backgroun
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
こんにちは、梅雨ですね。デザイナーのぺちこです。 Twitterのプロフィールページが新しくなって公開されてから、あっという間に2ヶ月ほど経とうとしています。 自ら変更せずとも順次適応ということで放置をしていたのですが、いつの間にか新しくなっていました。半月前くらいはそうでもなかったような。 先日お仕事でこのあたりを調べる機会があり、割と時間を費やしてしまったので、同じく困った人の手助けになればと思い、カバー画像制作用ガイドPSDを作成しました。 解説はさておき、ひとまずPSDを置いておきます。 Twitter新プロフィールカバー画像制作用ガイドPSDダウンロード では、さっそくTwitter新プロフィールの仕様おさらいをしながら、ガイドPSDについて解説していきます。 Twitter新プロフィールページについて 仕様については様々なメディアでリリース当初から取り上げられてきたので、詳しく
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろこれまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 Illustrator 初心者さんへIllustratorはベクター形式の画像を作成できる Adobe 社のアプリです。ロゴやイラストを作る時にはかかせません。Adobe の公式チュートリアルサイト、Adobe TV では Illustrator の概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustrator は月額 3,2
こんにちは、三回目です。 気付いたらいつの間にかいっぱいRTされていて まとめサイトに掲載されたり、 非公式RTも加えたらすごく沢山の方にご覧いただいちゃってて、 当初フォロワーさん用のつもりだったので、今更あわあわしています。 少しでも参考になっていたなら嬉しいです。 あー、しかし。 あー失敗した。めっちゃ失敗した。 こんなに沢山の方に見てもらえるなら、 「可愛い表紙の見本です☆」とか言って新刊の書影でも混ぜ込んどけばよかった。 10日前に文庫出たばっかだわよ。 なんでこうステマが下手なんだろう。 友達にも「今からでも広告のっけなよ！」と言われたのですが、 広告……広告ってどうしたらいいの。浪川ボイスで ＜Amazon とか言ってもらえばいいの？ それともアポロンメディア社に広告出せばいいの？ 馬鹿言ってないで本題に入りますね。 前回の記事を読んだ友人から、 色の組み合わせについて参考に
【絵心の無い文字書きさんも、 お絵かきソフトがなくっても、 ちょっと表紙をいじっちゃおっか】その2 おはようございます、にぐんです。 昨夜、遅い時間でのupにも関わらず思いのほか反響をいただいたので 嬉しくなって第2弾です。 2弾……というか、補足みたいな？ 「Wordでそんなこと出来るの！？」とのお声をいただいたので、 スクショをぺたーん。 これをー、 こうしてー、 (上部バナーにわかりやすいメニューが登場してますね！) こんな感じで調整。 (右クリックでメニューが出ます) 重ねる！ 重ねる！ オフィス製品に関しては、絵描きさんより、 普段事務職をされているOLさんの方が得意かもですね！ 私、その昔、イラストレータのない会社でWord2000を使って キャラのイラスト入りでゲームの企画書作らされたりしましたんで(全部図形ツール)、 「気合い」と「工夫」さえあればWordさんは出来る子だっ
先日、Twitterでこんな会話の流れになりました。 文字書きだと、絵が描けないという理由で同人誌の表紙も質素になってしまう方が少なからずいらっしゃいますが、勿体ないなぁと思ってしまいます。最初に読者様の目に触れるのが「表紙」という【場】なんだから、フォントでもいい、写真でもいい、何か自分や作品を伝える要素を入れたらいいのに、って。 — 高将にぐん(*'3')4/13文庫でたよさん (@2gun_k) 2013年4月18日 初デートと一緒です。誰もお見合いの席にスウェットやジャージで行かないでしょ？ 性格がいいとか元の顔の良し悪しとかじゃないんです。「あなたに会う為に」「私らしい」「一番可愛い私を用意しました」、そこを読者さんに伝えたらいいのに、って。 — 高将にぐん(*'3')4/13文庫でたよさん (@2gun_k) 2013年4月18日 「お前はいいよな、毎回お友達に綺麗な表紙絵描い
レイアウトは、あなたの大切な作品を他人に確実に伝えるための手段です。レイアウト手法さえ間違えなければ、読みやすいレイアウトが誰でも作れます。では、どのようにレイアウトするのか？ 最適な文字サイズは？ 最適な余白は？ 本シリーズは、小説同人誌のためのレイアウトデザインを図解入りでまとめました！ ［基礎篇］ レイアウトの基礎理論を解説します ［基礎篇］は特定のソフトウェアには依存しない内容です 本文フォーマットを考える 読みやすいフォーマットとその決め方 フォーマット（文庫判、新書判、A5判）実例集 ページ組みを考える とびらや見出しのデザイン方法 行組みを考える 禁則処理やルビ処理の考え方 附録 書籍の基礎 同人誌作成のために必要な知識を網羅！ ［実践篇］ 実際のレイアウト手法を紹介します ［実践篇］はInDesginがあることを前提にした内容です 環境を導入する そもそも、DTPとは？ 業
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
自分用メモ。井上のきあ @yue9 さんによるInDesign入門とIllustrator段組み設定の説明まとめです。リファレンス代わりにメモ。 このリストは、井上のきあさんの電子書籍『ざっくりインデザイン。』が お手元にあると、より理解しやすいと思います。 購入はこちらから（有料ですが、12Pの無料試し読みもあります） 続きを読む
複数の模様が並ぶパターンとしては ルイヴィ●ンやruss●tのモノグラムと言えば ピンと来る方も多いのではないでしょうか。 自分で作るとなると「どうすればいいんだ」状態に陥りがち。 続きを読む
プレゼン・ポスターで自分の研究を「伝える」 (How to do technical oral/poster presentation)
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
