Wednesday, October 28, 2009

Create a Dream text Design with 3D Typography

The first thing to do is get this free font called Storybook. It’s a font that fits our context well, and that will look well with 3D decorations due to its elegant serifs and bold stature. Type up the first letter of your word and give it this color: 4C3F38.

3d typography

Now add a 3D effect by going to Effect > 3D > Extrude & Bevel. Play around with the settings yourself to get the angle, lighting and form you want. You can recreate my treatment by using the same settings. Don’t forget to use a ‘Complex 2’ Bevel.

3d typography

Once you finish the first letter, repeat the process on the remaining letters. The only modifications you should make are to alter the position. Then copy (Ctrl+C) each individual letter and paste (Ctrl+V) them in Photoshop one at a time. Once you try pasting them, you’ll be prompted to choose a method of importing. Choose the ‘Smart Object’ Option. By doing this you can make simple adjustments at all times to the Illustrator file right inside Photoshop by double clicking the layer icon.

Position the letters onto an empty Photoshop canvas. I’m working at a rather large resolution of approximately 6300 x 4500 px at 300 ppi.
Also, fill the background layer with this color: 17151d.

3d typography

At this point we’ll begin stylizing the letters. Get the Magic Wand Tool (W) and make a selection of the letter’s foreground. Right click, select Make Work Path and specify a tolerance level of 1,5.

3d typography

Now that it’s a work path, we’ll fill it with a color by going to Layer > New Fill Layer > Solid Color. Fill it with white. The path should now be a vector shape. Double click on its layer and give it a bevel. Use the settings shown in the image below and choose the highlight color (94aa53) and shadow color (6c6f64).

3d typography

It’s now time to create a pattern that will cover the front of each letter. I’m using a Go Media vector freebie: Seamless Swirls. Go on and download it if you haven’t already, and open the provided Illustrator file. Change its color to this: 94aa52 and copy (Ctrl+C). Open a new Photoshop project with the clipboard size (235 x 235 px) and fill the background color with another color: ebe77f. To make it into o a pattern go to Edit > Define Pattern. Your new pattern will be saved in the pattern set that is currently opened.

3d typography

Now that you’ve created the pattern, you need to add the pattern to the face of the letter. Double click on the white shape’s layer and add a Layer Style: Pattern Overlay. Your newly created pattern should already be selected.

3d typography

One last touch is a Gradient Map Adjustment Layer that we’ll place on top of the letter’s body. While having the layer selected, go to Layer > New Adjustment Layer > Gradient Map. Then play around with the colors until you get a similar result. My colors, from left to right are: d8c67f, 94aa53, 262628, and 141416. Make sure that the Adjustment Layer Applies only to the letter. To do this, make it a clipping mask for the letter layer by holding Alt and clicking right in between the two layers.

3d typography

Now copy the layer style of the letter face and duplicate the Gradient Map. Apply these effects to the remaining letters.

9 Create a Dream Design with 3D Typography

subscribe to the gomediazine rss feed

Draw the scenery

The text is now finished. Let’s add the trees and foliage.
This technique I’m about to show you is what I have developed for myself. It reduces complex imagery to simple shape. A simple splatter, when grouped in a pattern begins to take a certain role, thus resembling an element of nature. You may find it useful or dull, but it’s what we’ll use for this design.

All you need is a standard Photoshop round brush and a mouse. Choose one using your Brush Tool (B) and input the settings found in the images below.

3d typography
3d typography
3d typography

Now that your brush settings are all ready, begin painting a tree. It’s important to know that you shouldn’t create the whole tree with the same brush settings. There is one adjustment you need to make along the way. If you look under Shape Dynamics in your Brushes Window, you’ll see a setting we’re using: Fade. This fades out your brush depending on how much you put in the adjacent field. A Fade set at 100 will end faster than one set at 250. You can use whatever settings you find appropriate. I used 100 for the trunk, 150 for extensions of the trunk, and 250 for thick branches. As you increase the fade, reduce the brush size at the same time.

3d typography

Continue using this technique in creating the rest of the trees and draw some roots too. Reduce the size considerably for the thin branches and add even more fading when necessary.

3d typography
3d typography
It’s time for foliage. Prepare a separate brush using these settings.

3d typography
3d typography

Now begin painting. Begin with a larger size using this green: 94aa53. In a layer underneath, with a smaller sized brush, paint with a darker green: 55612f. Again over the light green layer, use the same color (94aa53) with an even smaller size. For highlights, use the same size as the last one, but with this yellow: e3e07d. Here is an image you can use as a reference in creating your own trees.

I drew my inspiration from acacia trees, while coming up with the shape of the trunk and volume of the foliage.

3d typography

Following the branches as a reference, draw away!

3d typography

Add more nature elements now. I added a mountain and a moon. They will give depth to the image, and prevent the composition from being scarce. Use the pen tool (P) and create them as vector shapes.

3d typography

Make the mountain fade out on the bottom. An easy way to do it would be to create a new layer on top, clip it to the mountain layer and paint with a large soft brush with the background color. I also added a glow on the moon. To add one yourself, add a layer style: Outer Glow. Keep the standard color, increase its size and reduce the opacity to 25%.

Some more improvements include adding dark accents to the lower part of the tree trunks and shadows that stretch across the face of the letters. You can create those in the same way – clip a new layer to the one you want darkened and paint with a soft brush using a dark color. This applies to the mountain, trees and roots. Use a sharp brush to draw the tree shadow though.

3d typography

Finalize the design

In order to complete the artistic feel of this design, add this texture to your canvas. Simply paste it on a new layer, over all the other ones. Set the layer’s blending mode to Linear Burn and its opacity to 30%.

3d typography

Now invert the texture (Ctrl+I) and change its hue by going to Image > Adjustments > Hue and Saturation. Change the hue to 153 and saturation to -73.

3d typography

One last touch – add the watercolor texture inside the mountain and moon, once more, with clipping masks. Put their layers on Overlay (Mountain) and Multiply (Moon). Adjust the opacity.

3d typography

And that concludes it. Now go on and create your own, one of a kind, dream design.

3d typography

Labels:



Tuesday, October 27, 2009

20 Useful CSS Tips For new CSS coder

useful css for beginners


When you are interested in picking up CSS to create your own website, or merely to tweak your blog’s look and feel a little – it’s always good to start with the fundamentals to gain a stronger foundation. Let’s take a look at some CSS Tips we thought might be useful for beginners. Full list after jump.

  1. Use reset.css

    When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them. reset.css resets all fundamental styles, so you starts with a real blank new stylesheets.

    Here are few commonly used reset.css frameworks – Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripoli


  2. Use Shorthand CSS

    Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code clearner and easier to understand.

    Instead of creating CSS like this


    .header {

    background-color: #fff;

    background-image: url(image.gif);

    background-repeat: no-repeat;

    background-position: top left;

    }


    It can be short-handed into the following:


    .header {

    background: #fff url(image.gif) no-repeat top left

    }

    MoreIntroduction to CSS Shorthand, Useful CSS shorthand properties


  3. Understanding Class and ID

    These two selectors often confuse beginners. In CSS, class is represented by a dot "." while id is a hash ‘#". In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use.

    MoreClass vs. ID | When to use Class, ID | Applying Class and ID together


  4. Power of <li>

    <li> a.k.a link list, is very useful when they are use correctly with <ol> or <ul>, particulary to style a navigation menu.

    MoreTaming Lists, Amazing LI


  5. Forget <table>, try <div>

    One of the greatest advantage of CSS is the use of <div> to achieve total flexibility in terms of styling. <div> are unlike <table>, where contents are ‘locked’ within a <td>’s cell. It’s safe to say most <table> layouts are achievable with the use of <div> and proper styling, well maybe except massive tabular contents.

    MoreTables are dead, Tables Vs. CSS, CSS vs tables


  6. CSS Debugging Tools

    It’s always good to get instant preview of the layout while tweaking the CSS, it helps understanding and debugging CSS styles better. Here are some free CSS debugging tools you can install on your browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, and Firebug.




  7. Avoid Superfluous Selectors

    Sometimes your CSS declaration can be simpler, meaning if you find yourself coding the following:

ul li { ... }

ol li { ... }

table tr td { ... }

They can be shorten down to just

li { ... }

td { ... }

Explanation: <li> will only exist within <ul> or <ol> and <td> will only be inside <tr> and <table> so there’s really not necessary to re-insert them.

  1. Knowing !important

    Any style marked with !important will be taken into use regardlessly if there’s a overwriting rule below it.



    1. .page { background-color:blue !important; background-color:red;}

    .page { background-color:blue !important; background-color:red;}

    In the example above, background-color:blue will be adapted because it’s marked with !important, even when there’s a background-color:red; below it. !important is used in situation where you want to force a style without something overwriting it, however it may not work in Internet Explorer.


  2. Replace Text with Image

    This is commonly practice to replace <h1>title</h1> from a text based title to an image. Here’s how you do it.



    1. h1 {

    2. text-indent:-9999px;

    3. background:url("title.jpg") no-repeat;

    4. width:100px;

    5. height:50px;

    6. }

    h1 {  text-indent:-9999px;  background:url("title.jpg") no-repeat;
    width:100px; height:50px; }

  3. Explanation: text-indent:-9999px; throws your text title off screen, replaced by an image declared by background: {...} with a fixed width and height.



  4. Understand CSS Positioning

    The following article gives you a clear understanding in using CSS positioning – position: {...}


    MoreLearn CSS Positioning in Ten Steps



  5. CSS @import vs <link>

    There are 2 ways to call an external CSS file – respectively using @import and <link>. If you are uncertain which method to use, here’s few articles to help you decide.


    MoreDifference Between @import and link



  6. Designing Forms in CSS

    Web forms can be easily design and customize with CSS. These following articles show you how:


    MoreTable-less form, Form Garden, Styling even more form controls




  7. Get Inspired

    If you are looking around for nicely designed CSS-based website for inspiration, or just simply browsing to find some good UI, here are some CSS showcase site we recommend:




    Need more? Here’s a round up of 74 CSS Galleries.



  8. Rounded Corners in CSS

    This following article gives you an idea how to create cross-browser compatible rounded borders with CSS.




  9. Keep CSS Codes Clean

    If your CSS codes are messy, you are going to end up coding in confusion and having a hard time refereing the previous code. For starters, you can create proper indentation, comment them properly.


    More12 Principles For Keeping Your Code Clean, Format CSS Codes Online



  10. Typography Measurement: px vs em

    Having problem choosing when to use measurement unit px or em? These following articles might give you a better understanding on the typography units.


    MoreUnits of Measurement in CSS, CSS Font size explained, Using Points, Pixels, Ems, or Percentages for CSS Fonts



  11. CSS Browsers Compatibility Table

    We all know each browser has different ways of rendering CSS styles. It’s good to have a reference, a chart or a list that shows the entire CSS compatibility for each browser.


    CSS support table: #1, #2, #3, #4.




  12. Design Multicolumns in CSS

    Having problem getting the left, middle and right column to align properly? Here are some articles that might help:





  13. Get a Free CSS Editors

    Dedicated editors are always better than a notepad. Here are some we recommend:


    More – Simple CSS, Notepad ++, A Style CSS Editor




  14. Understanding Media Types

    There are few media types when you declare CSS with <link>. print, projection and screen are few of the commonly used types. Understanding and using them in proper ways allow better user accessibility. The following article explains how to deal with CSS Media types.



Labels:



Monday, October 26, 2009

Top 25 Best Drupal Websites for you

There is this perception that Drupal websites have a static type of look and cannot be customized to look any different. Well this blog posting is to prove a point that Drupal is more versatile than it may be presumed. Here is my personal top 25 favorite list for the best looking drupal sites covering various industries and professions.

Fox Searchlight
Fox Searchlight


DrupalCon 2009
DrupalCon 2009


Battlefield Heroes
Battlefield Heroes


Whole Grains Council
Whole Grains Council


Team Sugar
Team Sugar


Spread Firefox
Spread Firefox


Oxfam
Oxfam


US Magazine
US Magazine


Nissan
Nissan


World Pulse Magazine
World Pulse Magazine


Snowboard Mag
Snowboard Mag


Harvard Science
Harvard Science


Mac Life
Mac Life


Now Public
Now Public


FedEx
FedEx


MTV UK
MTV UK


Terminus
Terminus


MephoBox
MephoBox


Universal Music Group
Universal Music Group


MyPlay
MyPlay


CMS themer
CMS Themer


Flock
Flock


Abduzeedo
Abduzeedo


Boekenbeurs
Boekenbeurs


Agenzia Spaziale Italiana
Agenzia Spaziale Italiana

Labels: ,