Archive for April, 2009

30 Apr 2009

14

How did you become interested in becoming a webmaster, designer, or developer?

Share your experience on how you got into creating websites, no matter what kind of webmaster you are. Was it something you stumbled upon, or were you assigned into a job? What was your first website like, and what did you learn from it? Did it lead you to go on to better things? What do you do now– code, design, blog?

This is a post for discussion. Use the commenting section to tell your story, and include what you’ve learned, and what you’d like to learn or become in the future.

27 Apr 2009

5

10 Odd and Creative Social Media Icon Sets

Icon sets representing feed and social media sites are all over the web, giving webmasters noticeable promotion tools. However, most look the same, or very close to the same. These designers changed it up, and created 10 social media and feed icon sets that are sure be noticed, effective, and most importantly– fun.

Use these 10 icon sets as promotion tools, or for you’re own inspiration when creating icons.

1) Feed & Twitter Monsters

These only come in RSS and Twitter icons, but are fun nonetheless. Use the various sizes of these somewhere on your site, and the icon can be a main feature of a simplistic design. There’s nothing wrong with a design’s main feature being a form of promotion.

24 Apr 2009

13

30+ Potential Problems with your Blog

Everyone wants a great blog, but most beginners don’t know where to start. If you have a blog already up and running, these 32 tips may help you improve even more.

I wanted to draw from my own personal experiences about blogging. Some of these techniques were hard-learned processes, and some I’m even still working on, having them in mindset for Webitect’s future. Hopefully, my experiences can help you too.

20 Apr 2009

1

10 Ways of Thinking that Can Make your Design Unique

Creative designers never cease to amaze. We often ask ourselves, “Why couldn’t I think of that?” The trick is, these designer’s never say that to themselves. Instead, they’re busy thinking about their own talents and unique behavior.

If you’d really like to make a new design that is finally original, take these 10 ways of thinking into consideration.

16 Apr 2009

13

Grunge Web Design Tutorial

Grudge style is meant to be quite the opposite of the Web 2.0 Style Design: dirty, and irregular. Often times grunge design features more ‘Down to Earth’ elements, whether it be with photos or texture.

The Core Features of Grunge Style

Here are some of the key features that define grunge design. We’ll need to consider them when making our own Grunge Style Web Design:

  • Grunge design almost always includes some sort of texture. Texture is ‘real’, and often times dirty or old.
  • Typography in a grunge design usually uses serif fonts, although all fonts can be implemented. A number of techniques, however, should be present to make the typography look old, washed away, and like a real element on the page.
  • Grunge design is never perfect. This type of design often features out of place objects, crooked images or textures, and washed away typography or pictures.

Research

As always, we’ll do some research before we start designing, as well as gather some resources. Considering the points above, let’s research grunge design to find out more techniques, and collect grungy fonts, pictures, and textures.

The Grid

1. Go ahead and create a new document that is 1200×1200 pixels. Let’s fill the background with a dark gray so we can see the grid better when creating it.

2. Make sure the rulers are open by pressing ‘Ctrl R’. They should show on the top and left of the workspace. Right click one of the rulers and make sure it is set to pixels.

3. By dragging the rulers from the left-hand ruler, create side margins at 150px and 1050px. This will create 900px to work with in the middle. With added padding and other forms of spacing, the content should be an appropriate width for anyone with a 1024×768 screen resolution and above.

4. Drag rulers from the top ruler to create horizontal margins. I created 50px margins from the top and bottom to start. Created a top header that is 100px tall, left 20px for padding, a second header that is 300px tall, and then another 20px margin.

From the bottom margin I created another ruler for a footer that is 200px tall, then created another 20px padding margin, and left the rest for the content area.

The Grid

Click on the image to see the full size. You can see the heights of all the margins I’ve created in the screenshot captions.

Grungy Background

Next we’re going to find a grungy texture put in the background. Like stated above, texture is one of the primary features of grunge design. I found the site below with some really neat seamless textures:

1. Pick out one of the textures. I’m going to use the 4th one down in the Grunge category.

2. Download the image and open it in Photoshop. Go to Edit > Define Pattern and save it with an appropriate name.

3. Next, go to our layout and select the Paintbucket tool (Press ‘G’ on the keyboard). In the toolbar options panel (up above), select ‘Pattern’ in the dropdown menu, and find your newly created pattern in the drop down to the right of that. It should be near the bottom.

4. Fill in your background with this new pattern. Because it is a seamless pattern, you can use the image you found off of the above website as the background in CSS.

Grungy Background

Content Background

Our next step is to create backgrounds in the content areas for more legible text.

1. Select the Eyedropper Tool (‘I’ on the keyboard) and select the lightest color you can find throughout our background image. I found #c2b89f.

2. We’ll want to go a bit lighter than this, so open up the Color Picker by clicking the color on the bottom of the toolbar. Manipulate this color so it ends up a lighter version.

31

3. Create a new layer clicking the ‘New Layer’ icon at the bottom of the layers palette. We’ll create the content background in this new layer to differentiate it from the background texture.

4. Using the Rectangular Marquee Tool (‘R’ on the keyboard), select the area for the first header, and then use the Brush tool (‘B’ on the keyboard) to color it in. Do this for the second header, content section, and footer.

Fill in the content areas with our new background color

This would be a good time to rename our new layer to something more appropriate. I’ll name mine ‘Content Background.’

5. Our current background for content looks a bit out of place from our design. Let’s add a stroke around all the boxes to give some more effect. Right click the new content layer and go to Blending Options.

Click on ‘Stroke’ on the left hand side, and change it to the following settings:

51

This will provide our border with some separation of the background, while adding some visual appeal by matching the grungy background’s inconsistency.

Closeup border

6. To make our design look worn, we’re going to switch to the Eraser Tool (‘E’ on the keyboard). Find some grungy brushes if you don’t already have some, through the links above.

7. Find a grungy brush and start erasing the corners and edges of the blocks to seem worn and old. Switch between different brushes to get a variety of erases.

71

Above is a closeup of the content background layer once some of the edges have been removed.

Title and Primary Navigation

Next we’ll start adding some content. We’ll add the title and primary navigation, and then work with a few more visual details.

1. Switch to the Text Tool (‘T’ on the keyboard) and type the site name. I’ll be using ‘Webitect’. We’ll need some grungy text now. Either find a new grunge font to work with, or manipulate a current font to look grungy. For the purpose of this tutorial, I’ll be altering a current font.

2. Choose the font, text size, and character details (kerning, leading, etc.–settings in the ‘Character Palette’). Make the final alterations to the font, and then rasterize it by right clicking the Text Layer and choosing ‘Rasterize Type’. By rasterizing this layer we can manipulate it more.

I’m using ‘Impact’ because it is a big, bold font that will be noticeable even with the distracting background and extra details. I’m using a dark red: #b20000, and at size 72pt.

3. Use the same technique we used to fray the edges of the content areas with the Eraser tool, only with the title text.

Below is what our current design looks like. Click on the image to see the full size.

Current Preview

Looking at what we have so far, I realize it would be a bit boring to just add the primary navigation off to the right and be done. So let’s tweak the title a bit more, and then add the primary navigation in more interesting way.

4. Let’s make the title on it’s own separate background. Cut off the excess content background in the first header to the right of the title:

101

Click the image for a larger view.

5. Switch to the Eraser tool (‘E’ on the keyboard) and use the grungy brushes again to get a old, washed out look on the side we just cut off.

6. Using the Rectangular Marquee Tool (‘M’ on the keyboard), and with the content background layer selected, select this whole top piece. Press Ctrl ‘T’ (Cmd T on a Mac). This will allow you to Transform this new area.

Use this new tool to rotate and move the selection into a more interesting position:

111

Press enter or move to a different tool to bring up the finalization dialog box. Select Apply.

7. In the layer’s palette, select the rasterized text layer. In this case, the layer called ‘Webitect.’ Press Ctrl ‘T‘ again to open the transformation tool, and move the text over the new background and align it.

121

This provides a lot more interest for our design. Next we’ll start on the primary navigation.

8. Create a new layer and place it under the content background layer. Using the Rectangular Marquee Tool (‘M’ on the keyboard), make a selection to the right of the title, and then fill it in with a darker color found in the background. (Use the Eyedropper tool to select colors.) I found #201003.

131

Click on the image to see the larger view. Notice I didn’t line up this bar exactly to the borers of the content area. Grunge design is supposed to be imperfect, and a minor detail like this can really bring that out.

9. Using the Polygonal Lasso Tool (‘L’), make some jagged selections around the edges of this bar, and delete.

141

10. Create a new text layer and type out the primary navigation on top of this bar.

For the font, I chose Mistral because it is a messy, hand-written font that represents a very ‘real’ feeling. It’s 36pt smooth, with a color of #eae2d4.

151

Extra Background Focus

This whole background may be rich in texture, but it doesn’t have focus. Download some grudge brushes if you haven’t already, and we’ll add some more to the background. The brushes can be abstract or real objects.

1. Create a new layer and place it under all of the other layers, except for the background texture.

2. Randomly place the grungy brush(es) around the header areas to make it more visually appealing. Use grungy colors, like green, red, yellow, and grayed-out tones.

161

The result above is what I got. I used a variety of brushes from a few different sets to create a very abstract look.

Dummy Text

1. Add some dummy content–both images and text. I made my design seem like a portfolio, so I put some thumbnails of portfolio pieces in the first header. You can do what you want with these three content areas.

The font should reflect the grunge style. That is best done using a serif font– I used Georgia 12pt. I added a 75 kerning and 18pt line height.

Final Design:

So finally, here is our final design:

Final Grunge Design

Click on the image for the full-size view.

This design was fairly simple in concepts for grunge design, but still contains a lot of detail. For even more interest, add vintage images, or grungy photoshop techniques– like with PSHero’s Virtual Duct Tape Tutorial.

12 Apr 2009

7

17 Web Designs with Interesting Perspective

1. Tomáš Pojeta’s Portfolio

Tomas Pojeta

10 Apr 2009

9

20 Effective Ways to Increase Website Traffic

Everyone wants more website traffic, but most don’t put in the effort, and others just don’t know the effective ways to do it. For those of you who follow Webitect, you know I’ve created quite a few posts on website traffic, and may have read a few. Still, I thought I’d write another one– this time compiling all the great website traffic gaining tips from before. Hopefully this post can be a great reminder for returning readers, or a wealth of knowledge for first time visitors.

These 30 tips are divided into three main website traffic categories:

  • Search Engine Optimization and other initial technicalities
  • Offering good material that can go viral
  • Finding loyal readers and creating community

08 Apr 2009

3

15 Beautiful Sky Textures

The sky can take on so many forms and can also create so many forms of inspiration and design. Clouds, weather, stars, day and night all make for great design.

Enjoy these 15 Beautiful Sky Textures found on Flickr. All are large scale, high resolution– great for backgrounds or texture use.

Clouds on Steroids

Page 1 of 212