Quick Grungy Poster

In Designing by Fabio

In this tutorial I will show you how to create a sort of grunge poster. We will learn how to make some elements look a bit dirty, create textures and add some depths to the elements using shadows and blend modes.

Step 1

Create a new document. Fill the background layer with a dark brown.

Step 2

Set the background color to black and the foreground color to white. Select the background layer and go to Filter>Texture>Texturizer…

Step 3

Select the Horizontal Type Tool (T) and type PSD. Then Select the Rectangle Tool (U) and create some shapes like the image below. After that group the PSD text and the rectangles. Rename the group to “white lines”.

Step 4

Rotate the group like the image below.

Step 5

Using the Pen Tool (P), create some shapes to fill the gaps before the P, the S, and the D. Make sure that these shapes are beneath the “white lines” group. Use yellow for the first shape, red for the second and blue for the third. After that group these layers and name the group “colors”.

Step 6

If you use Photoshop CS3 convert the yellow, red and blue shapes to Smart Filters and go to Texture>Texturizer again. Apply the filter to all 3 shapes. If you don’t use the CS3 version just apply the filter.

Step 7

Now select the white lines and using the Layer Styles, select Drop Shadow. After that put the PSD text layer in front of the lines.

Step 8

Double click on the PSD text layer and in the Layer Style box, select Drop Shadow This time lets make a bigger and stronger shadow. After that click with the right button of the mouse over the text layer and select Create Layer. That command will create a layer only with the shadow. Then go to Layer>Layer Mask>Reveal All and delete some parts of the shadow that go above the white lines. Make the text and the lines be the same.

Step 9

Create a new layer and name it “dirty”, change the Blend Mode to Color Burn. Select black for the background color and a white for the foreground color. Go to Filter>Render>Render Clouds.

Step 10

Hold the Command Key (Mac) or Control (PC) and click on the thumbnails of the layers, that will create selections from the layers. With all white objects selected, create a new layer and fill the selection with white. After that go to Texture>Texturizer…

Step 11

Select the white objects again and create a new layer. Then go to Filter>Render>Render Clouds. After that go to Image>Adjustments>Levels and add more white to the clouds.

Step 12

Now go to Image>Adjustments>Hue/Saturation. Select the colorize option and change move the sliders until you get a beige color.

Step 13

Select all layers and group them. With the group folder selected go to Layer>Add Layer Mask>Reveal All. Now select some grunge or dirty brushes and start deleting some parts of the image. You can get amazing brushes at http://www.brusheezy.com/brushes

Step 14

Using the Horizontal Text Tool (T) create the word TUTS. Rotate it to the same angle as the other text, perpendicular to the lines. And you can repeat the Texturizer filter as well.

Conclusion

You can use this technique in lots of different projects, like logos, posters, and website headers for example. The most important thing again is play with the tool and change some values to see what happens, like the Render Clouds. This time we use that filter to create stains in our design a totally different approach like when we used it creating light effects.

Resources

Design (Graphics, UX templates)   |   Code Scripts and Snippets (Embperl, PHP)

These resources are provided free of charge. The graphics set contains templates and stencils for doing information architecture and interaction design work. The code set contains code snippets and scripts in PHP and Perl, including an application for generating sitemaps and flowcharts from files with tab separated values (e.g. exported from Excel).

Design

• Greeked Text
  Greeked text or Lorem ipsums as sentence, paragraph and page.
• Mini Icons
  A set of small icons I made that may be of use in designing interfaces.
• OmniGraffle Greeking Stencil
  Lorem ipsum placeholder text as paragraphs, bulleted lists, and tables.
• OmniGraffle Web Design Template
  A basic template for creating web design deliverables in OmniGraffle.
• OmniGraffle Wireframe Palette
  A set of shapes for making wireframes in OmniGraffle.
• Photoshop Template for Blueprint CSS Comps
  A Photoshop document containing guides for creating comps adhering to the Blueprint CSS Framework.
• Visio Wireframe Stencil
  Template and shapes for making Visio wireframes.

Code Scripts and Snippets

PHP

• Graphviz Sitemap Generator
  A tool to demonstrate how Graphviz can be used to generate site maps.
• Site Skinner
  A simple PHP script for skining or theming web sites.
• Text and Image Randomizer
  A PHP function to randomly include text or an image from any specified directory.

Embedded Perl

• Browser Detection
  Script to detect browser version and assign to a variable.
• Email Form
  Script to handle email message delivery via an HTML form.
• Getting Values from Query String
  Code to loop through query string and get name/value pairs.
• Getting Values Out of Hashes Using Loops
  2 ways to get values out of a hash using loops.
• List Files in Directory
  Code to list files in a directory
• Random Text Generator
  Script to display a randomized item from an array.
• Redirects
  Code to redirect page to another URL.
• Zebra Tables
  Code to alternate background colors in tables.

http://builder.yaml.de (puede servirme de apoyo en la construccion de css)

http://www.iwebtool.com/tools/  free webmaster tools

http://css-tricks.com/videos/ muy buenos videos para aprender

http://www.webdesignerwall.com/trends/grid-and-column-designs/

Advanced CSS Menu

Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.

View Demo CSS menu

Download Demo ZIP

Overview

Here are the required graphics to assembe the menu (you can download from the zip).

1. Main background

Open the Photoshop file. Turn off the menu text Layer Group and save the main background as menu-bg.jpg.

2. Button graphics

Turn off the background Layer Group and leave only the menu text layers visible. Make a rectangle selection cover the “home” item, go to menu Edit > Copy Merged (Cmd + Shift + C).

Create a new file and take note of the file dimension (w x h), in my case the “home” graphic is 144 x 58px. Paste the “home” graphic in the new file. Go to menu Image > Canvas Size, adjust the image height x 2 (58 + 58 = 116px). Duplicate the home graphic layer and align it to the bottom. Erase the highlight strokes in the upper layer.

Here is how the hover effect will work. We will set the link button to 144 x 58px, when mouseover, we will shift the background image from top to bottom.

Repeat this step for the other buttons. You should have the follow graphics:

3. HTML source

When you are done with the graphics, let’s start coding. Start with an un-ordered list <ul>.

• note there is an id=”menu” assigned to the<ul> tag
• an unique class name assigned to each link <a>
• an empty <span> tag (the purpose of this is to make the mouseover effect)

<ul id=“menu”>
  <li><a href=“#” class=“home”>Home <span></span></a></li>
  <li><a href=“#” class=“about”>About <span></span></a></li>
  <li><a href=“#” class=“rss”>RSS <span></span></a></li>
</ul> 

#menu

Reset the menu to no padding, no margin, and no list-style. Specify the width and height same dimension as the menu-bg.jpg. Then attach the menu background image. The key point to remember here is set the position property to relative.

#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  background: url(images/menu-bg.jpg) no-repeat;
  position: relative;
} 

#menu span

Specify the span element to display:none (so they will be invisible by default). Specify position:absolute, so we can place the mouseover GIF image on exact position.

#menu span {
  display: none;
  position: absolute;
} 

#menu a

The key point here is the text-indent property. We specify the text-indent property with a negative value (-900%), so the text will be hidden.

#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
} 

#menu a:hover

When mouseover the link, we want to shift the background image from top to bottom.

#menu a:hover {
  background-position: left bottom;
} 

#menu a:hover span

When mouseover the link, we want the span element to display:block.

#menu a:hover span {
  display: block;
} 

#menu .home

Specify the width, height, and background image. Since we already specified all <a> element postition:absolute in previous step, now just say where the .home button should be by specifying the left and top property.

#menu .home {
  width: 144px;
  height: 58px;
  background: url(images/home.gif) no-repeat;
  left: 96px;
  top: 73px;
} 

#menu .home span

Here we are specifying the width, height, background, and position of the span element of .home (mouseover GIF image)

#menu .home span {
  width: 86px;
  height: 14px;
  background: url(images/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;
} 

#menu .about

Copy the .home rules and rename them to .about. Now just change the width, height, background, left, and top property.

#menu .about {
  width: 131px;
  height: 51px;
  background: url(images/about.gif) no-repeat;
  left: 338px;
  top: 97px;
}
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(images/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;
} 

#menu .rss

Repeat this step for .rss

#menu .rss {
  width: 112px;
  height: 47px;
  background: url(images/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
}
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(images/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;
} 

All in one:

#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  background: url(images/menu-bg.jpg) no-repeat;
  position: relative;
}
#menu span {
  display: none;
  position: absolute;
}
#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}
#menu a:hover {
  background-position: left bottom;
}
#menu a:hover span {
  display: block;
}

#menu .home {
  width: 144px;
  height: 58px;
  background: url(images/home.gif) no-repeat;
  left: 96px;
  top: 73px;
}
#menu .home span {
  width: 86px;
  height: 14px;
  background: url(images/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;
}

#menu .about {
  width: 131px;
  height: 51px;
  background: url(images/about.gif) no-repeat;
  left: 338px;
  top: 97px;
}
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(images/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;
}

#menu .rss {
  width: 112px;
  height: 47px;
  background: url(images/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
}
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(images/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;
} 

Done

That’s it. You can preview my CSS menu.

Note: there is an IE6 bug where the <span> hover effect doesn’t display properly. To fix that, you can use Javascript to specify the <span> to display block on mouseover.

—–

Columnas

Columns & Grids

May 13, 2005 10AM PST

The difficulty of grid systems in web pages, the compromise of columns.

I seem to quite often go back and forth between creating organic layouts with intuitive proportions, and creating a grid that I can hang my various elements on. Lately I’ve been more interested in the latter. Frequently I’ve caught myself calculating in my head what 750 divided by 3 minus two 10px margins equals.

One of the larger problems in working with grids in web pages is that you often can’t do much about vertical proportions. Often your content is dynamic, so the best you can do is approximate. Throw in any compensation for font scaling, and it’s easy to lose any semblance of control over the way a layout expands downward.

So the focus is usually on the horizontal layout, which usually means columns. (Incidentally, if you’re ever wondering why fixed layouts are so popular amongst designers, this has a lot to do with it — it’s awfully difficult to build any coherent form of grid when you lose control of proportions in both dimensions at once.)

1 Column

As simple as it gets, the one-column layout has been around since the beginning of the web. 1994 gave us a grey background and black Times in a single column running down a browser window, the most primitive one-column possible (although calling it that is a bit of a stretch. See: an early Yahoo). It has evolved nicely since then, and some recent redesigns are putting it to good use. (See: Garrett Dimon)

2 Columns

The realm of the blogger. Two columns are utilitarian and perfect for presenting content and further navigation/archives/whatever side-by-side. Popular variations include the fixed sidebar/liquid content area setup (See: Malarkey) and the fixed-width, narrower sidebar/wider content area setup (See: the sadly now-defunct Weightshift).

Layouts with 2 columns or more force a choice that a single column doesn’t: equally sized columns, or varied widths? Ratios are important, and certain width combinations are more aesthetically pleasing than others. It’s pretty hard to go wrong with 1:1 widths (or 1:1:1, or more). It’s a little more difficult to choose non-equal sizing because there are no hard rules. You could pick a 5:8 Golden ratio (in a 750 pixel wide layout, translating to roughly 290px and 460px), a 3:4 ratio (320px and 430px), a 1:2 double square (250px and 500px), and so on. (Pleasing rhythmic proportions often share proportions with musical time scales, as you may have noticed.)

3 Columns

Once you add a third column, the options increase. What a third column enables is the possibility of a virtual column, one that is not absolutely defined in the layout, but exists by proxy. Consider this site, for example. On all pages with a sidebar, it appears to be a two-column layout. On the home page, the larger red panels imply the existence of three equal-sized columns. I haven’t pushed the possibilities of this third column yet, but this design does allow for it if I ever feel so inclined.

As well, 3 column layouts allow for overlapping elements. Consider the home page of Stopdesign, and how the leftmost two columns are joined by the overlapping featured article. Of course, it’s theoretically possible to pull this off with only two columns, but I rarely see it done on the web. A 2 column layout has traditionally meant that the content of each column lives in that column, never to overlap.

4 Columns

4 column layouts are where screen size constraints start becoming more obvious. With only so many pixels per column, it rarely makes sense to rely on 4 equal-sized, side-by-side columns on a site. StyleGala redesigned last year to a widescreen format with 4 equal columns; to compensate, a narrower version exists with 3 columns instead.

Not to say the columns need to be equally sized. Josh Dura appears to have made a stab toward a smaller-sized 4 column layout, with 3 skinny columns on either side of a larger content area. (Although there’s plenty of overlapping going on, so in some places it’s 2 columns, in other places it’s 3. Whew!)

More Columns

4 columns is hardly the limit though, even within sensible designs that don’t push the width requirements too hard. Consider B. Adam Howell’s redesign — your screen size determines how many columns you see, up to six. And the entire thing stretches to fill the screen, so it’s resolution-independent.

And you knew I was getting to Subtraction eventually, right? Khoi’s layout turned heads for more than just its black-and-white sparseness. Subtraction uses an equal-sized 8-column grid, with intelligent overlapping and column arrangement to make it seem quite a bit less.

What’s particularly clever about Subtraction is how all elements on the page intentionally fit into the grid. Whether it’s the Quick Access panel on the right spanning 2 columns, a content image spanning half the page (4 columns), or a caption sitting in the left-most column, every element on the page has a specific place within the grid and it all meshes wonderfully.

http://www.copyscape.com

YAML was conceived as a basis for developing flexible layouts, with a strong emphasis on meeting the challenges that result from working with elastic containers. The most important features:

• A flexible, accessible basic layout with a header and footer, a content area with one to three columns
• Cross-browser compatible layout display
• The fewest possible restrictions for the designer (fixed or flexible layouts, variable column widths, etc.)
• User-defined order of content columns in the source code (”any order columns”)
• Stylesheet templates ordered by function
• Column separators and backgrounds all generated without images and continuous down to the footer
• Flexible division of space inside the various containers via subtemplate

This system allows for the rapid development of designs with one to three columns, with fixed or variable widths. With subtemplates (flexible grids), the column system can be endlessly nested and expanded. The YAML basis layout can be extended with special containers which help set the layout width or can create a border around the layout. YAML is more than just a simple multicolumn layout. It is an entire layout framework, highly flexible, and tested under real-world conditions with Cross-Browsers Compatibility.

The YAML Builder comes as a preview version v0.3 is now available that allows the visual development of YAML based CSS layouts directly within your web browser.

Posted by Ray Cheung as Tools, CC License

http://3d-pack.com/#swf