私は DTP デザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。 以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。 でも、Webデザインしかしてこなかった私は、紙媒体 – DTP デザインが苦手です …。ちょうど 1年くらい前にも同じような記事、Webデザイナー(私)によるDTPデザイン注意書き:Webと
Step 1 – HTML Markup Create an unordered list with an anchor tag and a span tag. Add a different id for each list item and link to this id with the anchor tag. To be able to style and open the accordion when we click on it we need to use the :target selector. The target selector will only work if we will have a link that points to an id and when we click on that link the id becomes the target elem
レタープレスエフェクト大好きなんです ...。レタープレスエフェクトを使った Webデザインを観察していて気付いたことをまとめながら、Photoshop を使ったレタープレスの作り方をおさらいしてみました。 最近いろんな Webサイトを見ていると、レタープレス(型押し)を表現したデザインを、たくさん見かけるようになりました。私もきれいなレタープレスが大好きなので、このブログでもたくさん使いたいんですけど、なかなかきれいに表現できません …。レタープレスエフェクトは、黒や白の背景ではあまりきれいにならないし、色やテクスチャによって見え方がかなり変わってきます。レタープレスエフェクトを使った Webサイトを観察していて、こうしたらキレイにできるかも … という視点でまとめてみました。
twitter facebook hatena google pocket 最近多くの英語サイトのソースで見られるJavaScriptにcufon.jsと言うのがあります。 これはJavaScriptを使用して、テキストを好きなフォントで表示できるものです。 Google Font APIが出ましたが、まだまだ数が少ないです。 こだわりのある方は、フォントを選択できるcufo'n - fonts for the peopleを使用するのも良いのではないでしょうか。 ※フリーフォントのみで・・ sponsors 使用方法 cufo'n - fonts for the peopleからcufon.jsをダウンロードします。 また、表示させたいフォントをjs化します。 今回は、1001 Free Fonts - Download Free Fonts for Windows and Macint
Photoshopでつくるタイポグラフィのチュートリアルを紹介済みのものから未紹介のものまで、2010年の総まとめです。
Learn Web Design Retro CSS Text Effect: A Step-by-Step TutorialCSS offers an array of tools that, when used correctly, can improve the visual experience on your website. In this tutorial, we’ll explore a straightforward way to design a retro text effect with pure CSS. The approach, while not overly complex, yields a visually appealing result and serves as a… UX surveys can be pivotal tools for des
3 Pings & Trackbacks Pingback: 26 Free Progressive and Experimental Fonts | Freebies Pingback: 60 Excellent Examples of Illustration in Web Design | Inspiration Pingback: 30 Typography Focused Logo Designs | Inspiration 38 Comments These website are just stunning. I am overwhelmed with a sense of jealousy! Great list guys. Cool concepts, cool designs – I like these a lot. Ditto to adelaide – I’m j
Photoshop、Illustratorでつくるタイポグラフィのチュートリアルの紹介です。 ※明記の無いものはPhotoshopです。
光源とグラデーションを巧みに使用したタイポグラフィを作成するPhotoshopのチュートリアルをSix Revisionsから紹介します。 真ん中の上部に繊細な光源を設定し、テキストにはレイヤースタイルで「グラデーションオーバーレイ」と「ドロップシャドウ」を適用しています。 チュートリアルの説明は英語ですが、各ステップごとにPhotoshopのキャプチャが添えてあるため初心者の人でも実践できると思います。
WEBデザインのタイポグラフィインスピレーション「50 Examples of Effective Uses of Typography Within Web Design」 WEBデザインでも写真だけが主役ではなく、タイポグラフィを使って見せるというのが、最近のWEBの一つのデザインのトレンドとして注目されていますが、今回紹介するのはWEBデザインで上手く展開されているタイポグラフィをあつめたインスピレーション集「50 Examples of Effective Uses of Typography Within Web Design」です。 Hull Digital Live 09 様々な最新のWEBでのタイポグラフィを見ることができます。いkつかこうかいされていますが、今回はそのなかからいくつか気になったモノを紹介したいと思います。 詳しくは以下 ■Denise Chandler 大
Submit your website link and get a detailed report on how you can improve page performance, SEO optimization, mobile usability, and more. 5. Buzzworthy Buzzworthy Studio <div class="example"> <h2><span class="seg">ser</span><span class="seg">vic</span><span class="seg">es<b>.</b></span> <p>Using WordPress as our framework, we custom build websites to make your brand stand out from the noise. It al
Six Revisionsで、プレスしたようなタイポグラフィーデザインのチュートリアルが紹介されています。 ざっといくつかご紹介。 » Web Design Trend Showcase: Letterpress Text Effect シンプルなプレスした文字のエフェクト » Create a Sleek Pressed Letter Design 背景にも凝ったチュートリアル » Creating Editable Letterpress Styled Text in Illustrator illustratorでプレスした文字をデザインするチュートリアル » Grooveshark Design Style in Fireworks Fireworksでプレスしたような虫眼鏡アイコンを作るチュートリアル » Letterpress Emboss Text Effect Vimeoの
Photoshop opens up all kinds of creative possibilities for designers. When you’re working with text in your designs, there are endless ways that you can style your text and countless different types of effects that can be created. Whether you’re working on a typographic design or simply using text for something like a poster design, knowing how to create beautiful text effects can have a big impac
Photoshop’s text and layer tools can be used to create some really awesome effects. We’ve put together a list of 60 of the best tutorials we could find to help you stay up to date on the latest trends and techniques. You’ll find some really cool grunge and glass styles (plus a few surprises!) and learn how some of the best designers create their unique effects. Photoshop’s text and layer tools can
In this tutorial, we’ll learn how to create a watercolor text effect. The effect will make the text appear as if it has been painted onto a wet sheet of paper, giving it a unique and artistic look. This effect is not only easy to create but also yields fantastic results that can make your designs stand out. You can further enhance the look by experimenting with different color schemes and backgrou
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く