Template Customization

Desktop Wallpaper: 80+ Most Breathtaking Places on Earth

Posted on 10. Mar, 2010 by Tony.

Article source: Designrfix

Continue Reading

50 Hot New Tutorials (Part1)

Posted on 09. Mar, 2010 by Tony.

Article source: Designrfix

Continue Reading

Top 6 Mistakes that Newbie Designers and Online Entrepreneurs Make

Posted on 08. Mar, 2010 by Mathew.

It’s not uncommon to hear stories of large-scale online business failures. From major companies – anyone remember Webvan? – to small design firms and marketing agencies, failure is a part of doing business. With the low costs of starting and operating a business online, many businesses that would fail under other circumstances end up getting started. Sometimes they grow into leading enterprises, but more often than not, they don’t.

We’ve identified the six most common mistakes that newbie designers, entrepreneurs, and online businesspeople make when they start their own online businesses. If you’re just starting out online yourself, use this article as a template of what not to do in your business. The best business lessons are often learned from other people’s failures, and these six should give you a good foundation for creating a long-term online business.

1. Expanding Too Fast.

You started a business, saw a relatively large amount of success, and thought that the bigger you grew, the bigger the money would get. Unfortunately, the infinite growth model rarely works for online businesses, particularly service businesses which require a lot of manual upkeep and client-based attention.

Whenever your business has the potential to expand, think through the situation as a whole. Boosting your client count or product’s reach could bring in new income, but it could also create new expenses and a lot of new headaches. Business success is about weighing the ups and downs – sometimes expansion brings in more of one than the other. Plan accordingly.

2. Overestimating Their Influence.

Control is an important factor in business. Meetings tend to move according to the most influential person – the guiding presence in the meeting and the most important factor in negotiation. As a new entrepreneur it’s easy to overestimate your influence amongst clients, business partners, and potential collaborators.

It’s not so much ego as it is a misunderstanding. Business requires a certain degree of pushiness, but too much ends up poisoning negotiations and potentially alienating clients and customers. Whenever you’re reaching out to another businessperson, client, or prospective customer, treat them like a guest and remember that you’re asking them for something, not the other way around.

3. Taking on Too Much Work at Once.

This error is most common amongst designers, but results-based business of all forms are susceptible to it. In an effort to boost revenue and increase per-client profits, many service businesses simply bite off more than they can chew. Employees are pushed to the limit, deadlines are stretched, and many clients end up unhappy.

It’s hard to suggest anything other than this behaviour, as risk like this is important for a successful company. However, whenever possible it’s best to be in control of your risk. Rather than giving hundreds of clients or customers second-class treatment, aim for top-level treatment with a smaller sample of people. Position yourself as a premium provider and you’ll end up with a more fluid, controllable, and well-rounded business.

4. Pricing Themselves Too Low, or Too High.

Charge people too much and you’ll fail to gain clients. Charge too little and you’ll end up overwhelmed with low-paying work and unable to cope with the quantity. Setting prices as a service business is a balancing act, and it’s one that can take quite a lot of time to adjust to. Whenever possible, look at your business as a premium product. Price yourself above competitors to ensure that your work is profitable and worthwhile, but don’t price yourself in a range where you’re unable to gain valuable client referrals and long-term projects.

5. Ignoring Professionalism.

Online businesses are great in that they allow entrepreneurs to work from their living rooms, and limiting in that they insulate people from the corporate world. As a designer, service provider, or B2B business, you’re bound to work with some major companies and multinational corporations. Pitching, contacting, and keeping in touch with clients requires a fine touch, and a level of professionalism that’s often lacking amongst online businesses.

Invest in what’s required to get your foot in the door. If that’s nice clothes for a business meeting, it could be worth it. If it’s a customer and client support employee for providing the impression of a big company, take it. If there’s a way for you to appear more professional and experienced, do almost anything possible to achieve it.

6. Worrying Too Much.

Let’s face it, as a newbie designer or businessperson, the natural reaction is to respond to things with caution and temperance. Sometimes business opportunities come in, and rather than reacting to them with potential planning and long-term thinking, newbie designers think that all which could go wrong because of them.

This type of thinking is good for running a low-risk business, but ineffective for running an ultra-successful business. Risk is a very important part of business, and letting it control your thinking leaves you stuck at a standstill. Sometimes it’s best to apologize for mistakes – whether to clients, customers, or business partners – than to beg for the opportunity to do something.

Related posts:

1. From 1 Client to 20: Expanding Your Online Service Business Online freelancers and entrepreneurs have a valuable business asset that...
2. How to set up an Online Business Staring a business specially an Online Business is not a...
3. 5 Ways to Minimize Project Proposals, Cut Down Management, and Focus on Freelance Work Working online can be great for generating income without high...

Related posts brought to you by Yet Another Related Posts Plugin.

Article source: Reencoded

Continue Reading

Web Design: 40 Fantastic Examples

Posted on 03. Mar, 2010 by Tony.

Article source: Designrfix

Continue Reading

10 Useful and Time-Saving CSS Grid-Layout Generators

Posted on 02. Mar, 2010 by Joel.

CSS is considered the “back-bone” of a website. It structures, helps embed, and styles elements. Now, if we were to code a CSS layout by hand, it would take us an unneeded amount of time that we could be putting towards other areas of our designs.

With somewhat similar concepts to the all-famous button, background, and favicon generators, today we present you with 10 Useful and Time-Saving CSS Grid-Layout Generators that will save you mass amounts of time and help you eliminate some repetitive coding.

Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

Grid Layout Generator by netProtozo

The Grid Layout Generator by netProtozo is very easy to use. You can use the form to build a grid, then be able to grab the generated CSS to use in building your layout. Also, use a snap shot of the grid in photoshop to help you tighten up your design. By doing so, you’ll find that you’ll be able to pretty much match your design using the CSS provided.

Grid System Generator

The grid system generator will create fixed grid systems in valid CSS/XHMTL form for rapid prototyping, development, and production environments. It also creates a background file that you can use in Frameworks, Illustrator, Photoshop, and more to aid in prototyping and design.

YUI: CSS Grid Builder

Yahoo’s grid builder is one of the easiest to interact with. The side panel to the left lets you edit the width of the grid, create columns, rows, and set fixed sizes. The changes you make take place in HTML format and you can hit the Show Code button and copy/paste it wherever you’d like.

Variable Grid System

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

YAML Builder

The YAML Builder is a tool for visually creating YAML-based CSS layouts. It allows for the setting of basic layout characteristics like the number and positioning of the content columns, as well as the dynamic creation of grid-based layouts by dragging and dropping subtemplates. Not quite WYSIWYG, but close!

Grid Designer

You can get started generating grids by Filling in the number of columns, total width, gutters and margin widths, all specified in pixels – then press the design button. You can even use the Typography tab to adjust and calculate basic typographic settings for your design. Finally, on the Export tab, you can generate copy-and-paste ready CSS, and a sample XHTML template.

CSS Layout Generator by CSSPortal

This generator will create a fluid or fixed width column layout, with up to 3 columns and with header, footer and menu. Values can be specified in either pixels or percentages.

Firdamatic

Firdamatic™ is an online tableless layout generator that allows you to create and customise layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze. This tool is available for free for personal/non-commercial use only and comes with no technical support.

CSSCreator.com

This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages. To create your layout select the structural elements your site requires (header, footer, columns). Then specify a size in the field provided and choose a background color from the color chooser below.

Related posts:

1. How to create an elegant web layout in Photoshop In this tutorial I will show you how to create...
2. How To Create Professional Looking Website Layout With Photoshop Want to design a professional looking website template using Photoshop....
3. Online Stripe Background Generator : Stripemania Trying out your photoshop skills or searching for a...

Related posts brought to you by Yet Another Related Posts Plugin.

Article source: Reencoded

Continue Reading

Logo design for the Deep House Cat show

Posted on 01. Mar, 2010 by veerle@duoh.com.

It doesn’t always happen that you get the chance to work on something that you personally use a lot. This time we had the opportunity to create a new logo for The Deep House Cat show.

What is The Deep House Cat show?

The Deep House Cat is an internationally streamed radio show created by "philE" from Chicago. You can listen to the Deep House Cat show on such radio stations as SSRadio, DI.fm, Housebox, Gabz FM and many more FM/AM and online outlets. Another way is by subscribing in iTunes like we do. This way you are sure you don't miss an episode.

Thinking process

The previous Deep House Cat logo was in use for almost 3 years and the client felt it had become a bit bland. When talking about this in more detail we discovered a bit of a roadblock. The client explained:

When we started the radio show we only played Deep House. This has changed over the years and we now play other sub-genres as well. The brand "Deep House Cat" however is widely being recognized and I would hate to see it go, because I do not want to start building a brand from scratch again. A new logo should incorporate the idea of toning down the "Deep" in "Deep House Cat", BUT not losing it completely.

The client did give us a few suggestions of what he thought the logo should look like. He suggested a stylized big cat (e.g. tiger, lion, jaguar, or panther). This was a good sign because we were already thinking along those lines as well. Other remarks were that it should also be recognizable in a smaller version such as an avatar or a social network user image.

Proposal 1

In the first version I tried to create a stylized cat using mostly straight lines. I ended up with a very male look which was my intention. The shape of the head and pointy ears made me also think a bit of a bat, which I also liked in a way. As for the typeface, I tried to reflect the same straight lines but added some personality to it by altering the 'H', 'E' and' A'. The word 'Deep' is treated as a separate element. This way 'House Cat' can stand on its own and 'Deep' can be removed when the time is right.

PROPOSAL 1:
Using mostly straight lines, which gives a very stylized male look

Proposal 2

For the second proposal I've drawn a classic cat, using round shapes which is also reflected in the typeface. I ended up with a logo that is way more female than I wanted it to be, but I liked its pose and elegant gracious look. So I decided to add this proposal, even though I expected the logo to be too feminine.

PROPOSAL 2:
Working with round shapes, which shows the more an elegant, feminine and gracious look of a cat.

Proposal 3

For the third proposal I wanted to try a tiger, or more preferably a panther so I would end up with a male looking logo. After looking at a lot of photos of panthers and tigers, I decided the face of a panther would fit best. When experimenting on how I would incorporate the 'Deep' part, I ended up with a circle surrounding the cat's face, which also makes it a perfect fit for an avatar or small icon. It could remind you of a record, or even the seventies Afro wigs disco style :) Somehow I felt this link with music, because I know that a lot of deep house music has disco influences into it.

As for the name, I was thinking of using a heavy sans serif typeface as it feels more male and gives the right balance to the logo. Gotham Ultra felt like the perfect choice in combination with the narrow Neon Extra Condensed for the 'Deep' part which adds this nice typographical contrast. Playing around with the letters 'C' and 'A' in combination with a different color, resulted in a different separation of the 2 words instead of using a space in between.

PROPOSAL 3:
Trying to find a balance between the female elegance, while making sure the cat looks male, which ended up in the face of a panther.

Feedback

The client liked proposal 2 and 3, but requested some changes before he could make a definite choice between one of them. As I kind of expected, I had to try to make proposal 2 a bit more male like. As for for proposal 3, the client suggested to show the panther's teeth as he looked a bit too friendly. For proposal 2, I did tried to make the cat more male looking by changing the eyes and the way he looks, smart and gracious. I've also added some subtle gradient effects. It was hard not to loose the charm of this logo and still make it look male, while changing proposal 3 was way more doable. The friendly looking cat was turned into roaring panther exactly what the client suggested and it did the trick. The last change I did was squinting the eyes a bit so the roaring looks more natural.

FINALIZING the logo:
Turning the friendly cat into a roaring panther by showing its teeth and squinting the eyes.

Final & approved design proposal

The roaring panther makes it more interesting, plus judged by geometrics, also better balanced. The tough edge makes it a more appealing logo.

Article source: Veerle's blog: full articles

Continue Reading

15 Free And Useful Typography Tools For Web Designers

Posted on 28. Feb, 2010 by Joel.

Typography is one of the most important components that make a design complete. This aspect of your design can effectively engage users when used properly. It can also help you enhance the visual appearance of your website, print/graphic designs, and more.

Here we have 15 Free and Useful Typography Tools for Web Designers that’ll help you in a variety of ways. Alright, now lets begin exploring these tools.

FontStructor

FontStuctor is an easy to use free web-based typography tool that allows you to create your own fonts. It has a beautiful interface that is simple to interact with.

CSS Type Set

CSS Type Set is a wonderful tool that lets you visually and actively style your text that it can generate efficient CSS.

WhatTheFont

WhatTheFont lets you interactively scan a URL or upload an image that has a font(s) and it will then tell you what the font is. It’s a great way to find out what fonts other designers are using to create amazing designs.

Font Burner

Font Burner allows you a simple and efficient block of code so that you can embed in your webpages giving the option to convert your headlines to whatever possible font you choose.

PXtoEM

PXtoEM is a calculator that does conversions of pixels, em’s, points, and percentages.

Typetester

Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

Font Tester

Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages.

TypeNavigator

TypeNavigator is the world’s first interactive visual font search system.

Typechart

Typechart allows you to navigate through, preview and compare web typography and then grab the CSS and embed it into your web designs.

Flipping Typical

Flipping Typical is a smart way to explore the popular typefaces you have on your computer.

CSS-Typoset Matrix

CSS-Typoset Matrix actively displays font sizes, line-heights, and margins for a variety of base font sizes. It can also output the CSS code depending on the data you insert.

Linotype Font Finder

Answer a few simple questions and the artificial intelligence of the FontIdentifier will help you find your font.

Identifont

The Identifont expert system enables you to identify a typeface from a sample by answering a series of questions about key characteristics.

Serif Font Identification Guide

Serif Font Identification Guide is an incredible visual font identification application that displays various images allowing you to choose from whichever match the font you’re trying to recognize the closest.

Font Picker

Font Picker lets you browse all the fonts available on your computer. You’re able to quickly view a font that you may want to use in a design, or a project. It’s quite useful.

Related posts:

1. 56 Free Resources for Web Designers  The following is a collection of free resources for web designers....
2. 9 Websites to create Free Logos Online We have compiled a list of 9 FREE websites that...
3. Excellent Fresh Free Fonts For Designers Fresh fonts are always a need for graphic and web...

Related posts brought to you by Yet Another Related Posts Plugin.

Article source: Reencoded

Continue Reading

Digital Art: 80+ Most Beautiful CG Girls On The Web (Part 1)

Posted on 28. Feb, 2010 by Tony.

Article source: Designrfix

Continue Reading

How to create an elegant web layout in Photoshop

Posted on 26. Feb, 2010 by Ionut.

In this tutorial I will show you how to create an elegant web layout in Photoshop using thin lines, subtle gradients and beautiful typography.

Final Result

Have a look at the layout that we’ll be creating in this tutorial.

Step 1 – The 960 Grid System

First, download the 960 Grid System and unzip the archive. Then go to the “photoshop” folder (you will find it inside the “templates” folder) and open the “960_grid_24_col.psd” file in Photoshop. This .psd file has a grid of 24 columns.

The red bars that you see are located inside the “24 Col Grid” group. When you want to hide/show the grid, you can simply click on the eye icon of this group. We will create our layout between these red bars.

The file also contains guides that are very helpful when designing a web layout. To show/hide the guides, go to View > Show > Guides (Ctrl/Cmd + ; ).

Step 2 – Increasing the size of the canvas

Go to Image > Canvas Size and set the width to 1920px and the height to 1250px.

Now we will change the color of the background to a light yellow. Click on the “Background” layer to make it active. Then use the Paint Bucket Tool (G) to fill the background with the color #f6e8bc.

Step 3 – Creating the header

Create a new group (Layer > New > Group) and name it “header”. Then make sure that your Info panel is opened (Window > Info – F8). You will need it to see the exact size of the shapes that you will create in this tutorial.

Select the Rectangle Tool (U) and create a rectangle with the height 10px and the color #3c1927 at the top of your document. Name this layer “top bar”.

Step 4

Use the Rectangle Tool (U) again to create a rectangle with the height 120px and the color #542437 beneath the one from the previous step. Then double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 5

Select the Line Tool (U), set the weight to 1px and the color to #2f141f. Then hold down the Shift key and drag a horizontal line from the right edge of your document to the left one. Move the line at the bottom of the first rectangle and name this layer “1px dark line”.

Duplicate the line layer (Ctrl/Cmd + J), select the Move Tool (V) and hit the up arrow once to move this new line one pixel up. Change the color of this line to #4e2133 and name the layer “1px light line”.

Step 6 – Writing the name of the layout

Select the Type Tool (T) and write the name of your web layout in the header. I used the font Garamond Premier Pro Bold with the color #ecd078. Then double-click on the text layer to open the Layer Style window and use the settings from the following image.

Note: make sure the guides are visible (Ctrl/Cmd + ; ) and move the text to the left edge of the layout. Take a look at the next image for reference.

Step 7 – Adding a subtle gradient under the name of the layout

Now we will create a white to transparent gradient under the text. Go to Layer > New Fill Layer > Gradient and use the settings from the following image. To move the gradient, click on your image and move the cursor while the Gradient Fill window is opened. Set the blend mode of this layer to Overlay 25% and put it beneath the text layer.

Step 8 – Creating the navigation bar

Create a new group and name it “navigation bar”. Select the Rectangle Tool (U) and create a rectangle beneath the header with the height 40px and the color #c02942. Double-click on this layer to open the Layer Style window and use the settings from the following image for Gradient Overlay.

Step 9

Select the Line Tool (U) and set the weight to 1px. Then create two horizontal lines at the top of the navigation bar. For the dark line use the color #4e121c and name this layer “1px dark line top”. For the light line use the color #ed3453 and name this layer “1px light line top”.

Step 10

Create two more lines with the weight 1px at the bottom of the navigation bar. Use the color #972437 for the dark line and #e3314e for the light one.

Step 11

Select the Type Tool (T) and write the name for your navigation menu items. Use a bright yellow color (#f2e9cc) and a serif font (I used Garamond Premier Pro Semibold).

Step 12 – Creating separators for the navigation bar

Create a new group inside the “navigation bar” group, name it “separators” and set its opacity to 75%. Select the Line Tool (U) and drag a vertical line from the top of the navigation bar to the bottom using the color #8a1e30. Then create a new line next to the first one using the color #d72e4b.

Select these two lines, duplicate them (drag them over the ‘Create a new layer’ button from the Layers panel) and move them to the right, between the first two navigation menu items. Repeat this process until you have as many separators as you need.

Step 13

Now we will use a mask to make the separators fade away at the top and at the bottom. Add a mask to the “separators” group (Layer > Layer Mask > Reveal All) and set the foreground color to black. Then select the Gradient Tool (G), hold down the Shift key and drag a vertical black to transparent gradient at the top of the navigation bar. Repeat this for the bottom area of the navigation bar as well.

Step 14 – Adding a gradient beneath the navigation bar

Create a new layer. Then select the Rectangular Marquee Tool (M) and create a selection like the one you see in the following image. Select the Gradient Tool (G), hold down the Shift key and drag a #b6aa86 to transparent gradient from the top of the selection to the bottom. Hit Ctrl/Cmd+D to deselect. Use the Move Tool (V) to move this layer 1px beneath the navigation bar. Name this layer “gradient” and set its opacity to 25%.

Step 15

Write a text beneath the navigation bar using the Type Tool (T) and the color #542437.

Step 16 – Creating a content carousel

Create a new group and name it “featured”. Create another group inside the first one and name it “top separator”.

Use the Line Tool (U) to create two horizontal lines with the weight 1px. For the first one use the color #f7efd3 and for the second one use the color #c7bc98. Set the opacity of these two layers to 60%.

Create a new layer. Select the Rectangular Marquee Tool (M) and create a rectangular selection right above the two lines. Then hold down the Shift key and drag a #b6aa86 to transparent gradient (G) from the bottom of the selection to the top. Set the opacity of this layer to 15% and name it “gradient”.

Step 17

Add a mask to the “top separator” group (Layer > Layer Mask > Reveal All). Then drag two horizontal black to transparent gradients (G) – one in the left side of the separator and another one in the right side. Take a look at the following image for reference. You can also activate the guides to help you drag these gradients.

Step 18

Duplicate the “top separator” group by dragging it over the ‘Create a new layer’ button from the bottom of the Layers panel. Then go to Edit > Transform > Flip Vertical. Move this new separator down at a distance of about 240px from the first one. Change the name of this group to “bottom separator”.

Step 19 – Adding the featured images

Open three images in Photoshop and move them into your first document using the Move Tool (V). I used images of some of my previous works.

Activate the grid. Then crop the images and use Free Transform (Ctrl/Cmd + T) to change their size. I have chosen to make the middle image bigger than the other two ones. My middle image has the dimensions 360px by 200px and the other two ones have 280px by 166px. Take a look at the following image for reference.

Step 20

Now we will add a double stroke effect to the images. Double-click on the middle image layer to open the Layer Style window and use the settings from the following image.

Step 21

For the other two images use the same Layer Style settings, but change the size of the Inner Glow to 5.

Step 22 – Creating a shadow beneath each image

Select the Ellipse Tool (U), hold down the Shift key and create a small circle in the middle of your big image using the color #847c63 (1). Go to Edit > Free Transform (Ctrl/Cmd + T) and stretch the circle as you see in the following image (2, 3).

Right-click on this layer and select Convert to Smart Object. Then go to Filter > Blur > Gaussian Blur and add a 3px gaussian blur (4). Name this layer “shadow 1″, move it beneath the layer of the image (5) and set its opacity to 20% (6).

Step 23

Repeat the previous step for the other two images, but set the opacity of the shadow layers to 15%.

Step 24 – Creating the navigation arrows

Now we will create two navigation arrows for the content carousel – one in the right side and one in the left side.

Select the Ellipse Tool (U), hold down the Shift key and create a circle with the dimensions 50px by 50px and the color of the layout’s background (#f6e8bc). Move this circle in the right side of the third image, as you see below.

Double-click on this layer to open the Layer Style window and use the settings from the following image for Outer Glow and Stroke. Name this layer “right circle”.

Step 25

Convert the “right circle” layer into a smart object (right-click on it and select Convert to Smart Object). Use the Rectangular Marquee Tool (M) to select the right half of this circle. Then erase the selected area by going to Layer > Layer Mask > Hide Selection.

Step 26

Duplicate the “right circle” layer (Ctrl/Cmd + J). Then go to Edit > Transform > Flip Horizontal. Name this layer “left circle” and use the Move Tool (V) to move it in the left side of the content carousel.

Step 27 – Creating two navigation arrows for the content carousel

Copy this symbol “»”, select the Type Tool (T), click on your image and paste it. I used the font Garamond Premier Pro Bold with the size 48px and the color #542437. Depending on which font you will use, your arrows will look different. Move this arrow in the middle of your right circle and name the layer “right arrow”.

Duplicate the “right arrow” layer (Ctrl/Cmd + J). Use the Move Tool (V) to move it in the left side of the content carousel. Then replace the first symbol with this one “«”. Name this layer “left arrow”.

Step 28 – Creating a vertical separator

Create a new group and name it “vertical separator”. Select the Line Tool (U) and create a vertical line in the middle of your layout with the height 600px and the color #f7efd3. Name this layer “light line”. Duplicate this line layer (Ctrl/Cmd + J) and change its color to #c7bc98. Then select the Move Tool (V) and hit the right arrow once to move this new line 1px to the right. Name this layer “dark line”.

Step 29 – Creating the ‘Services’ area

Create a new group and name it “services”. Then select the Type Tool (T) and write the word “Services” with the size 32px and the color #542437 in the left side of the layout.

Step 30

Add three representative images beneath the word “Services”. Activate the guides to help you arrange the images. Then crop each image to have the size 140px by 180px. Add a double stroke effect to each image using the Layer Style window and the settings below.

Step 31

Use the Rectangle Tool (U) to create a rectangle with the dimensions 138px by 30px and the color #94516b. Double-click on this layer to open the Layer Style window and use the settings from the following image. Duplicate this layer two times (Ctrl/Cmd + J) and put a rectangle beneath each image. Then select the Type Tool (T) and write three names of design services on your buttons using the color #fbf9f4.

Step 32 – Creating the ‘About us’ area

Create a new group and name it “about”. Then select the Type Tool (T) and write the words “About us” with the same font, color and size that you used for the word “Services”.

Add an image beneath the words “About us” with the dimensions 455px by120px. To add a double-stroke effect to this image, copy the layer style from a previous image (right-click on its layer and select Copy Layer Style), and then paste it to this layer (right-click on the layer and select Paste Layer Style). Then change the size of the Inner Glow to 6.

Select the Type Tool (T) and add a text beneath the image using the font Georgia, the size 14px and the color #673046.

Step 33 – Creating the ‘Blog’ area

Now we will create an area for recent blog posts. Create a new group and name it “blog”. Select the Type Tool (T) and write the word “Blog” beneath the ’services’ area with the same font, color and size that you used for the words “About us”.

Add two images with the dimensions 220px by 100px. Then copy the layer style of the image from the ‘about us’ area and paste it to these two layers to get the same double stroke effect.

Use the Type Tool (T), the font Georgia and the color #683147 to write a text next to each of these two images.

Step 34 – Creating a contact form

Create a new group and name it “contact”. Then select the Type Tool (T) and write the words “Contact us”.

Select the Rectangle Tool (U) and create a contact form like the one you see in the following image using the color #fcf8ec. Add a 1px stroke to each rectangle using the color #ddd0a4. Then select the Type Tool (T) and write the name of each field of the contact form using the font Georgia and the color #ddd0a4.

Use the Rectangle Tool (T) to create a send button beneath the contact form. Use the same settings which you used at step 31 for the buttons from the ’services’ area.

Step 35 – Adding a copyright statement in the footer

Select the Type Tool (T) and write a copyright statement in the footer of your layout using the font Georgia and the color #c8bfa4.

Final Result

Well, we’re finished! In the following images you can see the final web layout (with and without the grid). I hope you enjoyed this tutorial and you learned something new.

Related posts:

1. How To Create Professional Looking Website Layout With Photoshop Want to design a professional looking website template using Photoshop....
2. Photoshop Tutorial: Create an Abstract Background With abstract layouts being a very hot design trend, creating...
3. Tutorial: Creating a Grunge Effect Using Only Photoshop Right now, artistic designs are very hot! With CSS becoming...

Related posts brought to you by Yet Another Related Posts Plugin.

Article source: Reencoded

Continue Reading

Inspiration: 27 Great Logo Design Galleries

Posted on 25. Feb, 2010 by Tony.

Article source: Designrfix

Continue Reading

Fresh Examples of Beautiful Typography in Web Design

Posted on 23. Feb, 2010 by admin.

Typography play an important role in web design and using it creative and unique manner can really help to come up with an extra ordinary design. We have several useful design tools for beautiful web typography and a lot of Inspirational stuff to help while working on any design project but fresh Ideas are always in need. Today we are here with a small showcase of Fresh examples of beautiful Typography in web design, so take a look through these beautiful examples to help inspire you when it comes to producing your own typography based designs for the web.

BDS Graphic

HUB Festival

Daniel Hellier

Champions For Africa

Jarnheimer Productions

AS Creative Design

DIBI Web Confrence

Goksel Eryigit

Academy

Atom Bicycles

Teleios Man

Agencia de Publicidade

Joshhemsley

Omnivore

A Different Design

Kilan Muster

Phynk Creative

Information Highwayman

Federica Cau

Consorzio Creativo

The Code To Africa

Artinsite Magazine

Bennyroth

DesignWise

Kamal Mirz

Related posts:

1. 40 Beautiful uses of Typography in Web Design We all (designers) are aware of the changing trends in...
2. Fresh Uses Of Creative Backgrounds In Website Design No matter if its Typography, Color Scheme, Images, Animation, Backgrounds...
3. 30 Stunning Examples of Websites with Beautiful Gradients Being able to create transitional effects using two or more...

Related posts brought to you by Yet Another Related Posts Plugin.

Article source: Reencoded

Continue Reading

Beautiful Olympic Inspired Designs

Posted on 23. Feb, 2010 by Tony.

Article source: Designrfix

Continue Reading

Winners – 1000 Business Cards Giveaway

Posted on 22. Feb, 2010 by Tony.

Article source: Designrfix

Continue Reading

Google Olympic Logos from Past To Present

Posted on 19. Feb, 2010 by Tony.

Article source: Designrfix

Continue Reading

50 Awesome Website Design Galleries

Posted on 16. Feb, 2010 by Tony.

Article source: Designrfix

Continue Reading

Giveaway: Win 1000 Business Cards!

Posted on 14. Feb, 2010 by Tony.

Article source: Designrfix

Continue Reading

Create a Valentine’s card in Illustrator

Posted on 14. Feb, 2010 by veerle@duoh.com.

A few days back I created a simple Valentine card for a client’s project. I thought it would be ideal for an Illustrator tutorial as it is created using simple shapes and involved only a tiny bit of Pen tool drawing. In this tutorial it’s all about finding the right composition.

For this tutorial I'm using a document of 600 by 400 px. You might also wonder why I use pink instead of red. Well, here is the thing. Have you ever tried to use red with an opacity of 25% ? You get this weird shade that isn't really appealing to work with and so I with pink on the other hand you start with a way more interesting shade. Overlaying transparent pink shapes gives you this nice vibrant color effect. I know some of you might now like pink, but this is for Valentine.

Create diamond

Select the Rectangle tool and draw a square (hold down the Shift key). Select the Rotate tool and rotate the square 45° by holding down the Shift key while rotating. You can also just click the canvas after you have selected the Rotate tool, and enter the value of 45° in the popup window that appears and click OK. Resize the diamond shape using the Selection tool and by grabbing and dragging one of the shape's handlers. You need to hold down the Shift key (to keep the proportion) until top and bottom corner aligns nicely to the borders of your document.

Add gradient

Give the square a pinkish Linear gradient(RGB values used: R255, G219, B232 and R255, G0, B114)

Add transparency

Go to the Transparency palette and give the diamond an opacity of 25%.

Duplicate diamond

Duplicate the diamond by selecting the shape using the Selection tool (black arrow). Start dragging the shape to the right, now hold down the hold down the Option/Alt key, and right after also hold down the Shift key while you drag the duplicated shape perfectly horizontally towards the border of the document. You should have a nice overlapping diamond shape in the middle.

Group, duplicate and resize to 50%

Group both diamonds: go to Object > Group or hit Cmd/Ctrl + G. These 2 squares will be our 'object' we'll be working with now. Duplicate this object by pasting it in front: go to Edit > Paste in Front or hit Cmd/Ctrl + F. Now select the Transform tool and click in the center point of the object. In the popup window that appears, enter the value of 50% and click OK.

Flip vertically

Select the Reflect tool, click again in the center point of the object, select Horizontal Axis in the popup window and click OK.

Duplicate, duplicate...

Now play around with this object a bit more by duplicating it, scaling it etc. Try building up a balanced composition.

Arrange

Arrange your objects to your liking. Turn on Smart Guides (View > Smart Guides) so you can precisely align your different diamond objects. Try to create nice overlapping effects. Make sure everything stays well balanced. Even try to break the symmetric feeling of this object a little bit by moving some of them up, and then others down a bit. This needs a bit of experimenting. You could try using different colors if what you are making is not for valentine and add in other basic geometric shapes.

Create a heart shape

We need to create a heart shape that fits perfectly with our composition. Extra curviness would break the beauty of these straight geometric forms. So that's why we'll create the most basic heart shape using perfect 45° straight lines for the pointy bottom part.

1. Start by selecting the Ellipse tool and draw a circle (holding down the Shift key).
2. Make sure Rulers are on (View > Show Rulers or hit Cmd/Ctrl + R) and drag a vertical guide to the right point of the circle. With Smart Guides enabled (View > Smart Guides or hit Cmd/Ctrl + U) the guide should snap to the point.
3. Select the Line Segment tool from the Toolbox, hold down the Shift key while you draw a perfect 45° diagonal line. Select the line and move it so it aligns along the bottom left of the circle.
4. Go to View > Guides > Make Guides or hit Cmd/Ctrl + 5

1. Select the Pen tool from the toolbox and draw the bottom (point/triangular shape) part of 1/2 of the heart shape as shown in the image above. Use the guides you've just drawn and draw straight lines by just clicking. Make sure your path is closed.
2. Select both the circle and the triangle you've just drawn using the Selection tool (black arrow). Select the Reflect tool from the toolbox and click exactly on the vertical guide.
3. Select vertical axis and click the Copy button to duplicate the shape to the right.
4. Go to the Pathfinder palette and choose the Unite option. Circles and triangles should now be united as 1 path.

Add heart shapes

Play around with the heart shape by placing it on spots that makes an interesting composition. Use transparency to create overlapping effects.

Add background and text

Last but not least, add a subtle background. I've added a linear gradient background going from pink at the top to white at the bottom. I created a new layer below my composition to do this. Just draw a rectangle that matches the size of your document.

For the text, you can choose whatever you like of course, and you can also play a bit with transparency here. For my card I chose Gotham Black and Mrs Eaves Italic.

Article source: Veerle's blog: full articles

Continue Reading

Website Design: 30+ Beautifully Designed T-Shirt Sites

Posted on 11. Feb, 2010 by Tony.

Article source: Designrfix

Continue Reading

70+ Business Card Designs

Posted on 10. Feb, 2010 by Tony.

Article source: Designrfix

Continue Reading

Start A Logo Design Contest at LogoMyWay.com

Posted on 05. Feb, 2010 by Tony.

Article source: Designrfix

Continue Reading