What a week! I am still kind of reeling from the devastation that occurred down in Haiti, which actually hits very close to home for me. I’ve already started doing some design work to help drum up funds for the relief work. I’ll be posting more on that, and my own personal connection to Haiti later.

I’ve also been extremely busy with client projects – specifically, I’ve been working on a couple of websites, both of which are approaching completion. I’ll also be posting about those once they’re all done and have gone live.

All told, that’s why it’s been a bit quiet here on the Echo Enduring Blog this week. I do have a long line of content lined up though. It’s just a matter of getting in written, polished and posted. Hopefully you will see more of that over the coming weeks!

Now on to this week’s Echoes!

Logo – Living Grace Lutheran Church

It’s always great to see a well designed church logo that moves beyond the simple cliches that so many of them seem to use – a dove, a simple cross, a globe. This week’s logo is just such an example!

Living Grace Lutheran Church

Okay, so the logo is not entirely devoid of the cross image, but I’ll cut the designer some slack. The cross is the quintessential symbol of Christianity, so it only makes sense to have it reflected in a church logo. What I like about this one, though, is that the designer didn’t just fall back into the same old version of the cross. Actually, the cross shape is almost secondary. The first thing most people will see when they look at this is the tree.

There is actually a scriptural basis for the tree metaphor. In the book of Acts, the apostle Peter refers to the cross as a tree, and throughout the Gospels, Jesus presents several parables in which he talks about trees. I won’t get into the specifics here, but the image of the tree works very well for a Church.

It also does a nice job of dividing the background of the logo into four quadrants, which are coloured differently, to suggest the four different seasons. This suggests that the church itself is a church for all seasons, or, if reading the metaphor a bit more deeply, for all ages.

Art – Chaos

Even though I got a lot of my inner geekiness out in my “If Photoshop Was Batman, Then Illustrator Would Be…” post, there’s always room for a little bit more with me. So, when I came across this incredible painting of the Joker, I just knew I would have to feature it here in Echoes.

Chaos

I feel that the composition of this piece perfectly reflects the damaged psyche of the Joker character. The image itself is broken and distorted, just like the Joker himself. At least, we assume that the Joker is broken and distorted. It is entirely possible, however, that he is actually quite sane – and just completely evil. But that’s an entirely different can of worms.

There is something very interesting about the eyes in this one, though. They look almost calm and serene, states of being that are certainly not traditionally associated with the psyco-sociopathic clown. The make-up is also made to look more like paint, which appears to be melting off of the Joker’s face, further suggesting that the maniacal persona is exactly that, just a persona that the Joker puts on.

An interesting idea, and an awesome painting.

Tutorial – Design a Surreal Desert Scene in Photoshop

It’s been a while since I’ve featured a complex photo manipulation tutorial here on Echoes, so that’s what we will be looking at this week. The tutorial is from Tutorial 9, and provides in-depth, step by step instructions on exactly how to create a surrealistic scene using an interesting variety of different pieces of photographs.

Design a Surreal Desert Scene in Photoshop

Like most photo manipulation tutorials of this type, this one involves a lot of cutting elements out of their backgrounds, layering them over top of one another and using a variety of blending modes and other techniques to bring them all together into one cohesive looking final image. I don’t find that there’s anything really all that mysterious in this one. It makes some interesting use of levels for some colour adjustments, and does a good job of creating realistic shadows. Basically, though, it’s just a solid exercise in blending different photographic elements.

I also particularly like the techniques from the final few steps, which use some gradient maps and blending modes in order to really brighten up the image and give it that dreamy, surrealistic look. Those techniques are enough, in and of themselves, to make this a valuable tutorial.

I just have one question. Why does so much surrealistic art want to include clocks? Think Salvador Dali…

Website – Denise Chandler Website

Here’s a cool little site that came across in one of the CSS galleries that I frequent. This one has a pretty cool design, with a few interesting features.

Denise Chandler Website

For the most part, this is a minimalist site. The design elements themselves are relatively simple, and there is not a lot of excess decoration going on, and virtually no texture. Of course, the big, bold header of a question contrasts beautifully against this minimalism, giving the site immediate weight and impact from the moment it opens in the viewer’s browser window.

It’s also the first phrase of what seems to be somewhat self-effacing copy throughout the site. It’s all carefully chosen, of course, and crafted to make it seem like Denise doesn’t take herself too seriously (and she probably doesn’t). I’ve noticed that this is kind of a trend these days on designer sites. I wonder if the humour is beneficial?

The coolest part of this site has to be the bees though. The two very simply rendered little insects buzz merrily around the top of the page. This is a great example of how to give a bit of life to a static design without using flash. The bees exist simply as animated GIFs. Yes, that’s right – animated GIFs. They do still exist, and can have a purpose in the modern web beyond just advertisement banners! Very cool!

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

And please do keep the people of Haiti in your thoughts and prayers. Thank you.

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code – 0rx655ws

Go to Source

Go to Source

Related posts:

1. Attitude Twitter update for the week (2010-01-08)
2. Attitude Twitter update for the week (2009-10-09)
3. Attitude Twitter update for the week (2010-01-01)

Go to Source

Some time ago we began a series of posts on logo design. Our goal? To cover as many logos as we can until the end of the year… we started with logos starting with A, today is all about S’s. We’ve been seeing some great logos, and we wish to have you guys along with us on this design journey.

We’ll always be searching for logos in these galleries: Logopond, Logo Faves, Logo Moose, Logo from Dreams, Logo Gala, WS Logos, The Logo Mix and Wolda. If you know any more galleries or logos, or even if you own one and wanna be listed here as a source for our series, please drop us a link! We’d love to hear from you. We hope you all enjoy our selection of S logos! Cheers.

Go to Source

A Logo is a graphical element that, together with its logotype (a uniquely set and arranged typeface) form a trademark or commercial brand. Typically, a logo’s design is for immediate recognition. The logo is one aspect of a company’s commercial brand, or economic or academic entity, and its shapes, colors, fonts, and images usually are different from others in a similar market. Logos are also used to identify organizations and other non-commercial entities.

These types of corporate identities are often developed by large firms who specialize in this type of work. However, if you want to save some bucks and want to design your logo then there are many sources to get logo design inspiration. Infect, we might able to help you by presenting this showcase of Highly beautiful, original and creative logo designs for your design inspiration.

All of these logos are very creative and following different trends like PhotoFill, Concealed, VariDots, Candy Stripe, Flip Flop, Sequential, but most importantly Texting which is a common element among all of them. Also, try to catch how they created using specific colors combination, typography adjustments and font selection.

You may be interested in the following design inspiration related articles as well.

• Logo Designs For Design Inspiration – Part I, Part II
• 20 Sources To Get Logo Design Inspiration
• Single Page Website Designs For Design Inspiration – Part I, Part II
• 100+ Best Web Galleries Around for Your Inspiration
• Super-Clean and Minimal Web Designs
• Showcase Of Professional Looking Website Designs

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to design inspiration that our readers may like.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Go to Source

Thankfully within the design community there are no shortage of designers willing to offer free stuff, it just about finding them. That is where we can help.

In today’s news round-up we have collected exactly what you want, some fresh and free design resources.

80+ Photoshop Actions for Giving Your Pictures a Vintage Look

Photoshop actions are great. If you’re not familiar with actions, they are simply prerecorded adjustments made to a Photoshop file that can be saved and applied to other projects. The concept is simple, but the process to create some actions can be very complicated.

That’s why using actions can be a huge time saver. With just a click of a button you can apply a complicated effect to a Photoshop file instantly. In this article, they've rounded up over eighty Photoshop actions that will add very cool vintage or retro effects to your photos.

80+ Photoshop Actions for Giving Your Pictures a Vintage Look

12 Amazing And Free Stock Photo Resources

There are various components, from typography to colors, that makes a design impressive. Photos used are definitely one of the most important factors, and in this post, the author, has collected 12 free stock photo resources that are worth bookmarking.

12 Amazing And Free Stock Photo Resources

50 First-class & New Downloadable Fonts For Professional Designs

In this impressive collection, they have compiled an overview of 50 of the best Free, New and High-quality Modern, Handwritten, grunge, Cartoon style fonts for clean and professional designs all from last year. Great collection, certainly worth bookmarking.

50 First-class & New Downloadable Fonts For Professional Designs

Top 33 Best Logo Design Processes in 2009

In this round up they have collected 33 of the most popular Logo Design Processes from 2009. Have a look and see how the process of logo design evolves and maybe even draw inspiration for your own logo design.

Top 33 Best Logo Design Processes in 2009

By Paul Andrew (Speckyboy and speckyboy@twitter).

Go to Source

The first thing that caught my eye was the huge bold heading “Creative Engaging Branding”, this instantly tells the reader exactly what the company specialize in.

To the right of this great looking title is a slideshow of recent work from the agency, giving anyone interested an idea of the style of work they produce and the sort of clients they have worked with. I particularly like the way the work slides in using an array of different techniques, making it interesting throughout. It would have been very easy to put the same transition on every slide but I’m glad they put a little extra effort in to make them all different.

I know the Charles Elena Design site uses a very commonly seen colour scheme of Red, White, Grey and Black but they have used it to great effect throughout the site to give the whole thing a very striking impact.

Every section in the site has a different background colour making each unique, with the supporting colours used expertly to give hierarchy to the page. The pages with the red background are my personal favourite.

I really love the use of huge graphics throughout the site, these are very much in-line with the big bold headings on every page. There are more and more sites online these days incorporating massive font and graphics and Charles Elena Design is a great example of why. As you travel down the page you are treated to some lovely shapes that really show off the agencies skills.

One point I would make though is that the speed at which the page scrolls down means that these graphics are shown too briefly in my opinion. While you can scroll to the graphics and take them in properly it wouldn’t hurt to slow down the scroll speed.

While I’m suggesting improvements that could possibly be made I’d like to highlight the very small copy font that is used on occasion. In the example above the copy font size is 10.67px which is very small for such a long paragraph of text. I would love to see this bumped up a pixel or two because it’s currently very hard to read.

One final improvement I would love to see would concern the presentation of their portfolio. They have used a scrolling carousel to display their work, which in my opinion, is difficult to use as it makes focusing on specific work very fiddly. An option to scroll through the work one by one would be my preference.

Also, their is currently no way to enlarge the work on offer. I’d love to have the chance to open their work up in a lightbox and see it in all it’s glory.

I don’t want to seem too negative here though because overall I really love this site and think it’s a great piece of work. With that in mind, I want to now go onto my favourite design feature on the site, the fixed logo and navigation. As you take a journey down the page the logo and navigation come with you staying in a fixed position on your screen.

This may not seem special but the designers of the site have thought about this journey and incorporated the logo into the background graphics. In the example above the logo merges with the curved graphic to make it look as if the curve is bleeding out. There are numerous examples of this as you go down the page and it is small touches like this that, in my opinion, makes sites stand out from the crowd.

Go to Source

  

I’m used to seeing the cherry red dot of the Hale & Hearty logo on the streets of New York, but was surprised to see their products on UK shelves.

 

Go to Source

If you want to share more circular style logo designs please comment about them below. Do you want to be the first one to know the latest happenings at  smashingApps.com just subscribe to our rss feed and you can follow us on twitter and do not forget to become our fan on facebook as well. Click on the images to go from where the images has been taken and learn more about their creators and to appreciate them.

DOT Design

Volkswagen

Element graphics

Yamaha

Sony Ericsson

Biopharmaceutical Company

Basketball Store

WireFilter

WICCEs

Temple Beth Torah

syslint

Wonderbali

WordPress

Accelrys

Tide

BlueShark

Vodafone

AT&T

Air Canada

Filmax

Timberland

Motorola

Firefox

LG

Mercedes Benz

Safari

Nissan

Pepsi

Caltex

Shamanic Healing

Outso

HetSpui

Otis

Inside Oeste

GI Creative

Sapuflex

RE Digital

Dragon and Tiger

Dragon and Tiger

Engage Fulfillment

Brought To You By

Do you want to advertise here? Click to get more info…

Go to Source

Some time ago we began a series of posts on logo design. Our goal? To cover as many logos as we can until the end of the year… we started with logos starting with A, today is all about R’s. We’ve been seeing some great logos, and we wish to have you guys along with us on this design journey.

We’ll always be searching for logos in these galleries: Logopond, Logo Faves, Logo Moose, Logo from Dreams, Logo Gala, WS Logos, The Logo Mix and Wolda. If you know any more galleries or logos, or even if you own one and wanna be listed here as a source for our series, please drop us a link! We’d love to hear from you. We hope you all enjoy our selection of R logos! Cheers.

http://imgs.abduzeedo.com/files/articles/logos-r/

Go to Source

Go to Source

It’s widely recorded that Newton *discovered* the concept of gravity (and the resulting science of physics) as a result of observing apples falling from a tree. In tribute, the drop apple theme is mimicked on Google’s global Home Page today.

The Google logo is partly obscured by the branch of an apple tree. After a second or so, an apple drops from the branch to the bottom of the home page. It’s unusual for Google to create an animated tribute Doodle and it makes a nice change from the static images.

Clicking on the logo takes you to SERPs for the search query “Isaac Newton”.

Apart from his wide influence on modern physical science, Newton also made great strides in mathematical research, chemistry, history and theology. See the logo in action below:

[flashvideo filename="http://www.ask-kalena.com/videos/gg-apple-drop2/gg-apple-drop2.swf" /]

Post from: SiteProNews: Webmaster News & Resources

Google Pays Tribute to Sir Isaac Newton

Go to Source

It’s January 1 2010, and Google is celebrating in its customary fashion: a shiny Google logo to mark the occasion.

Today’s Google doodle features a clock tower and fireworks; we happen to think it’s one of their better attempts (better, certainly, than the obscure holiday logo series).

Google lists all its past logos at Google.com/logos.

What do you think of the latest Google doodle? And what’s your favorite of all time? Let us know in the comments.

Tags: Google, logo, New Year

Go to Source

Go to Source

Some time ago we began a series of posts on logo design. Our goal? To cover as many logos as we can until the end of the year… we started with logos starting with A, today is all about Q’s. We’ve been seeing some great logos, and we wish to have you guys along with us on this design journey.

<!–break–>

We’ll always be searching for logos in these galleries: Logopond, Logo Faves, Logo Moose, Logo from Dreams, Logo Gala, WS Logos, The Logo Mix and Wolda. If you know any more galleries or logos, or even if you own one and wanna be listed here as a source for our series, please drop us a link! We’d love to hear from you. We hope you all enjoy our selection of Q logos! Cheers.

Thanks to @gariphic

Thanks to @rafelcavalcante

Go to Source

In Part 1 of this tutorial, you learned step-by-step how to design an awesome band website in Photoshop. Now in Part 2, you’ll learn how to take that PSD and turn it into clean, working XHTML/CSS code.

Band Website Series:

• Part 1: How to Design a Band Website Layout in Photoshop
• Part 2: Coding a Band Website Created in Photoshop

Working Proof

If you follow along with the tutorial, you should end up with the following live demonstration.

Click to view live demo

Setting up the files

1 Start out by creating a new folder on your computer to put all of the site files in; I titled my folder sixrevisionsband. Create another folder in your working folder you just created and call it images; it will contain all the images, including CSS background images, for the site.

2 Now open up your favorite code editor (I use Coda.) Create a new HTML file titled index.html in the root of the folder -this will be our main page template. I like to keep all of my stylesheets in one folder in case I need to add a few different stylesheets. That way they are all kept together neatly. So we’ll add a folder titled css, and a CSS file inside it titled screen.css. screen.css will be the main stylesheet for our template.

I start out the HTML with some basic stuff, making sure to add a title and a link to the stylesheet:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<title>Six Revisions Band Website</title>
</head>
<body>

</body>
</html>

My stylesheet also starts out with a few basic styles such as a border, margin, padding reset for all elements and some style declarations for common elements such as headings, lists, paragraphs, and hyperlinks. Then to organize, I break the stylesheet into several logical parts so that when I maintain the stylesheet later on, things will be easier to find:

/***** Global Settings *****/

html, body {
  border:0;
  margin:0;
  padding:0;
}

body {
  font:.9em/1.3em arial, helvetica, sans-serif;
  color:#403d3d;
}

/***** Common Formatting *****/

h1, h2, h3, h4, h5, h6 {
  margin:0;
  padding:0;
  font-weight:normal;
}

h1 {
  padding:30px 0 25px 0;
  letter-spacing:-1px;
  font:2em arial, helvetica, sans-serif;
}

h2 {
  padding:20px 0;
  letter-spacing:-1px;
  font:1.5em arial, helvetica, sans-serif;
}

h3 {
  font:1em arial, helvetica, sans-serif;
  font-weight:bold;
  padding:5px 0 10px 0;
}

p, ul, ol {
  margin:0;
  padding:0 0 18px 0;
}

ul, ol {
  list-style:disc;
  padding:0 0 18px 40px;
}

img {
  border:0;
  margin: 0 0 5px 0;
}

/***** Links *****/

a, a:visited {
  text-decoration:underline;
  color:#403d3d;
}

a:hover {
  text-decoration: none;
}

/***** Wrapper *****/

/***** Header Area *****/

/***** Homepage Content *****/

/***** Footer *****/

/***** Global Classes *****/

.clear { clear:both; }

Starting with the background (in Photoshop)

3 I like to start out from the back and work my way forward (towards the screen). If you downloaded the PSD file from Part 1, you’ll notice the layers are organized into folders: header, home, footer, and back. This helps for the coding process.

You’ll want to turn off all of the groups except for back, which contains all of the layers with the background files. You’ll also want to turn off the content area, and you’ll be left with this:

4 You’ll need to change the canvas size (Image > Canvas Size) to 1600px wide so the background will be wide enough to save as a full-width background. Once we do that, we see that the grid texture has harsh lines that we’ll need to get rid of.

5 We’ll create a mask like we did in Part 1. Select the layer with the grid texture by holding down the Cmd/Ctrl key and clicking on the layer thumbnail in the Layer Panel.

6 Then create the layer mask by clicking on the Add Layer Mask button at the bottom of the Layer Panel.

7 We’ll choose a large soft round brush, like Soft Round 300 and change the Opacity and Flow settings to 50%. Make sure your foreground color is set to black (press D to reset your foreground and background color quickly). Softly brush the sides (not the bottom) a few times until the harsh lines are all gone. Your background should look like this:

5 Our background is ready to save. Choose File > Save for Web & Devices. I like to experiment in here and find the best settings for the image, while trying to keep the file size as low as possible. With this image, I found that a JPG at 40% keeps the file size fairly low but the quality good enough so that it’s not pixilated. Save this to the images folder as background.jpg.

Adding the background to the web design

6 To add the background to your design, use the body element’s CSS background attribute. The style declaration below tells the background not to repeat, to be at the top and in the center at all times, and when the picture runs out, use the tan color #d5d4c2.

body {
  background: url(../images/background.jpg) no-repeat top center #d5d4c2;
}

Next, we’ll need to make sure all of our other items are centered in a 960-pixel wide wrapper. I’ll add a wrapper div in HTML:

<div id="wrap"></div>

And then we’ll need to give it some styles to center it:

#wrap {
  width:960px;
  margin:0 auto;
}

Working on the site’s logo

7 Turn all layer folders back on to see what’s next. I like to code in the order the items will be in the HTML, so the logo is next. I add some guides around the logo to make everything precise and then I crop the logo to the guidelines. I save this out as a JPG at 40% as well.

8 Now we’ll add the logo in with an h1 tag, which tells search engines that this an important element on our page. Then we’ll add an a tag inside of it that will link back to the homepage.

<div id="logo"><h1><a href="index.html">Six Revisions</a></h1></div>

I like to use a negative text-indent which will hide the text from sighted viewers, but will still be visible to search engines and screen-reading technologies.

And then I add the image in as a background in the stylesheet. We’ll also need it to float it left because the navigation will be floating to the right. Here’s what the CSS looks like:

#logo h1 {
  float:left;
  display:block;
  padding:21px 0 0 23px;
  text-indent:-2000px;
  margin: 0;
}

#logo h1 a {
  width:293px;
  height:100px;
  display:block;
  background:url(../images/logo.jpg) no-repeat;
}

Coding the navigation

9 Moving on to the navigation. First we’ll go in and crop out the hover background, cropping it at 1px wide by 110px tall. We can save it out as a PNG-24. The transparency will work everywhere except in Internet Explorer 6 and below, but it’ll appear as a light grey background there, which I’m fine with.

As a quick note, I do test and make sure my sites are functioning in Internet Explorer, but as you may know, IE6 has several issues, like not supporting certain image types (like PNG-24s) and misinterpreting certain CSS specs. So I find ways to make it work but according to browsers stats by w3 schools in October 2009, only 10.6% of internet users are still using IE6 and it appears to be dropping quickly. So, although the light grey hover background isn’t as classy as the transparent PNG-24, it gets the job done, which is my method for taking care of IE6. Period. Ok let’s move on.

We’ll use a straightforward unordered list, and the HTML will look like this:

<div id="navigation">
  <ul>
    <li><a href="#">News</a></li>
    <li><a href="#">Songs</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Tours & Events</a></li>
  </ul>
</div>

I’ll show you the CSS and then I’ll break it all down:

#navigation {
  float: right;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1em;
}

#navigation a {
  color: #706752;
  text-decoration: none;
}

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
  display: block;
}

#navigation li {
  float: left;
  display: block;
  padding: 64px 0 33px 0;
}

#navigation li a {
  padding: 64px 14px 33px 14px;
}

#navigation li a:hover {
  background: url(../images/hover.png) repeat-x;
}

First, I floated the navigation to the right to get it into place. Then I added some styles to get the look of the text to be uppercase and bold with a 1.1em font size. Also, I changed the link color to #706752 and told it not to have any underline.

#navigation {
  float: right;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1em;
}

#navigation a {
  color: #706752;
  text-decoration: none;
}

Now onto our unordered list. First, I took away any list-style and zeroed out the padding and margins, and then added another float right to get it placed correctly.

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
  display: block;
}

Next, I floated the li to the left to get each link to sit next to each other, because the default is to line up vertically. If you float the li right, then your links will be listed backwards. Then, I added padding to the top and bottom of the li with #navigation li to get the links in the right place.

#navigation li {
  float: left;
  display: block;
  padding: 64px 0 33px 0;
}

This padding spaces the li’s out from side to side and also tells the hover action the height.

#navigation li a {
padding: 64px 14px 33px 14px;
}

And finally we add in our hover background, which will repeat horizontally.

#navigation li a:hover {
background: url(../images/hover.png) repeat-x;
}

Coding the content area

10 Moving on to the content area. Back in Photoshop, we’ll turn off these groups: home and footer, leaving back and header group on. We’ll add guides to the top and the bottom of the content area to decide where we’d like to crop it. I find that 960 pixels wide by 710 pixels tall will be a good size and plenty tall enough. Crop it and save it for the web. And again, a JPG at 40% will do the trick.

We’ll clear the float above with:

<br class="clear" />

Then we’ll add a div called #contentarea for the content area and then style it. A simple hack was added here, as IE6 doesn’t recognize min-height. The two lines beneath min-height (height and _height) allow IE6 to recognize the fact that we’d like the #contentarea div to be at least 830px tall. I also added in padding to push all the content inside in the right place easily.

#contentarea {
  background: url(../images/contentarea.jpg) no-repeat top center;
  width: 908px;
  min-height: 684px;
  height: auto;
  _height: 684px;
  margin: 18px 0 0 0;
  padding: 26px 26px 0 26px;
}

11 Next, inside the content area is the feature. You can place a slider here using this tutorial called Create a Slick and Accessible Slideshow Using jQuery or use a flash component. To keep things simple for the code and for the purposes of this tutorial, we’ll just simulate the look of the an animated feature with a simple image for now.

I’ll keep call this section #flash:

<div id="flash"><img src="images3/flash.jpg" alt="flash" /></div>

And the CSS is basic dimensions and margin definitions:

#flash {
  width: 908px;
  height: 411px;
  margin: 0 0 35px 0;
}

The margin on bottom accounts for the space between the #flash div and the 3 columns that will be below.

Creating the columns

12 Now we’ll crop out the next couple photos to get everything ready for the 3 columns of content below the flash. We’ll need to crop the video (which we’ll simulate with an image for this tutorial, just like we did with the #flash image), and the 6 social media icons.

13 Next we’ll set up the HTML for the columns. The br tag clears the float for the footer that will be below these columns.

<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
<br class="clear" />

Some simple CSS gets the columns all set up and in place:

#column1 {
  float: left;
  display: block;
  width: 233px;
  margin: 0 68px 0 0;
}

#column2 {
  float: left;
  display: block;
  width: 335px;
  margin: 0;
}

#column3 {
  float: right;
  display: block;
  width: 207px;
  margin: 0;
}

14 We’ll add the content to the first column and your html should look like this:

<div id="column1">
  <h3>Latest Videos</h3>
  <p><img src="images3/video.jpg" alt="video" /><br />
  <a href="#">Another video to watch here</a><br />
  <a href="#">And yet another video here</a></p>
</div>

15 For the blog posts in column 2, I could use simple pie or some php script to call in the 3 most recent blog post titles and a couple lines, but for now we’ll just add some simple HTML to column 2 to simulate the look of the blog posts:

<div id="column2">
  <h3>Six Revisions blog</h3>
  <p><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a><br />
			Nunc eu mi risus, nec luctus justo.[...]</p>
  <p><a href="#">Bibendum est eu gravida cras dui sem</a><br />
			Venenatis a egestas id, consectetur faucibus nibh.[...]</p>
  <p><a href="#">Aliquam arcu nisi, sagittis at feugiat quis</a><br />
			Accumsan ut metus. Mauris rhoncus[...]</p>
</div>

16 The third column will be set up using some unordered lists, to get the indent without having to use another div. Here’s our HTML:

<div id="column3">
  <h3>Connect with us</h3>
  <ul>
    <li><a href="#"><img src="images3/facebook.png" alt="facebook" /></a></li>
    <li><a href="#"><img src="images3/myspace.png" alt="myspace" /></a></li>
  </ul>
  <ul>
    <li><a href="#"><img src="images3/twitter.png" alt="twitter" /></a></li>
    <li><a href="#"><img src="images3/linkedin.png" alt="linked in" /></a></li>
  </ul>
  <ul>
    <li><a href="#"><img src="images3/flickr.png" alt="flickr" /></a></li>
    <li><a href="#"><img src="images3/rss.png" alt="rss" /></a></li>
  </ul>
</div>

I also had to add some CSS to control the unordered list properly:

#column3 ul {
  list-style: none;
}

#column3 li {
  float: left;
  display: block;
  padding: 0 27px 10px 0;
}

The finale: the footer

17 Almost there! Moving onto the final piece, the footer. Add some simple HTML:

<div id="footer">
  copy; 2009 Six Revisions Band  |  <a href="#">contact us</a>
</div>

And the CSS is pretty simple as well. The line was added with a 6px border at the top and I needed some space above the line (which I created with margins) and some space below the line and above the text (which I created with padding). I also wanted some space below the text and before the edge of the browser window, which I created with padding as well. And the font size needed to be slightly smaller than the other body copy, so I made it .9em.

#footer {
  width: 960px;
  border-top: 6px solid #c4c2af;
  padding: 10px 0 30px 0;
  text-align: center;
  margin: 30px 0 0 0;
  font-size: .9em;
}

And we’re all finished!

Thanks for following along through the full tutorial. I hope you learned some coding techniques and PSD to XHTML/CSS tricks. Feel free to ask any questions and definitely let me know what you think in the comments area.

Download the source files

• band-website-html-css (ZIP, 0.22MB)

Related Content

• How to Design a Band Website Layout in Photoshop
• Minimal and Modern Layout: PSD to XHTML/CSS Conversion
• How to Make a Light and Sleek Web Layout in Photoshop
• Related categories: Tutorials and Web Development

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly at the Snoack Studios blog and you can connect with @snoackstudios on Twitter as well.

Go to Source

If you want to share more logo that has been rebranded in 2009 please comment about them below. Do you want to be the first one to know the latest happenings at  smashingApps.com just subscribe to our rss feed and you can follow us on twitter and do not forget to become our fan on facebook as well. Click on the images to go from where the images has been taken and learn more about their creators and to appreciate them.

Mozilla’s Firefox

Armani Exchange (A|X)

MSN

Imagine Games Network (IGN)

Friendster

Art Gallery of Alberta

Pfizer

America Online (AOL)

Telecom

Hertz

Nickelodeon

The New York Public Library

Australia and New Zealand Banking Group Limited (ANZ)

Network Solutions

My Little Pony

Silicon Graphics, Inc. (SGI)

Chicken Now

PlayStation 3

Videocon

Vistaprint

Audi

Apple Quicktime

Sunny D

Union Bank

Packard Bell

Emily Carr Institute of Art and Design

France Guide

Corbis

Air France

AFC Champions League

MyFonts

Discovery Kids

Opera

Society for Environmental Graphic Design (SEGD)

Thanks to Brand New that is the source of Logos above.

Brought To You By

Do you want to advertise here? Click to get more info…

Go to Source

  

I read somewhere that showing your client the full range of your creative ideas during a project is important, the rationale being that the client is entitled to see the ideas coming from the creative professional who they have hired and invested in. While this approach has some benefits, in some cases showing too many ideas is counter-productive to the natural flow of a project. Proof of how imaginative you are can be shown in other ways.

Spoilt For Choice

Scenario 1

You look at your Illustrator pasteboard and see half a dozen cool logo ideas… not just cool, but super-cool… not just super-cool, actually, but practical and appropriate. You have translated the brief brilliantly. You feel rather pleased with yourself. However, the last time you showed a client all of your ideas, you got caught up in a dizzying merry-go-round, forced to mash up parts of one logo with parts of another, using unsuitable and under-baked concepts.

That client was overwhelmed with ideas and unable to choose one or the other: too many directions, and too many good ideas. You offered all your super-cool ideas on a platter, convinced that you had nailed all possible directions. You worked hard to pre-empt your clients questions and suggestions. But with all of this hard work, you unwittingly set in motion a series of events that many designers before you have experienced.

Putting your client in the position of a kid in candy store can lead to some of the more frustrating experiences in design work. Are we undermining the flow of a project with our need to have our creative ego stroked by the client?

Too much choice can be a bad thing for clients.

Scenario 2

Again, looking at your Illustrator pasteboard, you see half a dozen cool logo ideas: super-cool, practical and appropriate, in fact. You have translated the brief brilliantly, as before.

The client is impressed by your imagination, your interpretation of the brief and your ability to think outside the box. They feel embarrassed — even spoilt — by the choice of amazing ideas; not what they were expecting, given their previous experiences. The client looks at the ideas and realizes you were the right person for the job. They go away to mull over the ideas.

You’re pleased. The client is pleased. Time for a beer.

The client returns with a decisive plan of attack. They have picked out one or several potential winners from among your ideas and are keen to walk through tweaks and changes with you. By showing the client all of your ideas, whether cool or funky, practical or safe, you have covered all bases, left no room for misinterpretation and accounted for that notion of “subjective perceptions.”

As is almost always the case, you have your own favorites, but prior experience has shown that you mustn’t assume the client will feel the same.

Fewer Ideas, Less Choice

We could alter these two scenarios by changing the “showing all ideas” to “showing just a few.” The advantages would be that the client would not be overwhelmed: you will have provided just a few promising ideas. This way, you are being assertive and confident in your ability to interpret the brief. You also believe that the client would be handicapped by more choice.

In both cases, the client might be pleased with the ideas you have picked out and your ability to get the job done. You are a creative laser-guided missile. You don’t need your ego stroked, and you don’t need to show off your awesome imagination to every client. Your portfolio does that just fine.

You have many other cool and practical ideas up your sleeve, but putting all your cards on the table at this time is not necessary. Save them. If the client does not buy any of the ideas you’ve filtered for them, even after you have justified their suitability, you can fall back on those. Even if you lose round 1, you’re prepared for round 2.

Be Aware

Consider these points before attempting a full-360 triple-duck-tailed high-board dive. This is not a comprehensive list but a good starting point when deciding whether to show some or all of your ideas.

Knowing Your Client: A Psychological Angle

Ultimately, your flexibility in your presentation of ideas will be determined by how well you know the client: getting a good sense of their personality, their brief and other personality- and business-related issues. You will also have to know the process that your contact will go through back at their base: are they the decider, or do they report back to a board or senior staff member?

When a group of people is involved in making decisions, you may want to keep a tighter reign on the creative process. Presenting too many ideas to one person can be overwhelming, but too many ideas for a board of six spells disaster.

Being able to read people is not only useful: it can save your sanity over time. Design and creativity are one thing, but if you want to excel at business and attract new clients, especially as a freelancer, being well versed in basic psychology goes a long way.

Cover Your Back: A Solid Brief

A tight brief is always essential and one of the first things to cover before doing anything creative. A firm and assured hand is often required. Research the company. Understand its decision-making structure. Your point of contact may not always be the decision-maker; you don’t want to pander to the wrong person. Pre-empt undesirable outcomes by familiarizing yourself as much as possible with your client and their business. For example, you may have been given a thorough brief, but if the person who prepared it is not responsible for making decisions, it could be all for nought.

The brief can change during a project, and it can change significantly without you being aware of it. The very nature of the creative process and your collaboration with the client can unearth ideas not previously considered. Be fluid and organic in your approach. When you feel the brief no longer reflects the direction of the project, be prepared to revise it with the client.

Take a time-out, and give yourself time to breath and re-evaluate. Don’t feel pressured to commit. Assess the situation and determine whether a realignment is in order. Better to backtrack a little now, because at the end you will just have further to backtrack.

Ask a lot of questions. The more you immerse yourself in the project, the more familiar you will become with the subject matter. Don’t be afraid to keep asking questions if you feel they are important to the outcome of the project.

Communication

For many freelancers, meeting the client face to face is not always possible, and you may run into complications if you haven’t made provisions. Personally, I liaise with clients through email or Skype, but only when the brief and communication are solid. If the responses are short or not forthcoming, then I take it to the phone. Only then am I able to get a sense of what the client is about.

In my experience, we are getting lazy as communicators, trying to deal with all aspects of life — business and personal — via email and text messages. Some clients I’ve had have refused to speak with me by phone, while their written communication failed to inspire me with confidence.

If this happens to you, reflect on whether the project is worth taking on. If you have problems communicating before the project has even started, you will likely hit a brick wall when trying to get feedback on creative ideas or dealing with set-backs. I have on occasion “fired” clients because they were not pulling their weight, yet expected me to bust my gut. It doesn’t work like that.

A true collaboration requires the commitment of at least two people: the designer and client.

To Conclude

There is no right or wrong answer to the question of whether to show all of your best ideas right away. Assess each client on their own terms and figure out what’s best. Would the client be overwhelmed by too many choices, or would they welcome the variety? No one size fits all. On occasion, your experience or a hunch will tell you to focus on only one concept, with perhaps a few minor variations. The work period may be slow, and you have only one project on the go and are happy to spend the extra time on what may be a valuable repeat client.

Sometimes sticking your neck out and giving more than you are being paid to do is worthwhile, but that’s a choice only you can make. Don’t make it a habit, or your clients will come to expect that extra workload of you all the time: a quick path to freelance burn-out.

Being a good judge of character, understanding human interaction, being able to see past the here and now to pre-empt later problems, all of this helps you keep your sanity. Spend time learning and researching not only creative techniques but people, too. Your job and overall quality of life will improve as a result.

Your Thoughts

Are you guarded or care-free in sharing your ideas with clients? Do you have a one-size-fits-all solution, or do you approach each client on their own terms? Have you discovered certain winning methods of dealing with particular situations?

We can all learn from one another’s experiences in dealing with people in business. If you are starting out as a freelancer, take whatever advice others are willing to give.

Image Credits

• Choices by andreiz
• Be aware by pictureperfectpose
• Creative Brief by meine-erde
• Communication by larskflem
• Conclusion by mrtea

(al)

© Graham Smith for Smashing Magazine, 2009. | Permalink | 2 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: brief, ideas, logo design

Go to Source

It’s Christmas time, and there’s no need to stick to your standard company logo. At Christmas time, we let web designers have a bit of fun, and in our world of brand identity, we can spread a smile of joy.

But say a prayer; pray for all the other ones: all those weary web travelers who have woken up and jumped into their regular browsing routine. If it weren’t for all the Christmas-themed logos, would they know it’s Christmas time at all?

Yes, it’s Christmas, and you’ll find bits of holiday cheer on almost every major website. Like every year, we’ve scouted the web and listed a couple of Christmas logos we like.

Of course, if you know of any other cool examples, please let us know in the comments. And yes, Merry Christmas to you all!

Tags: Christmas, design, logos, web design

Go to Source

Some time ago we began a series of posts on logo design. Our goal? To cover as many logos as we can until the end of the year… we started with logos starting with A, today is all about P’s. We’ve been seeing some great logos, and we wish to have you guys along with us on this design journey.

<!–break–>

We’ll always be searching for logos in these galleries: Logopond, Logo Faves, Logo Moose, Logo from Dreams, Logo Gala, WS Logos, The Logo Mix and Wolda. If you know any more galleries or logos, or even if you own one and wanna be listed here as a source for our series, please drop us a link! We’d love to hear from you. We hope you all enjoy our selection of P logos! Cheers.

Go to Source

Philadelphia is a happening little city, the cradle of liberty, and the site of Happy Cog East. It’s also a city that gets unfairly overlooked—like a beauty whose sisters are supermodels. But I have a plan.

I want to rebrand Philadelphia as !adelphia.

I can see the logo. I can see half a dozen ad campaigns, some of them even good. I see a decent theme-line and sense that a much better one is out there. I see commercials and bus posters, I hear tourist board tie-ins and radio spots. I see Kottke, Joe Clarke, and Design Observer trashing the campaign on various intellectual and typographic grounds. I see contests where designers submit how they would have done the logo.

Maybe it’s the meds talking, but I think we’re on to something. Viva !adelphia!

Go to Source

As usual we have a mixed bag of resources for you to browse and rummage through. There is a lot of good reading, inspirational posts, freebie downloads and if you stumbled on this page looking for My Little Ponies, well… we have them as well.
Just in case you are not one of our Twitter followers, click here: twitter.com/speckyboy.
As always, if you have any cool links that you would like to share, do not hesitate to send them to us here: Submit News. Thanks to everyone that has been emailing.

What You Need To Know About Behavioral CSS

CSS 3 properties like border-radius, box-shadow, and text-shadow are starting to gain momentum in WebKit (Safari, Chrome, etc.) and Gecko (Firefox) browsers. They are already creating more lightweight pages and richer experiences for users, not to mention that they degrade pretty gracefully; but they are only the tip of the iceberg of what we can do with CSS 3.
In this article, they take those properties a step further and explore transformations, transitions, and animations. They go over the code itself, available support and some examples to show exactly how these new properties improve not only your designs but the overall user experience.

CSS Techniques I Wish I Knew When I Started Designing Websites

The authotrs of this article, on Noupe, have put together a list of the most frustrating and time-consuming CSS headaches and, more importantly, provided solutions (along with examples and further resources).

Is The User Experience Overrated?

What constitutes a usable design? How do you get them to interact with your website the way you want them to? Not only do we have to learn how users think, but also how they adapt to new techniques as they are introduced. Is one method more effective than another? Is the new way really better than the old?

50+ Beautiful Collection of Creative Typography

The Philosophy of Design

“Design” and “Designer” – are words that are often used rather liberally to refer to the profession or craft of “making functional and perceivably attractive things”. Design in its contemporary linguistic usage bears an almost absolute resonance with “beautiful aesthetics”; a connection, which is understandable but inherently myopic. Design is creativity and beauty but also much more.

100 epic images from Hubble Space Telescope

The Hubble Space Telescope, named after astronomer Edwin Hubble and launched into space in 1990, has since taken almost 200,000 pictures of the Universe which have been released to the public. In this gallery there are over 100 epic images, compiled from NASA, The Hubble Heritage Project, Space Telescope Science Institute, HubbleSite.org and NASA APOD.

Evolution of 50 Corporate Brand logos

Do you know the reason behind the small cut in the Apple logo? Or did you ever wonder what the Microsoft logo looked 20 years ago? Or perhaps you might have wondered what the BMW logo actually means? Well, In this article, thay have shared 50 corporate logo remakes which takes us back to the beginning years when history was about to be crafted. The exact meaning of the some of the logos is quite tricky while others are absolutely astonishing.

45 Creative Examples of My Little Pony Customization

My Little Pony – Yes, they are toys for little girls, but that doesn’t mean they can’t be a source of awesome creative inspiration. This collection of talented artists show how imagination and skill can transform the popular kids toy into amazing customized designer toys.

The 15 Best Articles For Designers in 2009

What a great year it has been for design related articles. So many new blogs, new blog writers, great content, great resources, a lot of inspiration, it really has never been a better time to be a designer. In this round-up, from Design Reviver, they have collected fifteen of the most popular design related articles from 2009. There are great resources for fonts, Photoshop, web design templates, as well as amazing web design and graphic design tutorials.

25 Beautiful Free PSD Files to Download

In this post, they have collected 25 .psd files which you can easily download and reuse. This collection comprises of some interesting cards, special effect files, templates and many more.

Incredible Examples of Snowflake Photography

With a decent camera and zoom or macro lens, things you wouldn’t normally pay too much attention to becomes a complete world in themselves, making them a magnificent source of inspiration for artists and designers all over the world. In this article, they have collected some incredible close-up/macro shots of snowflakes to really get the arty-side of you in full flow this Christmas season.

A Top View of Tokyo

The metropolis that is Tokyo has an abundance of energy, and its cityscape captured by photographer, SATO Shintaro, in this showcase, shows maintained exquisite balance intermingled with existence of people in the city.

23 creative and amazing bike designs

Most Notable Features in WordPress 2.9

Long awaited WordPress 2.9 has been finalized by the developers and it is put out for download as a release candidate. Some of you might be wondering what is a release candidate. A release candidate is when the developers feel that all features that were to be added during the beta version are added, and this version could potentially be made official except it can use some extra testing for bugs.

How to Build a Shopping Cart using CodeIgniter and jQuery

CodeIgniter is an open source PHP web application framework with a lot of features. Recently, thanks to the latest update, a new feature was added to this framework, called the Cart Class. In this tutorial, you're going to take advantage of this new class, and write a shopping cart system, with a touch of jQuery added in.

Musings on Paginating Chronological Content

Pagination is a metaphor. It is a way to break up content onto multiple pages when putting it all on one would be to overwhelming or resource intensive. Google’s approach has defined how we think about pagination, and thus what we feel to be intuitive. But to what end?

22 Greyscale Brochure Design Inspiration

Sometimes, using less color is all you need to create an impressive brochure design. Keeping your brochures simple allows readers to focus completely on the design. In this post they’re highlighting fresh and clean brochure designs to inspire your next printing project.

60+ Creative & Inspirational Newsletter Design

As web designers, we know how to build a modern, semantic and accessibility-oriented website, with proper XHTML and CSS. We understand all the necessary ingredients in making a good website and their implementation. How about creating an equally good newsletter that matches its company’s standard. In this article there is an amazing list of over 60 beautiful newsletter designs.

Animated Sharing Bar With jQuery & CSS

With this tutorial you can learn to use pure JavaScript with the jQuery framework, to make an animated sharing bar, which will enable your website visitors to share posts on a number of social networks.

10 Ways to speed up your website

There is nothing more frustrating for a user than waiting an age for a web page to load. Even in today’s world of high speed broadband it is imperative that you build your web pages to load as fast as possible. None of your user’s want to sit waiting for a page to load.
In this guide, the author, describes, 10 ways in which you can dramatically speed up your website and keep user’s with the slowest of internet connections happy and keep them returning for more.

55+ The Best Advertisement Campaigns by adsoftheworld

Really Simple Browser Detection with jQuery

Design a Clean Portfolio Website Layout in Photoshop

40 Inspirational Black and White Photos

Previous Twitter News…

Twitter Design News Roundup N.15 »
Twitter Design News Roundup N.14 »
Twitter Design News Roundup N.13 »
Twitter Design News Roundup N.12 »
Twitter Design News Roundup N.11 »
Twitter Design News Roundup N.10 »
Twitter Design News Roundup N.09 »
Twitter Design News Roundup N.08 »
Twitter Design News Roundup N.07 »
Twitter Design News Roundup N.06 »
Twitter Design News Roundup N.05 »
Twitter Design News Roundup N.04 »
Twitter Design News Roundup N.03 »
Twitter Design News Roundup N.02 »
Twitter Design News Roundup N.01 »

Go to Source

A logo is the most important element of brand as well as essential for creating a great brand identity and evidence of a business’s reliability. When designing a logo, knowing which type of mark would be the most appropriate for the application will help you achieve a stronger solution.

In this collection, we present 50+ creative logo designs that will use Letterform marks as a symbol to convey the brand message that will hopefully inspire you.

If you don’t want to miss out our next posts, you can Subscribe to the 2Experts Design Blog or follow us on twitter

Enjoy this Post? Subscribe to the 2Experts Design Blog or follow us on twitter

Our blog is updated regularly with content related to web design, inspiration, tutorials, wordpress, freebies and much more. If you don’t want to miss out on future posts, you can subscribe by RSS or Email

Go to Source

Google has lately been prone to changing its own logo, often turning it into a series of doodles with a riddle attached. It seems we’re about to see another series of logo changes, but this time their purpose is quite easy to discover.

If you’ve visited Google today, you may have noticed that Google logo has turned into a holiday postcard. Clicking on it leads to a “Happy Holidays” landing page, with the current logo listed as the first in a series.

What can we say; thanks, Google, we wish you happy holidays, too!

Tags: Doodle, Google

Go to Source

In this round-up we have collected fifteen of the most popular design related articles from 2009. There are great resources for fonts, Photoshop, web design templates, as well as amazing web design and graphic design tutorials.
Lets hope 2010 will be even better!

Logo Design – How NOT To Design A Logo

This was the most popular design related article of 2009, published on Web Designer Depot in January.

It was an article about how underrated logo design in today’s world and how peolple do not understand how important a good logo is and how valuable it is to their business.

They outline the ways in which you should NOT go about getting your logo designed… that is, if you are truly serious about business.
Logo Design – How NOT To Design A Logo

30 high-quality free fonts for great designs

Even though you’ll have to pay for the best fonts, like Helvetica or Univers, the web is full of quality fonts that are perfectly suitable for professional design work. The impressive list of free fonts in this article have been classified to make the page easier to scan.
30 high-quality free fonts for great designs

22 Most Used Free Fonts By Professional Designers

The basic purpose behind this post is to show you popular and professional free font types to save your time searching online. This list is a combined effort of professional web designers and art directors to help speed up your project development time so you can save money and focus on making great applications and art.
22 Most Used Free Fonts By Professional Designers

34 Essential Tutorials To Get Started With Digital Photography

Starting out with digital photography can be quite overwhelming if you have no idea where to start. Luckily, there’s plenty of free quality information available on the web… with the potential of making you a semi-professional photographer in a matter of weeks.

The author of this article has compiled the best photography tips and tutorials found on the web, starting with the basics, all the way to the inner workings of your camera.
34 Essential Tutorials To Get Started With Digital Photography

60 Most Wanted Photoshop Tutorials, Brushes, .PSDs and Resources

This was the most popular Photoshop post of 2009. You’ll find an assortment of top-notch tutorials, brushes, patterns, textures, actions and .PSD downloadable files that others have freely contributed to the design community for making your next photoshop effect. Great post!
60 Most Wanted Photoshop Tutorials, Brushes, .PSDs and Resources

35 Basic Tutorials to Get You Started with Photoshop

Adobe Photoshop is a very powerful and versatile image editing/graphics creation application that is the industry standard in its category. Though Photoshop’s interface is intuitive enough for an absolute beginner to learn basic image editing tasks such as cropping and resizing, to be able to fully master and utilize all of its tools takes a considerable amount of time.

If you’re interested in honing your Photoshop skills to create spectacular compositions, this is for you.
35 Basic Tutorials to Get You Started with Photoshop

12 Common Photoshop Mistakes, Misuses and Abuses

This article is a list of 12 common mistakes, misuses and various ways new users abuse Photoshop. As the author freely admits, he has fell victim to a few of these himself when first starting out, so hopes this article helps educate designers and other individuals that are new to Photoshop.
12 Common Photoshop Mistakes, Misuses and Abuses

The Perfect 3 Column Liquid Layout

The CSS used for this layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used in conjunction with a width. Instead, this design uses percentage widths and clever relative positioning.
Perfect!
The Perfect 3 Column Liquid Layout

10 Rare HTML Tags You Really Should Know

Web developers these days are often expected to know and work in multiple languages. As a result, it's tricky to learn everything a language has to offer and easy to find yourself not utilizing the full potential of some more specialized but very useful tags.

Unfortunately we haven't been tapping into the full potential of these more obscure HTML tags as of late. But it's never too late to get back into the game and start writing code that taps into the power of some under-used tags.
10 Rare HTML Tags You Really Should Know

15 Essential Checks Before Launching Your Website

Your website is designed, the CMS works, content has been added and the client is happy. It’s time to take the website live. Or is it? When launching a website, you can often forget a number of things in your eagerness to make it live, so it’s useful to have a checklist to look through as you make your final touches and before you announce your website to the world.

This article reviews some important and necessary checks that web-sites should be checked against before the official launch — little details are often forgotten or ignored, but – if done in time – may sum up to an overall greater user experience and avoid unnecessary costs after the official site release.
15 Essential Checks Before Launching Your Website

12 Useful Web Tools for Designers

When it comes to design, there’s a plethora of free web-based tools to help you accomplish tasks such as color palette selection, creating unique fonts, editing images, and testing typography. In this article, you’ll find a bunch of handy online utilities for designers.
12 Useful Web Tools for Designers

50 Beautiful And User-Friendly Navigation Menus

In this article there are over 50 excellent navigation menus — there are CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. However, they all have something in common: they are user-friendly yet creative and perfectly fit to the style of their respective websites.
50 Beautiful And User-Friendly Navigation Menus

14 Most Useful design cheat sheets and coding cheat sheets

Designers and developers simply can not get enough cheat sheets, and bloggers simply can not stop writing about them. This post was the most popular cheat sheet article of 2009. It features cheat sheets to help you with CSS , almost all the Javascript libraries, HTML, Flash and Photoshop.
14 Most Useful design cheat sheets and coding cheat sheets

70 New, Useful AJAX And JavaScript Techniques

Interactive solutions for lightboxes, form validation, navigation, upload, auto-complete, image cropping, slideshows, tool tips, sliders and tables are being developed that use nifty JavaScript and AJAX scripts.

When using these, developers have to carefully consider many subtle techniques to help users get things done. In this article, there are 70 new and useful JavaScript and AJAX techniques, all of which are of the highest quality and are more or less easy to configure. You will also find some very useful but better known techniques to use on almost any project you work on.
70 New, Useful AJAX And JavaScript Techniques

50 of the Best Ever Web Development, Design and Application Icon Sets

If you are looking for that perfect icon for your web site, blog, web app or application, you will find them in this post. It is a compilation of the best web dev icon sets ever, with mini pixel icons, glossy icons and even some useful blogging icons.
50 of the Best Ever Web Development, Design and Application Icon Sets

By Paul Andrew (Speckyboy and speckyboy@twitter).

Go to Source

Some time ago we began a series of posts on logo design. Our goal? To cover as many logos as we can until the end of the year… we started with logos starting with A, today is all about O’s. We’ve been seeing some great logos, and we wish to have you guys along with us on this design journey.

<!–break–>

We’ll always be searching for logos in these galleries: Logopond, Logo Faves, Logo Moose, Logo from Dreams, Logo Gala, WS Logos, The Logo Mix and Wolda. If you know any more galleries or logos, or even if you own one and wanna be listed here as a source for our series, please drop us a link! We’d love to hear from you. We hope you all enjoy our selection of O logos! Cheers.

Go to Source

A Logo is a graphical element that, together with its logotype (a uniquely set and arranged typeface) form a trademark or commercial brand. Typically, a logo’s design is for immediate recognition. The logo is one aspect of a company’s commercial brand, or economic or academic entity, and its shapes, colors, fonts, and images usually are different from others in a similar market. Logos are also used to identify organizations and other non-commercial entities.

These types of corporate identities are often developed by large firms who specialize in this type of work. However, if you want to save some bucks and want to design your logo then there are many sources to get logo design inspiration. Infect, we might able to help you by presenting this showcase of Highly beautiful, original and creative logo designs for your design inspiration.

All of these logos are very creative and following different trends like PhotoFill, Concealed, VariDots, Candy Stripe, Flip Flop, Sequential, but most importantly Texting which is a common element among all of them. Also, try to catch how they created using specific colors combination, typography adjustments and font selection.

You may be interested in the following design inspiration related articles as well.

• Logo Designs For Design Inspiration – Part I, Part II
• 20 Sources To Get Logo Design Inspiration
• Single Page Website Designs For Design Inspiration – Part I, Part II
• 100+ Best Web Galleries Around for Your Inspiration
• Super-Clean and Minimal Web Designs
• Showcase Of Professional Looking Website Designs

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to design inspiration that our readers may like.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Go to Source

The purpose of a logo is to represent the company that it stands for. In many respects, the logo becomes the ‘face’ of that company, and thus it must tell you all about that company, and give off the right impression, without actually explaining anything at all.

The best logos are simple, memorable, smart, and timeless. I especially like logos with hidden images or messages. They always add another element of interest once you have discovered them and provide a talking point among prospective customers.

Below are my 6 tips on how to create the perfect logo:

Step 1: Talk to the client

You need to find out about the company that you are designing for. Their motives, their aspirations, their operations, goals, competition, target audience, and overall, what type of image they would like to portray.

On top of this you need to know about their existing brand, their brand colours (if they have any), their strap-line and if they have any specific fonts that they use. Once you have collected all of this information you can start drawing!

Step 2: Sketching your ideas

The vast majority of the best logo designers out there start off with a trusty pencil and paper. In my opinion nothing can beat drawing out your ideas first. It’s much less restricting that beginning work on your computer and it’s much quicker too! It allows you to get all of your thoughts down, whether good or bad, and no matter where you are, if you suddenly get a flash of inspiration there’s no stopping you. Sometimes I’ll even draw a couple of scribbles while I’m with the client if ideas pop into my head!

Here are some of the sketches from one of the latest logos that I’ve worked on. It’s for a company called Muddy Faces and I’ll be using this as an example for the rest of this article so that you’ve got something to relate to…

Based on all of the information that I had gathered from the client, I managed to come up with several pages of very rough sketches in only an hour or two. Don’t be afraid to make mistakes, or draw something that might not be very good – at least half of my sketches were terrible! You can’t fail at this, and if you really are that self conscious, just hide your sketchbook so no one will ever see!

Step 3: Digitise!

Now it’s time to get on your computer, boot up your scanner, and launch Illustrator. It’s really important that you create your logo in vector format, don’t use Photoshop (although I must admit sometimes I quickly mock up ideas in Photoshop, just because I can work faster – but then I quickly move on…) because once your logo is complete, it won’t be scalable. If your client turns around and says they want it printing on a billboard, you’re going to have an awful lot more work on your hands to blow it up to the right size.

So, scan your best images in, place them on your bottom Illustrator layer, lock it, and start using the pen tool to trace around the edges until you’ve got all of your outlines down. Once you’ve done this, you are free to start manipulating the strokes and fine-tuning your chosen designs.

Once you’ve got this sorted you can begin looking at fonts (providing your design needs them, of course). If you decide to create your own, then great! If the client has a specific font that they’ve asked you to use, then great! But otherwise, start searching…

Step 4: Grayscale

Something that can’t be ignored when creating a logo is the fact that it must be legible in grayscale (black and white). People still photocopy, and they still fax too, so you can’t avoid it.

The first thing I do when I’ve got my outlines and font sorted is create a monotone version of the logo. Once this is done I find that it’s a good opportunity to get some feedback off people, whether it’s peers, or the client themselves. It can give someone a good impression of the design before you’ve spent too much time on it. This way, if there are any major problems you can get them fixed before you start colouring it.

One thing to look out for at this point is the scalability of your logo. Shrink it down to various sizes and make sure that you can still make it out when it’s really small. Your choice of font is key here, because if you can’t read it, then you may need to have a re-think…

Step 5: Colour

Now, this is where some of you can stop. The client may have asked for a black and white logo, or the company may just suit a black and white logo. If this is the case then nice one! You’re done! If not, then once again, take into consideration all of the information that you gathered at the start and get creative!

Pick bold colours that represent the company, and that contrast well with the background. There’s nothing worse than a logo that gets lost in it’s surroundings…

Another little thing that I tend to do is come up with two slightly different colour schemes. One for when the design is being displayed on a light background, and one for when it is on a dark background. Some designs will work on both straight away, but I’d advise you to check because you never know where it might be displayed further down the line.

Step 6: Ask around

Now that your logo is finished, make sure you get some feedback. It doesn’t matter who, it could be friends, family, or work colleagues, anyone! When they’re looking at it ask them to tell you what it makes them think of, what emotions it portrays, and what they think that the company it represents does – Basically ask them things related to all the information that you gathered from the client at the start. You might get a couple of odd ones, but if it’s good feedback overall then your job is done. Send it to the client to get final approval, and send off that invoice.

…Here are a few logos that I think are brilliant. They’re bold, relevant, clever, simple, and memorable.

These are just some of a massive collection of inspirational designs that have bookmarked. I can always count on them to give me some ideas if I’m struggling.

Go to Source

Kyle W. wrote:
My favorite designed site is the Wildfire site. http://www.wildfireapp.com/

Merry Christmas, I hope you enjoy your prizes, Spinning Hat will be in touch with you to coordinate your prizes.

Don’t worry if today wasn’t your day, read below to find out how to win today’s prizes.

Day 3 Prize Pair to be won!!

Today we lighten and go retro for your entertaining and decor needs;

How to Win

To enter, comment with a link to your favourite logo of 2009. It can be in any style, it can be a re-branded logo, corporate logo, or just a cool web logo.

Subscribe to our RSS feed or follow us on twitter (@chadmueller, @dertmobile ) to stay up to date with each day’s prizes and winners.

Go to Source

One Page Sites

This project was an interesting case to see what we as a designer could do with just a single page. The fact that our client wanted to differentiate himself from his competitors played an important role in the decision to opt for a one page site. As far as we could tell from our research none of his competitors resort to a one page site. A one page site allows visitors to see the content easily. This allowed us to create something more unique.

Harmony between typography and color

The typeface I chose for this project is Avenir, available at MyFonts. Personally I have a soft spot for a combination of using a large and sometimes bold or heavy Sans Serif font for highlights and titles in combination with a Serif font for body copy. In this example the Avenir light works very well together with Avenir Black, it creates this nice typographical contrast.

Colorful footer

I’ve used elements from the logo to create a composition that would serve as an eye catcher. One of the shapes I used for this is the inside of the SLV logo. The rays symbolizes the light beams created by the typical equipment you see in this sector. I’ve played around with layer modes and transparency in Illustrator to get a rich contrast effect.

Go to Source

Original Article: AOL is re-launching as a whole new entity. Last week, the company unveiled its new logo for its new brand identity post-Time Warner. According to the Wall Street Journal, AOL is reinventing more than just its logo, however,

AOL will be focusing on producing content, and has even gone so far as developing algorithms to determine what kind of content to produce. Does this process sound familiar? It reminds me of the horizontal content sites discussion our own Mike McDonald recently had with RateItAll President Lawrence Coburn:

In summary, the concept discussed above is that more companies are looking to cover a wider variety of topics, to cash in, as opposed to dominating one vertical. That appears to be what AOL has in mind. WSJ reports:

AOL says its technology also streamlines the process of assigning, editing and publishing stories, and can record data about every story, such as a synopsis, key words and a location, so the stories can be refreshed quickly.

The system is designed to track breaking news and trends and identify the best times to write about seasonal events, such as Halloween or Monday Night Football.

According to the Journal, AOL’s editorial staff of about 500 will be responsible for assigning articles to a network of free-lance writers via Seed.com. Right now they have about 3,000 free-lancers in the bank, but will likely increase that number dramatically. Anyone can submit a story to Seed.com. 

AOL’s technology will supposedly filter stories for plagiarism, profanity, grammar and punctuation. Editors will then have the responsibility of checking facts, editing, and publishing the articles. Writers will be paid based on what AOL’s technology deems their work is worth based on what advertisers would pay for spots that would run with it. It’s all in the algorithm.

This process should provide for an interesting future at AOL, for better or worse. It certainly highlights the fact that they’re not just an Internet Service Provider.

What is your take on AOL’s media publication plans? Smart idea? Share your thoughts.

Related Articles:

> New AOL (or is it Aol.?) Logo Revealed

> AOL and Time Warner Officially Splitting Up

> Former YouTube Monetization Guy Moves To AOL

Go to Source

Some time ago we began a series of posts on logo design. Our goal? To cover as many logos as we can until the end of the year… we started with logos starting with A, today is all about N’s. We’ve been seeing some great logos, and we wish to have you guys along with us on this design journey.

<!–break–>

We’ll always be searching for logos in these galleries: Logopond, Logo Faves, Logo Moose, Logo from Dreams, Logo Gala, WS Logos, The Logo Mix and Wolda. If you know any more galleries or logos, or even if you own one and wanna be listed here as a source for our series, please drop us a link! We’d love to hear from you. We hope you all enjoy our selection of N logos! Cheers.

Go to Source

Related Blogs

• Related Blogs on Logo Design A to Z – N

Go to Source

If you grew up watching cartoons like I did, then it’s impossible not to have known Popeye the Sailor, the Olive-loving, spinach-eating hero who used his unusually large arms and magical spinach powers to thwart the evil schemes of Brutus and other cartoon adversaries. But even before Popeye was a beloved cartoon, he was a storied comic book character created by cartoonist E. C. Segar.

E. C. Segar, born on December 8th, 1894, created his iconic balding hero in January of 1929, when he appeared in Segar’s Thimble Theatre comic strip. The rest is entertainment and cultural history.

Now, 105 years after his birth, Google is paying homage to the legendary cartoonist with a Popeye Google Logo. This is something Google does on occasion to remember people and events that have touched our culture. H.G. Wells, the Bar Code, Confucius, and even Sesame Street have received the honor.

The design for this logo is absolutely fitting: it pays tribute to Popeye’s old comic book roots while capturing his core essence (aka his beloved spinach). This logo is one of the more nostalgic ones that Google has released. Luckily, E.C. Segar’s character still lives on in reruns and in the Popeye comic strip now drawn by Hy Eisman.

Tags: E.C. Segar, Google, google logo, Popeye

Go to Source

Welcome to From A to Z, where I outline all the steps taken in a specific project. In this particular instance, I’ll outline the workflow from initial brainstorming through to delivery for a complete “identity build” for a chocolatier/artisan chocolate business.

Warning: you will want to eat chocolate after reading this post.

Paper Leaf was approached by one Jacqueline Jacek regarding her desire to launch her own artisan chocolate business here in Edmonton. We were commissioned for three main projects: logo design, package design, and website design. We were excited, for a few reasons.

It’s always a pleasure to be able to build an identity for a business from scratch as opposed to doing piece work here and there – building an identity from scratch ensures that there will be design continuity across the board, which is of a huge benefit to the business. Thus, to be able to start from the logo design and carry it through packaging to the website was ideal for both us and the client. As well, Jacqui is a very focused and driven person – the kind of person who hits her deadlines and gives you the website copy once, and it’s good to go. Great person to work with.

So let’s start from the top and look at the logo design process, after the jump.

LOGO DESIGN

Jacqui had come up with a name – JACEK Chocolate Couture – and an idea of who she wanted to market her product to. Namely, connoisseurs of fine chocolate – young, modern professionals who want the high end, hand-made stuff, not the people like me who thrown down on Mini Eggs like they said something about my mother (that being said, I absolutely love Jacqui’s chocolates – specifically the Lady Grey Caramel from the first collection).

Knowing her target market and the sort of look and feel she wanted her business to present, we set out to design her logo. Right off the bat we wanted to go for an emblem-style look that mixed traditional/elegant design with a slight modern touch. It’s always a challenge to mix design styles and pull it off, but we figured that if we chose a clean, sans-serif typeface that had longevity, we would be able to marry that to a more traditional emblem design.

After a while researching and an even longer while designing, here is the first draft of logos we sent to her:

After a little bit of deliberation, Jacqui got back to us with her pick – number 1. Gotta love when the client picks your favorite too. The only adjustments that needed to be made were to change the “chocolate couture” font to Gotham Medium to increase legibility at smaller sizes, and I wanted to shrink down the J a bit to increase the white space around it. When all was said and done, here’s the JACEK Chocolate Couture Logo in its final state:

Jacqui was super happy, and we were too. I felt it was a successful marriage of a) traditional design, b) modern design and c) targeted design. Next up we had to look at the packaging and website design for her brand.

PACKAGING DESIGN

While we were mainly sticking with the tried-and-true brown/creme color combo – seriously, it’s neigh-impossible to get away from if chocolate’s your game – Jacqui wanted to bring in a touch of color to her brand. Specifically, teal. She had bought her boxes from her supplier, and we decided to let the teal of the box more-or-less dictate the teal of the JACEK brand. Makes sense to me!

As should always happen when developing a business identity, we went back to the core principles of who we were marketing to to help steer the package design. The emblem-style logo was as close as we wanted to get to traditional/classic design, so we let a few principles of modern design make the decisions for us – namely, clean and legible design, confident with ample white space. Paper Leaf was tasked with designing a sort of sleeve that went around the box, with the logo located top center, and some vitals located on the back side (URL, “Enjoy Before” date, etc). The inside of the sleeve would house the information about each specific chocolate in the package, as well as a photo of each piece.

There wasn’t a ton of room to include all the required photos/information on the inside of the sleeve – it was a bit of a challenge. But hey, design wouldn’t be fun without a challenge, right? Here’s what we came up with – one shot, no revisions, which is thanks largely in part to Jacqui’s organization and communication skills.

And here’s a shot of the printed, finished sleeve on some of her chocolate boxes:

Overall, I think the packaging looks well-put-together, focused and appealing to JACEK Chocolate Couture’s target market.

Now that we’d completed the logo as well as the packaging for the product, we moved on to the final and biggest part of the identity project: the website.

WEBSITE DESIGN

Just like with the logo and the package design, we went back to the main principles of the brand to help focus our website design process: elegant, but not stuffy; a light modern touch; ample white space; clean and simple and appealing to the target market. I can’t stress this enough – going back to the principles of the brand will always send you down the right road.

Originally we weren’t sure how we wanted to use the teal in the website – should we make it super subtle, as in just for hyperlinks? Should we make it perhaps second on the totem pole, right there with creme (but after brown)?

We tried out a couple of designs that didn’t make the cut – here they are below (ghetto chocolate images in the design are just placeholders, not Jacqui’s chocolates):

We found some inspiration in a classy menu for the above design. We played with some textures and kept the site super clean. We liked how it looked, but decided it was a little too minimal, a little too classic and the lack of live text on the home page was sort of a deal breaker.

This guy was a little more modern, but we ended up throwing this one out too. To me, it’s just not that visually appealing. Functional, sure, but it didn’t really hold up to the standards we’d set for the logo and packaging. But the main reason we didn’t go with either of these designs is that we had a clear winner, in all of our minds, below:

This design is modern, has some depth, has good use of white space, uses teal well (a slightly darker shade) and is effective overall.  This guy was the clear cut winner – see it live by clicking the photo above, or just go to www.jacekchocolate.com. When everything is put together – the logo, the packaging, and the website – you can see the identity is consistent across the board. The reason for the consistency is due to the fact that we had clear communication right off the bat, and we always went back to the core principles we set out at the beginning, letting those pave the so called design road for us.

JACEK Chocolate Couture was launched on Dec 1, 2009, and they’re already 50% sold out for their Christmas run at the time of this authoring. They do ship, so if you have any interest in chocolate, I highly suggest heading over to their website and ordering one of their collections. The cool thing is, this is the only time you’ll be able to try these specific JACEK Chocolate Couture concoctions – once the collection is sold out, it’s gone. So check it out, and thanks for reading!

Go to Source

Some time ago we began a series of posts on logo design. Our goal? To cover as many logos as we can until the end of the year… we started with logos starting with A, today is all about M’s. We’ve been seeing some great logos, and we wish to have you guys along with us on this design journey.

<!–break–>

We’ll always be searching for logos in these galleries: Logopond, Logo Faves, Logo Moose, Logo from Dreams, Logo Gala, WS Logos, The Logo Mix and Wolda. If you know any more galleries or logos, or even if you own one and wanna be listed here as a source for our series, please drop us a link! We’d love to hear from you. We hope you all enjoy our selection of M logos! Cheers.

Go to Source

Hey guys. I know, I’m a day late with this week’s Echoes post. Sorry about that. I was buy with a million and one other things this weekend, which caused everything to get a bit delayed, but here I am again, with more awesome finds from across the internet!

I also had my first article published over on MyInkBlog this week, which was pretty awesome. It’s called Getting to Know Clipping Masks and Layer Masks in Photoshop, and goes into detail about Layer Masks and Clipping Masks, their primary differences and when to use them. If you haven’t seen it yet, be sure to check it out!

I was also really happy with the general response to my 8 Reasons Why You Probably Shouldn’t Start a Design Blog post, which saw a lot of comments. Thanks to everyone who responded. It was really great to see!

Anyhow, on to this week’s Echoes!

Logo – The Design Cubicle

The Design Cubicle is a fairly well known design blog by Brian Hoff, and this is one of the previous logos for the site. This logo is no longer the active, but can still be seen in Brian’s design portfolio.

Design Cubicle Logo

I’m not entirely sure why Brian changed his logo. The current one is very nice, but I personally like this one better! It’s a very clever little design, with the two incomplete squares being obviously and intentionally reminiscent of cubicles themselves (from a bird’s eye view), while also forming the letters D and C.

I also really love the minimal simplicity of this one, which is something that you can see all through Brian’s logo designs. Like this design, they are all carefully crafted so that, even when the colour is stripped from them, they are still just as effective. And in my book, that’s one of the tests for a good logo design.

If you like this logo, you may also want to check out Brian’s creative process.

Art – Mercy

This week’s artwork comes from an incredibly talented artist – Isaiah Stevens. Isaiah has a ton of different drawings on his deviantArt gallery, so many that it was actually quite difficult to decide which image to feature. I eventually ended up choosing this one:

Mercy by Isaiah Stevens

The artist’s comments on this piece indicate that it was done with graphite and mechanical pencil on an 11 x 14 bristol board. The detail and the technical ability here are absolutely astounding. I can’t even conceive of being able to draw this realistically, especially with just a pencil.

One thing that strikes me as really cool about this piece, though, is that the realism is mostly limited to the actual flesh of the woman. If you look closely at the dress she is wearing, and even parts of her hair, you can see that it still has a very sketchy appearance. This gives the entire piece a sort of polished but unfinished feel that I totally dig.

It’s just a generally awesome piece of work. If you like it, be sure to check out the rest of Isaiah’s gallery, which is full of other awesome drawings.

Tutorial – How To Create Great Typographic Wallpaper In Photoshop

This week’s tutorial teaches you how to create a really cool looking typographic effect for desktop wallpaper. Basically, it shows you how to create one word out of multiple other words… If that doesn’t make any sense, just check out the preview below and you’ll understand what I mean.

How To Create Great Typographic Wallpaper In Photoshop

Final Effect Preview

The tutorial is pretty simple, though it may move a bit quickly for some readers. There is really not a ton of in depth explanation of the steps, so a certain familiarity with Photoshop is definitely assumed. Still, it’s a great effect and I downloaded one of the finished wallpapers and set it as my own desktop background!

What I think I like the most about this tutorial is the way it get you thinking about typography as more than just a means of presenting content. It can actually be a design element all on its own, and look pretty darned cool. Obviously, there is nothing all that original here. Using typography as a design element is nothing new, but it never hurts to be reminded of what’s possible. It can help redirect your thinking.

Like I mentioned already, this is a pretty simple tutorial, so why not give it a try yourself and make your own awesome typographic wallpaper?

Website – Squarespace Blog

Speaking of awesome typography designs, let’s take a look at the Squarespace Blog, which contains a typographical design element that leaves absolutely no doubt as to what kind of site you are on. I normally use a square and slanted preview for theses posts, but for this particular site, I feel that just a normal old screenshot is probably more appropriate!

Squarespace Blog

Any idea white kind of site this is? I have the sneaking suspicion that it might be a blog… Okay, excuse the sarcasm. It’s true that the design here certainly makes it impossible to mistake this site for anything other than a blog! I absolutely love how bold they make the word, without letting it become obnoxiously in your face.

I also enjoy the prominently monochromatic and minimalistic feel of this one, which contrasts very nicely against the bold typographic element in the header. It also lends a strong sense of sophistication to the entire design, as black and white is often known to do. I think the same can be said of the nice ruler effect that runs down both sides of the content area.

And speaking of the content area, I love the narrow, left aligned feel of this element. It takes up less than half of the space on my screen, yet nothing feels crammed or crowded. And, it makes for a nice break from the vastly more frequent trend of centered blogs (not that there’s anything wrong with these, of course! Just look at my own design).

Well that’s it for this week’s Echoes. Hopefully next week’s will be on schedule. As for this week, which ones were your favoirtes? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code – 0rx655ws

Go to Source

Music in its simple form explores some of the most beautiful sounds in the world and can evoke emotions beyond anything. So I have put my love of music and design together to come up with an amazing list of over 75 Music Themed Logo Designs that will hopefully inspire and keep you motivated.

Music is big business and designing a logo to make its mark, in the music industry, does present many challenges in itself. But through creativity and a strong bond to what you love, you will be able to come up with an amazing logo design for the music industry, just like some of the samples I have provided here.

I have compelled a list of 75+ Music Logo Designs to highlight some of the better music themed logos that have been developed and designed to hit its target market. I hope you enjoy them!

I don’t doubt that I have missed a few really good music logos, so please don’t hesitate to make a comment below and let us all know where to go to find them!

Related posts:

1. Elements to consider when creating a great logo
2. Why a Logo Should Cost More than a Cheeseburger & 7 Reasons Why!
3. How to use Photoshop to create compelling designs

Go to Source

Guillermo Esteves presented a piece of history translated for tomorrows browsers:  the Star Wars Episode IV opening crawl in HTML and CSS:

Unfortunately, the live experiment is not suitable for all browsers and the ideal target seems to be only OSX 10.6 and its latest Safari browser but it partially worked via Google Chrome as well.

Something To Learn About

We are moving complex computations into our favorite “decoration layer”: CSS
We also want as much control as possible, and the above concept is brilliant to understand how to tame CSS transitions.
This example includes new and different techniques. Here is what I found interesting:

@font-face

OK, this is not new at all, but in this case I could not find a single valid reason to avoid the original font: a must! The only point here is that the author could have saved a bit of bandwidth via pre-deflated or gzipped fonts rather than serving them without any apparent optimization.

It’s a shame there is not the real STAR WARS font as well but just an image … anyway, let’s move into more concrete stuff …

Perspective

The stage is the block element where the magic happens. The perspective property is able to give us a “deep space” 3D feeling making closer objects look larger than further ones. Via origin modification we can decide where things should disappear, in this case a bit higher point than a central 400px, to create a similar atmosphere respecting the movie choice (and I guess to make content readable as well).

Iteration-count and Custom transitions

Far far away is the initial text. As we can see with other browsers as well this appears and disappear in 6 seconds.
This fade-in-out happens just once, so at the end of the effect, unless we won’t modify the node class, the element won’t be displayed anymore. This is what the animation-iteration-count property does while next snippet is the fade-in-out customization:

Via keyframes <transition_name> we can blend FX linearity deciding the amount of opacity, or other properties, at certain moments.
A generic normal linear fade-in-out would be visible 100% only in the middle of the transition while in this case it is forced to be visible for 68% of the time, making fade in and out still homogeneous but controlling the full opacity for longer.
We could have used an ease-in-out effect over opacity property to obtain a similar result but I find definitively more interesting this kind of approach.

Warp Speed: Action!

Thanks to Z axis transitions the initial STAR WARS image can appear and disappear using again a customized FX:

Above mix of webkit properties suggests me that new JavaScript libraries will use run-time actions to CSS transformations soon, rather than hard and manual JS computations over computed styles or similar expensive operations.
We can control delays, we can stop FXs removing classes or simply overwriting existent directives and, moreover, we can split the CSS itself into logical parts as the same @gesteves did, putting custom animations all together: good hint!

The Crawl

Last piece to check out is the text plus its title.

The Mythical Song

Well, this demo could not miss a proper audio element:

Apparently the used compression is truly good and the sound loud and clear. But who is in charge to start above song?

JavaScript

Quite hilarious all this demo does not basically need JavaScript at all except for an audio delay forced via interval:

If we have a good broadband connection and we are sure in 12 seconds we have buffered enough audio, the synchronization between JavaScript and the transition delay is almost perfect and the demo experience unique.

It is great to see this work, and I look forward to seeing what he comes up with next. It feels that with HTML5, CSS3, and the Web.Next we will be able to be much more creative. Finally, it’s December, I can already imagine a CSS3 based snow effect for our pages … no?

Go to Source

AOL will be focusing on producing content, and has even gone so far as developing algorithms to determine what kind of content to produce. Does this process sound familiar? It reminds me of the horizontal content sites discussion our own Mike McDonald recently had with RateItAll President Lawrence Coburn:

In summary, the concept discussed above is that more companies are looking to cover a wider variety of topics, to cash in, as opposed to dominating one vertical. That appears to be what AOL has in mind. WSJ reports:

AOL says its technology also streamlines the process of assigning, editing and publishing stories, and can record data about every story, such as a synopsis, key words and a location, so the stories can be refreshed quickly.

The system is designed to track breaking news and trends and identify the best times to write about seasonal events, such as Halloween or Monday Night Football.

According to the Journal, AOL’s editorial staff of about 500 will be responsible for assigning articles to a network of free-lance writers via Seed.com. Right now they have about 3,000 free-lancers in the bank, but will likely increase that number dramatically. Anyone can submit a story to Seed.com. 

AOL’s technology will supposedly filter stories for plagiarism, profanity, grammar and punctuation. Editors will then have the responsibility of checking facts, editing, and publishing the articles. Writers will be paid based on what AOL’s technology deems their work is worth based on what advertisers would pay for spots that would run with it. It’s all in the algorithm.

This process should provide for an interesting future at AOL, for better or worse. It certainly highlights the fact that they’re not just an Internet Service Provider.

What is your take on AOL’s media publication plans? Smart idea? Share your thoughts.

Related Articles:

> New AOL (or is it Aol.?) Logo Revealed

> AOL and Time Warner Officially Splitting Up

> Former YouTube Monetization Guy Moves To AOL

Go to Source

1 // Produce a focused mini-website

Create a “mini site” for a special product or service your business is offering. This mini site should be focused – and where possible “fun”. Maybe use a flash animation or game to gather some interest and communicate in simple terms what the product is about. The benefits of a dedicated website for a specific product is that visitors get a target message. Be sure to link back to your main corporate website for users who wish to see more of your products. For examples of some mini-sites we have done see:  iWeekend  » Bonded Broadband »

2 // Produce an effective brochure

For many years businesses have been producing take away brochures for potential clients. Such a brochure should say all the right things about your business. It should look professional and be printed on good paper stock. It should be something your sales team is proud to leave behind and allow clients to flick through. It should be a “gift” to potential clients. You could also have it produced as a PDF for the web and allow visitors to your website to download it.

3 // Send out email newsletters

Add functionality to your website to allow users to add their email address to your mailing list. If this is set up to add the email addresses to a database you could also set up a admin area to enable you to send out emails to all the users who have signed up automatically. To take it a stage further get the emails to be designed specifically for your business in your brand style – this will ensure brand recognition. Be sure to allow users to unsubscribe if they do not want to receive further emails.

4 // Join in with Social Media

If your business is not connecting with people on Twitter or Facebook then they are missing out on a trick. Connecting on these platforms is useful because they are visited on a daily basis by users who might not visit your site at the same routine – thus you are getting more opportunities in reminding your client base about your business. If you have a blog why not set it up so that when you post a new article it automatically posts it on Twitter and Facebook – this will save your team time as they then won’t have to update each platform.

5 // Fresh logo design

A business needs to be recognizable. reconization Building a brand image is everything and allowing your clients and potential clients to recognize your business is essential for repeat and business. Acquiring a reputation is essential. Does your logo do this? Is it being used consistently? Does it need a refresh? A logo should be the emblem, the banner, that everything else sits behind. If you have products they also might benefit from having a logo design which sits underneath your main brand identity. This will bring them specific – this is especially useful if your products span different industries and target audiences as you can tailor the look and feel for each respectively.

6 // Bespoke christmas cards

With that time nearly upon us again it may be an idea to think about your company christmas cards. Why not commission a design agency to produce a Christmas card that says all the right things in an effective way. A bespoke Christmas card that stands out may ensure that customers see your business in anew light. How about taking your christmas card and making it more effective by running a promotion with it – something like: “To say thanks for working with us this year we offer 10% off of your next order”

7 // Consistent stationery design

Ensuring all of your stationery is consistent is good for recognition. For large businesses this can act as an extension of campaigns that are running and for small businesses it can acts as a campaign in its own right. Do your business cards and letter heads look like the come from the same company?

8 // Advertise effectively

Many small businesses don’t advertise because they don’t make the budget to do so. When they try it they only do it half heartedly and are not focused or targeted and when it doesn’t work they are normally put off by the whole idea. Try thinking about industries which use your services or products and advertise in their industry news magazines – or find out what your customers are reading and place adverts in those magazines. Ensure the advert is well designed with a clear message and call to action so that you can measure how well a campaign is doing.

9 // Let your vehicle signage work for you

Ensure your vehicle signage is effective. Your lorries and delivery vans should at least have your logo on them. You could look at making them effective adverts by adding well designed images and messages to them. A clear simple message that can be taken in in 3 seconds is ideal. Be sure to have an easy to remember call to action – a simple phone number or web address so that people who see them can write it down or memorize it quickly.

10 // Provide an incentive for people to refer you

Set up a referral marketing campaign. Offer a percentage of the first sale to anybody who recommends your business to someone. This inspires them to work as your agents without you having to do any further work! Advertise this within your brochures or on your website. Maybe even produce a leaflet for your sales team to give away on visits to potential clients.

Related posts:

1. Spot UV – Add class to your business cards
2. Attitude Design Accreditations
3. Spring Fever at Attitude Design

Go to Source

Thanksgiving 2009 is upon us, and Google’s US visitors are being treated to a special logo to mark the occasion: visit Google.com today and you’ll be greeted by a logo inspired by the classic cartoon Peanuts.

The Google lettering has taken on orange, brown and yellow hues, while Snoopy, Woodstock and a Thanksgiving feast adorn the Google homepage today.

What do you think of Google’s Thanksgiving logo? Is it good, bad, or just average? Let us know in the comments.

Tags: Google, logo, thanksgiving

Go to Source

Some time ago we began a series of posts on logo design. Our goal? To cover as many logos as we can until the end of the year… we started with logos starting with A, today is all about L’s. We’ve been seeing some great logos, and we wish to have you guys along with us on this design journey.

<!–break–>

We’ll always be searching for logos in these galleries: Logopond, Logo Faves, Logo Moose, Logo from Dreams, Logo Gala, WS Logos, The Logo Mix and Wolda. If you know any more galleries or logos, or even if you own one and wanna be listed here as a source for our series, please drop us a link! We’d love to hear from you. We hope you all enjoy our selection of L logos! Cheers.

Go to Source

You’ll see in the examples below that there are many different takes on the coffee mug and coffee cup and the hot steam that rises up in aromatic plumes sometimes just for show and other times to form a word or specific shape. We’ve pulled together the best logos from large chains to small shops and everything in between.

26 Coffee Company Logos

Need custom design or WordPress theme development? Check me out at eGrace Creative.

Share and Enjoy:

Related posts

• Remarkable Logos from Top Logo Design Galleries (0)
• Logo Design Inspiration: 61 Awesome Fresh Designs (0)
• Cheap Logos: Not Worth the Cost (0)
• Animal Inspired Logo Designs (0)
• 30+ Beautiful Logos That Use Italic / Cursive Fonts (0)

Go to Source

I have started with Helvetica (a sans-serif font) here because it’s very easy to work with (especially in caps) as all the latters are pretty much the same width, it’s also very bold. There may be times when this wide letterspacing works for you but with a logo you should always try less spacing as a general rule.

Bringing letters closer together helps to turn the word into more of an image. Reducing the spacing has also made the word much stronger – which is great when you are working with brand identity design. The letterspacing reduction above is extreme but sometimes it might need to be. Overall, less letter spacing works best for most logo designs.

[Photoshop: Window / Character] – For changing the letter spacing.

Now we have swapped Helvetica for Bembo to display how a serif font reacts to the same reduced letter spacing. Immediately you are probably drawn to the centre between the O and the G, after this you notice how tiny the L looks when compared with the other letters. This is to do with the weight, width and shape of one letter in relation to the next. In this case we need to look closer at the spacing of each individual letter.

What you are aiming for is an equal space around the main body of each letter. This doesn’t mean that each letter has a 2mm gap to the right, as your serifs (the bits that stick out) effect how we can actually use our space. Notice that the gap between the G and the last O is wider than the other gaps, and yet the letter G is still touching the letter O. It’s about finding the happy medium. I have also increased the line spacing between the L and the first O, by giving the letter more space it has become stronger and balances much better with the rest of the logo.

This typeface is Bickamp Pro – one of the most commonly used fonts, alongside Helvetica and Bembo. Notice that the letters are joined up, this is going to cause us problems when we alter the letter spacing as the letters won’t join up correctly.

With a line space reduction of -50 you can see that all of the joins are out of alignment and although the effect does have quite a nice grungy feel about – it won’t work for one of your more classier clients. So the question is … “How do we change the letter spacing without ruining the typeface”?

My solution is to use a seperate layer for each letter in your logo, all letter spacing from this point on will be done by eye – which is fine. Now that the letters are seperated some of the joins are missing, and some have changed.

This is a rough attempt but you can see that we have eliminated the alignment issue. To take this appraoch further and get exactly the right effect you would need to rasterize the type and turn it into an image – which will be covered in my next tutorial… ‘Type as an Image’

Go to Source

Fire based logos are a great way to show action or heat in a logo. It can give your logo a lot of added attitude and flare. We are going to look at some logos that use fire and flames as a basis for their logos.

Inspiration: Flame Logos

Need custom design or WordPress theme development? Check me out at eGrace Creative.

Share and Enjoy:

Related posts

• Logo Design A to Z – B (0)
• A Showcase of Musically Inspired Logos (0)
• 45 Creative Logo Designs For Inspiration (0)
• What makes a good logo? (0)
• Vital Tips For Effective Logo Design (0)

Go to Source

Hey guys. Well I’ve certainly been busy the past little while. I am looking at putting the finishing touches on a client website this week, and starting to code two more from Photoshop into WordPress themes. I’m also working on a few guest posts for other blogs, and of course there’s the need for more stellar content here at the Echo Enduring Blog. Plus, somehow I have to fit all of the other commitments of the rest of my life in there somewhere too! Wow, it’s gonna be crazy!

Fortunately, there is a holiday looming on the horizon. I’m really looking forward to the Christmas break. You should too! I have some awesome content planned for that week. It should be good.

Oh, and if you visited this blog last week and found that it was moving really slowly, well I apologize for that. I deactivated a few plugins and it seems to be running much smoother now. I also did some maintenance of my WordPress database, which also seemed to help. Plus, strange things were going on over at The WebBlend (not sure what the deal was), so that seemed to be slowing things down too. So yeah. Sorry for the lag.

Anyhow, that’s enough preamble. Let’s get to what you’re actually reading this post for – this week’s Echoes!

Logo – Milou

I’m not really sure what it is that draws me to this week’s logo, but there is definitely something about it that I really like. What do you think?

Milou

I do really like the mark itself. It’s boxy and cool, and I guess I just have an affinity for anything to do with the letter M – I couldn’t imagine why (says the guy named Matt). It also reminds me, ever so slightly, of the Nintendo GameCube logo, which is one of my all time favorites.

The typeface is cool too. According to the designer’s comments on LogoPond, it’s custom, which I always appreciate. It’s always great to use custom type in a logo design, and be able to rest in the knowledge that – barring a rip off – no other logo will use the same font! Plus, the type face for this one is really cool! Very nicely done!

Art – Mushroom

This week’s artwork might have done well on Halloween. It’s a totally weird and creepy looking mushroom illustration by Anton Peck.

Mushroom

I’m not sure why, but I always seem to have had this weird fascination with mushrooms (and not the mind altering ones, which I assure you I have never tried). Maybe it has something to do with all of those Mario games that I played as a kid (and continue to play as what seems to pass fairly well as a “grown up”).

Anyhow, I love this illustration. It’s creepy and sinister and totally cool. This isn’t Mario’s happy little red and white polka dotted steroid (think about it – magic mushrooms are totally like steroids!). This mushroom is rough and mean, and looks like he’s getting ready to inflict some serious hurting on some poor chump. So cool.

Tutorial – How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

This weeks tutorial is a short and sweet jQuery/CSS3 combo from my good friend, Jon Phillips over at SpyreStudios. In this one, Jon shows you how to make a cool sliding panel with jQuery and CSS3.

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

This is a great little tutorial. It’s all pretty simple really, and Jon doesn’t try to fill it out with any unecessary material. He’s frank and to the point about what he’s trying to accomplish. He presents the different snippets of code and discusses them in brief. Obviously, with this kind of approach, he seems to be assuming a certain level of familiarity with HTML, CSS and jQuery, but even a beginner can probably just use the code and make it work!

Check out the demo: Vertical sliding panel and open/close trigger button on the left with absolute positioning

One other great thing – Jon provides all of the code and files in one handy little download. The ZIP file contains three folders, one for each of the three different demos he provides. This means that if you want to try out his code, you don’t have to copy and paste from the site. Just download the files, have a peek and start your building a sexy jQuery slider into your own sites!

Website – Design Critique

This one has been on the list to make its appearance on Echoes for a while. From the moment I first stumbled across Design Critique, I’ve been really enamored with the overall design.

Design Critique

I think what really stands out to me in this one are the little things. The overall design is solid, and the use of the leather-bound header works nicely. There are, however, a few tiny details that really drive this design from good to superb.

First, let’s talk about colour. The scheme of dark grey, parchment beige and bright teal strikes me as very unique. It captured my eye immediately and lends the entire design a real sense of energy.

Second, the way they highlight their feature post is really great. They offset it ever so slightly from the main content with a fold-around effect, which is compounded by the bright teal background. Very nice.

Third, the forms also rock. I really like the subtle grunge effect at the bottom of each input, and the variation on the newsletter signup form at the bottom of the sidebar. It’s cool to see the same effect applied in slightly different ways.

Finally, there is my favorite part of this design. This may sound ridiculous, but I absolutely love their RSS button, which is just peaking out from behind a significant tear in the parchment of the sidebar. The tear is very nicely rendered, and it’s another example of the colours working beautifully together. It’s just totally great and every time I visit the site I make sure I take a peek at it!

There are other great elements to this site too, so be sure to check it out and peruse them for yourself.

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code – 0rx655ws

Go to Source

Color is such an important part of design. Here are 26 examples of colorful and creative logos for your inspiration. Enjoy!

26 Colorful and Creative Logos

Need custom design or WordPress theme development? Check me out at eGrace Creative.

Share and Enjoy:

Related posts

• The Logos of Logo Designers (0)
• Remarkable Logos from Top Logo Design Galleries (0)
• Logo Design Inspiration: 61 Awesome Fresh Designs (0)
• Cheap Logos: Not Worth the Cost (0)
• Animal Inspired Logo Designs (0)

Go to Source

A Logo is a graphical element that, together with its logotype (a uniquely set and arranged typeface) form a trademark or commercial brand. Typically, a logo’s design is for immediate recognition. The logo is one aspect of a company’s commercial brand, or economic or academic entity, and its shapes, colors, fonts, and images usually are different from others in a similar market. Logos are also used to identify organizations and other non-commercial entities.

These types of corporate identities are often developed by large firms who specialize in this type of work. However, if you want to save some bucks and want to design your logo then there are many sources to get logo design inspiration. Infect, we might able to help you by presenting this showcase of Highly beautiful, original and exceptional logo designs for your design inspiration.

All of these logos are very creative and following different trends like PhotoFill, Concealed, VariDots, Candy Stripe, Flip Flop, Sequential, but most importantly Texting which is a common element among all of them. Also, try to catch how they created using specific colors combination, typography adjustments and font selection.

You may be interested in the following design inspiration related articles as well.

• Logo Designs For Design Inspiration – Part I, Part II
• 20 Sources To Get Logo Design Inspiration
• Single Page Website Designs For Design Inspiration – Part I, Part II
• 100+ Best Web Galleries Around for Your Inspiration
• Super-Clean and Minimal Web Designs
• Showcase Of Professional Looking Website Designs

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to design inspiration that our readers may like.

Go to Source

Logo Design Process

Logo Design Team offers a great user experience through their simple, intuitive and user-friendly design process. All you have to do is take a look at their portfolio, decide that you have made the correct choice for your branding, complete the online order form and wait. After 2-3 days you will receive five or six logo concepts to choose from. You don’t even have to bother with files to download. Logo Design Team allocates you a portion of their website where you can check the design process. After you check out the concepts, you’ll give the final instructions and that’s it. You’ll receive your files shortly.

Reseller Opportunities

The best part about Logo Design Team is their reseller program. Basically it’s a great opportunity to make money.

It works like this : You can sell logo design services to your customers or contacts in your own name. You don’t even have to mention Logo Design Team. The logos will be of course designed in the background by Logo Design Team. According to the volume of work you can generate you’ll obtain the best possible discounts for your logo designs. You quote your clients at your own rates and the difference from the Logo Design Team price is your own profit.

Logo Design Team provides online support as often as necessary and whenever necessary. Their resellers handle localized support needs. You can go one step deeper and secure your own resellers, too.

The reason this is such a good system is because of the great rates Logo Design Team offers. They are able to provide such good rates because they deal in volume.

Affiliate Program

Logo Design Team also offers an affiliate program you can subscribe to and make money by referring clients.

Thousands of themes and templates on ThemeForest

Want to advertise here ? Contact us

Related posts

You might also like these similar articles:

1. Print your Business Cards – VistaPrint
2. LogoMyWay – Logo Design Contests
3. Logo Parodies
4. Great bus design
5. TemplateWire Giveaway – Win 1 of 3 CSS, Flash or Logo Templates

Go to Source