But, how to get a logo when you’re not a designer yourself? Of course, you can hire a designer to get your logo. Or you can use a very cool service named LogoMyWay.

What is exactly LogoMyWay? It is a logo design competition service which allow you to get lots of logo proposals (70 – 400+) from dozens of designers worldwide. You pay once (prices starts at $200) and you choose the logo you want to use. That’s simple as that.

Among other features, LogoMyWay offers a garanteed minimum of 40 differents designs, or you’ll have your money back. 40 different logo designs are a lot to choose from, so it’s a sure thing that you’ll find the logo of your dreams.
Another thing I love with LogoMyWay is that creating a contest is quick and easy. As an online entrepreneur, I hate wasting my time and I’m happy that LogoMyWay understands it.

Let’s see some example of what you can expect with LogoMyWay. The first is a logo design competition organized for Boser Chinese, a Chinese Restaurant:

The second example is Frietkot, a restaurant specialized in Belgian Fries (yummy!):

Amazing, isn’t it? Having the choice between all those designs is definitely a great deal for businesses.

As PSDVIBE readers, it is obvious that most of you are designers. If you’re a young designer looking to get exposure and make money, LogoMyWay can be something to consider. Contests starts at $200, but some can go up to $1000, which is definitely a good deal. Joining LogoMyWay as a designer is 100% free and they pay within 48 hours.

Although established designers can be really happy with LogoMyWay, contests seems to be more interesting if you’re a young designer looking to build a portfolio and gain exposure.

The last thing to consider is the inspiration you can get by watching thousands of logos you’ll find on LogoMyWay. Whatever you’re a logo designer or just a designer who wants to learn, it is a sure thing that the best way to learn is to watch and study what others do.

And you, what do you think about LogoMyWay? Have you already used their services, as a business owner or a designer? Let me know in a comment.

WpRecipes

Grafpedia

Web Designer Depot

Web Designer Wall

Spoon Graphics

I Love Colors

N.Design Studio

DivVoted

Matt Mullenweg

Legendary Aircraft

In my opinion, that’s how all free stock images websites should be. As an example of this, let’s talk about a website I recently discover, named FreePixels.com.

Freepixels is very simple to use: Just go on their site and search for stock images. If you don’t need to find something specific, you can also browse the site to see what images can be used in your designs.
All freepixels.com images are categorized, which makes things a lot easier when you have to browse. I browsed a few categories while writing this post, and I must admit that I spent a long time on the site, browsing, watching images, thinking about how I can use them…

That’s a good point, but now we must talk about the licence. Licencing is a common problem to every creative person: “Can I use this icon? “Is that image CC licenced?” I have heard theses questions a lot of time. Even worse, on one of my first PsdVibe tutorials, I had to remove an icon I’ve used from the tutorial and all screenshots because the icon’s licence didn’t allowed me to do that.
On FreePixels, you don(t have to worry: All images from the site can be used both personally and profesionnally. That means, you can use them to illustrate blog posts, but you can also feature some of their image on a client’s website.

Of course, and particulary in the case of a website dedicated to stock images, an image is worth a thousand words. This is why I thought I can’t finnish this article without featuring some of my favorite stock photography from Freepixels. Just click on an image to download it.

Nice images, isn’t it? Visit FreePixels for more.

Source

Creating a CSS layout from scratch

Source

From PSD to CSS/HTML in Easy Steps – Part 1

Source

From PSD to HTML, Building a Set of Website Designs Step by Step

Source

How To Create a Horizontally Scrolling Site

Source

Converting a Design From PSD to HTML

Source

The Design Lab: PSD Conversion

Source

Web Design Layout #9 SiteBuild

Source

Convert a Photoshop Mockup to XHTML/CSS

Source

Coding a Clean Web 2.0 Style Web Design from Photoshop

Source

1 - Create a new document in Photoshop, with 1024px width and 1300px height. Fill the background with #669999.

2 - Create a new layer. Pick up the brush tool with 500px smooth, and make a point on the top on the layout. Change the layer opacity to 84% and change the blending mode to hard Light:

3 - Now, let’s create the following layer sets for our design:
-Content
-Slider
-Navigation
-Form

4 - Create a new layer named header in the Navigation layer set. With the rectangular marquee tool, draw a full-width rectangle of 40px height. Fill it with #333333.

5 - Pick up the text tool and select the Rockwell bold font, with a 10pt size. In the left corner of our design, write the site name (In our example, it is MisterDesign) and the site navigation menu on the right corner.

6 – Pick up the rounded rectangle tool and draw a rounded rectangle around the “Home” page of our navigation. Fill the background with #669999. This will indicate the active page. Don’t forget to replace the navigation menu text layer on top of this one. Right now, we already have a completed website header/navigation.

7 - Now, let’s populate the content layer set. The first thing to do is to create a slogan. I chose “Websites that rocks”, which is probably already used by dozens of sites. But, that’s just an example
Pick up the text tool with the Rockwell bold font and set text size to 36px. Write your slogan in #eeeeee color, and then duplicate the slogan layer (Cmd + J)

8 - Select the copy of the slogan layer, place it below the slogan layer. Set its color to #555555 and its opacity to 50%. Then, select the Move tool and move the layer 1px right and 1px bottom using the arrows keys.
It should look like this:

9 - Now let’s showcase our most recent design. To do so, I used a 511*309px screenshot downloaded on Flickr. Place the screenshot on the right part of the design.

10 - Once you added the screenshot to the design, pick up the Polygonal lasso tool and draw a triangle in the top right corner of the screenshot. Then, delete the selection:

11 - Draw a new triangle as shown in the screenshot below. Fill the background with white (#FFFFFF)

12 - On the left part, pick up the Text tool and draw a square. Then type some text in it. Once don, select the text, open the Paragraph Window (PS menu -> Window -> Paragraph) and justify the text.
At this point here how the design should look:

13 - We’re now done with the main content area. The next part is to design a slider to showcase some of the company best designs. Create a new layer in the slider layer set and pick up the rounded rectangle tool. Draw a 875*238px white (#ffffff) rounded rectangle. Once done, right click on the layer, choose Rasterize layer and finally rename the layer slider.

14 - Pick up the Ellipse tool and draw a circle on the middle left side of the rounded rectangle. Do the same on the middle right side of the rectangle, then rasterize the two layers.

15 - On the Layers window, click on the first circle layer and press Cmd+E to merge it down with the rounded rectangle layer. Do the same with the other circle layer. At this point, you should have a shape like this one:

16 - Right click on the slider layer, and select Blending options. Add a 5px #CCCCCC stroke around the shape. The position used is outside.

17 - Now, let’s add navigation arrows to the slider: Pick up the text tool with the Rockwell font, 10pt and #333333 color. Use the < and > symbols to create navigations arrows. The result should look like this:

18 - Let’s populate the slider with items. To do it, I simply used thumbs from previous Photoshop tutorials. The size of the thumbs is 224*179px. each thumb have a #CCCCCC 5px stroke around it. The position used is inside.
Once you added the thumbs, our slider is finished.

19 - The last part of our design is the footer. Create a new layer (named footer in this example) in the form layer set, pick up the Reactangular marquee tool and draw a 354px height rectangle. Fill it with #333333.

20 - We definitely should add a nice border on the top of our footer. To do so, I have used the rectangular marquee tool to draw a 7px height rectangle. The background color is black (#000000).

21 - Time to add a “Request Quote” form in the footer. The first thing to do is to create a title, so clients will know what this form’s purpose. I have chosen the Rockwell font, bold, 10pt, and wrote the text “Request a quote now, get it in 30 minutes” in white (#FFFFFF), capital letters.

22 - Using the Rockwell font, write the form fields. I have used a 18pt line height.

23 - Pick up the Rectangular marquee tool to draw the first text field. Width is 347px and height is 32px, filled with white (#FFFFFF) background. Once done, select the text field layer in the Layers window, and select blending options. Add a stroke around the text field using the following parameters:

24 - Once one of the fields has been created, simply duplicate its layer to create the other text fields. Once done, the result should look like the following:

25 - Select the last text field, press Cmd+T and resize it. We need to display a bigger field as the client will add his project guidelines and requirements in that field.

26 - Our form is almost complete, but a very important thing is still missing: A submit button. To create one, I have used the Rockwell font, bold, 10pt in white (#FFFFFF) color, and simply wrote “Send!”.

27 - To create the button background, pick up the Rounded rectangle tool and draw a rounded rectangle around the “Send!” text. Background color used is #669999.

28 - Our completed form should look like this:

29 - In order to fill out the empty space on the right side of the footer, what about some clients testimonials? Title is Rockwell font, bold, 10pt. Text is Georgia, italic, 10pt. Client name is Rockwell, bold, 8pt.

30 - All right, the tutorial is finished. Look at what we created together:

Get a commercial/public use licence for this PSD (More info)

Please remember that even if theses templates can be downloaded for free and used for learning purposes, you have to buy a licence to use it for a client or on your own website. Read more about PsdVibe’s licences on this page.

The first XHTML/CSS Template we got for you is the one created after reading this tutorial.

And the second one is the “Modern blog layout“:

Get a commercial/public use licence for theses templates (More info)

1 - Let’s start by creating a new document. The size is 1280*1200 pixels. Fill the background with black (#000000).

2 - Create a new layer named content. Pick up the Rectangular marquee tool and draw a 976px wide rectangle. Fill it with white (#FFFFFF).

3 - Still on the content layer, use the rectangular marquee tool to draw the sidebar. The width is 331px and background color is #E9E9E9.
At this point, your design should look like this:

4 - Create a new layer set named header. We’re now ready to create a nice header background. To do so, I have first downloaded this picture and imported it into Photoshop. Once the picture is imported, select Filter, Blur, Mottion blur and apply the effect with the following parameters:

5 - Once done, import the modified picture in the design. Crop it to 972*188px. Then, go to the Image menu and select Ajdjustments, Color balance. Add blue on highlight, shadows and midtones.
The header should look like this:

6 - Time to draw the navigation menu. Pick up the rectangular marquee tool and draw a 972*53 pixels rectangle in a new layer called navigation. Fill it with #080808.

7 - On the Layers window, right click on the navigation layer and choose Blending options. Once the Layer style window is open, add a Gradient overlay. Setting are 65% opacity, #000000 on left and #3F3E3E on right.

8 - Now, select the text tool and start adding navigation links on the nav bar. I chose Arial bold, 18pt. Color is white.

9 - For the active/hover state of the navigation links, select the rounded rectangle tool and draw a shape around one of the links. The rounded rectangle radius is 10px and the background color is #6589A7.

10 - It’s time for us to add a logo to our blog design. I have chose the Futura bold font with 72pt font size and black color (#FFFFFF). Simply type the text you want, and duplicate the layer once you’re done with typing.

11 - On the layers window, make sure the first text layer (Not the copy) is selected, right click and select Blending options. We’re going to add a nice, very “technology-like” gradient on the text. Select Gradient overlay and add the gradient. Left color is #EEEFF0 and right color is #4E4D4D.

12 - Once you’re done with the gradient, select the copy of the layer (which is plain white). Pick up the Move Tool and use the keyboard arrows to move the layer 1 pixel on the right and 1 pixel on the bottom.
After the 3 latest steps, your blog logo should looks like this:

13 - We’re done with the header, and it’s time to create our posts. The first thing to do is to create a new layer set named post. Then, get three or four 200*200px images to illustrate the posts. Such images can be found on my other blogs Cats Who Code and WpRecipes. Import one 200*200 pixels image into the design, and place it 18px from the edges of the white container.

14 - The font used for the titles is #222222 Arial, bold, 36pt. Type the text you want for a post title, and select it using the Text Tool. On the Photoshop menu, go to Window and select Paragraph. Set the AV to -75, according to the screenshot below:

15 - Pick up the text tool again and write the author name, the post category, the number of comments or anything else. Select white (#FFFFFF) 12pt Arial bold font.

16 - Select the rectangular marquee tool and draw a rectangle around the text you just entered. Fill the rectangle with #6589A7. Make sure the text layer is above the shape.

17 - For the post excerpt, I have choosen Arial font, 12pt, Italic. Color is #555555.

18 - Select the Line Tool and draw a #CCCCCC line below the post. The post should looks like the following:

19 - Copy the post layer set as many times as necessary to fill up the content space:

20 - Time to create a cool sidebar for our blog design. Let’s start by creating a new layer set named sidebar. The first thing to add to the sidebar is some 125*125px ads. Download some from your favorites blog and import it into the design. In the psd, I have choosen to display 4 ads, but of course it is just an example.

21 - In order to draw a sidebar widget title, create a new layer set named widget, pick up the rectangular marquee tool and draw a 342*40 pixels rectangle on the sidebar, starting from the left edge. Fill it with #6589A7.

22 - Use the Zoom Tool to zoom on the right side of the newly created rectangle. Pick up the Polygonal Lasso Tool to draw a shape like the one in the screenshot below. Fill the shape with #4F667A.

23 - Add some text in the widget title. The font used in the example is 12pt Arial bold. Color is white (#FFFFFF).

24 - Add some text below the title. Font used is #222222 12pt Arial bold. Once done, your sidebar widget should look like this:

25 - Duplicate the widget layer set as many time as needed to fill up the sidebar space.

26 - Our design should now looks like the screenshot below:

27 - Finally, the last step of this tutorial is to create a simple, but nice looking footer for our blog design. Start by creating a new layer set, named footer. Then, Create a new layer (Also named footer) and draw a 972*34 px rectangle using the Rectangular Marquee Tool. Fill it with #6589A7.

28 - Add your copyright message (or whatever) to the footer. The font I used was Arial bold, 12pt. The color is white (#FFFFFF). Once done, align the text to the right part of the footer.

29 - Repeat steps 10,11 and 12 in order to have a smaller version of your logo in the footer. You should also dusplicate the logo layers and scale it, of course.

30 - You’re done! Look at what you just created:

Get a commercial/public use licence for this PSD (More info)

Source: http://hjoranna.deviantart.com/art/Wood-Texture-4-117827898

2

Source: http://www.flickr.com/photos/matthamm/2689470945/

3

Source: http://www.flickr.com/photos/matthamm/3345597659/

4

Source: http://www.flickr.com/photos/matthamm/3345597591/

5

Source: http://www.flickr.com/photos/matthamm/3346430996/

6

Source: http://www.flickr.com/photos/matthamm/3345597487/in/photostream/

7

Source: http://crimson-designs.deviantart.com/art/Bruised-Red-Wood-11647331

8

Source: http://www.flickr.com/photos/deiby/2528506906/

9

Source: http://errantdreams.deviantart.com/art/Wood-Texture-3-Hardwood-94017060

10

Source: http://www.flickr.com/photos/bittbox/3508082241/in/set-72157617708336229/

1 - Create a new document. The example dimensions are 1000*1024 pixels, but you can easily change 1024 by the desired height. Fill the background with white (#FFFFFF)

2 - Create a new layer set, named “left sidebar”, and create a new layer (name sidebar) within this layer set.

3 - Pick up the Rectangular Marquee Tool, and create a 352 pixels wide rectangle on the left part of the document. Fill the rectangle with dark grey (#21211F)

4 - Time to write your name. I have picked a fake name “Eddy Thoreau”, for the example. For the font, I have used Futura. As this font isn’t open source, I can’t give it to you in this tutorial. However, the same design looks very good with other fonts as such as Helvetica or Myriad Pro.

The color used is #1CB7EA and font size is 72pt. If you have (as me) a long name, you should consider reducing font size.

5 – Once you wrote your name, open a picture of you and scale it to 147*197 pixels. Integrate it on the design, just below your name.

6 - On the layers window, right-click on the picture layer and select blending options. Use the following parameters to add a white stroke around the pic.

7 - Time to add your info. In the example, I have added website, email adress, street adress, telephone, fax and social websites urls.

Pick up the text tool, set a white (#FFFFFF) font size of 14pt and write your infos. Don’t forget to justify the text on the right. Font used is Futura.

8 - Below the contact informations, we have to insert a nice separator. Select the sidebar layer, pick up the Single row marquee tool and click on the design, below the contact info. Fill the selected part with grey (#454544).

9 - Now, let’s talk about your skills. Pick up the text tool, select the Futura font in 36pt size and #1CB7EA color. Write “What I do” or whatever text you’d like to use to introduce your skills.

10 - Pick up the text tool again and set font size to 14pt, color to white (#FFFFFF). Type your skills. Once you’re done, select the whole text and justify it to the right.

11 - To note my skills, I have used a star icon found on IconFinder.net. You can grab it here, but it is also inclued in the psd.

12 - Duplicate the star icon as many times as necessary to achieve a similar result:

13 - Repeat steps 8 and 9 to create a new separator below the “skills” part, and a title for your latest designs.

14 - Take some screenshots of your latest designs, and scale it to 285*152px. Once done, right click on the screenshot layer in the layer window and use the following settings to add a white stroke around the screenshots.

15 - We’re done with the left part of the document. At this point, your design should look like this:

16 - Now, let’s populate the main content area. Create a new layer set named “main content”, and another layer set named “experience”. This layer set should be placed inside the “main content” layer set.

I have divided the main content area into 3 parts: experience, education, and others. Let’s start with the experience part. Pick up the text tool, set the Futura font with a size of 36pt and #1CB7EA as text color. Write “experience” or whatever else.

17 - I have choosen to display my past work experience with the following format: Company, date/position, descriptions of tasks.
The font used is 14pt Futura. Colors goes as follow:
Company: #1CB7EA (Bold)
Date/Position: #6B6B6A
Tasks: #21211F

Type your previous work experience and use the above settings to style it. Once done, your design should look like this:

18 - Time to create two new layer sets, one named “education” and the other “others”. For the titles, pick up the text tool, set the Futura font with a size of 36pt and #1CB7EA as text color.

For the texts, use the following settings:
Title lines: Futura font, bold, #1CB7EA 14pt.
Texts: Futura font, normal, #747473 14pt.

19 - We are done with the content. The resumé looks great, but we still can do better. Create a new layer set, name it “right bar” and create a new layer inside it. Select the rectangular marquee tool and draw a 83px wide rectangle on the right side of the document. Fill the shape with #21211F.

20 - The last part of the tutorial is to add a good looking vector attach to our resumé. Download the attach icon from IconFinder and paste it on the upper right part of the design, with the right bar layer set. Name this layer attach.

21 - Make sure the attach layer is selected, then grab the Polygonal Lasso tool and select the part of the icon we don’t need (as seen in the screenshot below) and finally erase the selected part.

You’re done! Look how stunning your resumé is. Do you thing that guys with Microsoft Word made resumés can still handle the competition?

Get a commercial/public use licence for this PSD (More info)

Source

Feed me animals

Source

Cute critters

Source

Vector animals

Source

Vector kittens

Source

Nice animals

Source

Twitter animals

Source

Animal icons

Source

Asian cats

Source

Aries icons

Source

Another one to suggest? Be sure to tell me in the comments!