• Shortcuts : 'n' next unread feed - 'p' previous unread feed • Styles : 1 2

» Publishers, Monetize your RSS feeds with FeedShow:  More infos  (Show/Hide Ads)


Date: Monday, 05 Aug 2013 06:16

Ultimate Social Icon Set

PSD iPhone UI Kit

200 icons from Inventicons

Balio Web UI Kit

500 Vector Mega Icon Pack

200 vector icons

12 Flat SEO icons

40 Bluetron icons

Simplycons Icon Set

Fanextra icons and graphic resources

Want more? Then just have a look to this page!

Author: "Jean-Baptiste Jung" Tags: "Resources"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 20 Jun 2013 16:32

One page websites, the latest trend in web design

One-page websites are the latest trend in modern web design. They look good, and are also easier to use for your visitors. Whatever you’re a freelancer or a company, there are many reasons why you should update your website to a one-page layout.

Today I have a great deal for you: My long-time partners from Mighty Deals are currently selling a bundle of 20 awesome, HTML/CSS/JavaScript one-page template. You can use them “as it” for your own website or use it as a basis for your next WordPress theme.

Templates Highlights:

20 Website Templates
This bundle features 20 high-quality, professional HTML/CSS templates for your website (note: These are not WordPress templates, but website ones). You’re sure to find a design and layout you like among so many great choices.

Responsive Design
All these templates were built with a responsive design. That means they’ll not only function on any device, but look great too. Whether it’s a desktop computer, laptop, smartphone or tablet, you can rest assured that your site will continue to impress no matter how your users are viewing it.

Customizable
Your purchase of this Web Template Bundle means you’ll receive the necessary CSS, HTML and PSD files for each template. That makes it easy to customize your templates any way you’d like, from adjusting colors to adding images.

Royalty-Free License
All these templates come with a royalty-free license. You can use any of these templates on a single domain for either personal or business-related projects.

Here is an example of template included in the bundle. Please click here for the full list and demos.

Looks great! So don’t wait and get your bundle today!

Author: "Jean-Baptiste Jung" Tags: "Resources"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 30 Dec 2009 11:03

Having a logo is a essential part of company branding. A logo is important because it allow people to memorize your company. Just think a second about some very well known brands a such as Apple or McDonald’s : When you see the logo, you instantanely think about the product. This is why you should definitely create a strong identity for your company.

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.

Author: "Jean-Baptiste Jung" Tags: "News, logo"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 13 Oct 2009 11:31

Tutorial 9

WpRecipes

Grafpedia

Web Designer Depot

Web Designer Wall

Spoon Graphics

I Love Colors

N.Design Studio

DivVoted

Matt Mullenweg

Legendary Aircraft

Author: "Jean-Baptiste Jung" Tags: "Resources, background, vector"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 21 Sep 2009 12:32

There are legions of stock images websites on the web. Some are paid stock images, some are free but boring (You have to register, etc) and some are 100% free. You just have to go to the website, select a few images, and download it. That’s simple as that.

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.

Author: "Jean-Baptiste Jung" Tags: "Resources, images, st, stock photo"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 21 Jul 2009 15:11

How to Convert a PSD to XHTML


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

Author: "Jean-Baptiste Jung" Tags: "Resources, coding, css, xhtml"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 07 Jul 2009 13:19

This will be our final result:

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)

Author: "Jean-Baptiste Jung" Tags: "Photoshop, layout, web"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 30 Jun 2009 13:33

Disclaimer:
Theses templates has been coded by a PsdVibe reader, Pratap Karumanchi. They are provided “as it”, without any warranties.

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)

Author: "Jean-Baptiste Jung" Tags: "Resources, templates, xhtml/css"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 22 Jun 2009 14:30

This is what the result will look like:
Creating a tech blog layout in Adobe Photoshop

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:
Creating a tech blog layout in Adobe Photoshop

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)

Author: "Jean-Baptiste Jung" Tags: "Photoshop, blog, layout"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 15 Jun 2009 14:20

This will be the final result:

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)

Author: "Jean-Baptiste Jung" Tags: "Photoshop, layout, resume"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 11 Jun 2009 14:54

Vector Sharks


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!

Author: "Jean-Baptiste Jung" Tags: "Resources, animals, icons, vector"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 08 Jun 2009 14:09

Here is what you’re going to create in this tutorial:

1 - Create a new document of 1280*1024 pixels. Fill the background with white (#FFFFFF)

2 - Pick up the rectangular marquee tool and draw a rectangle with a height of 455 pixels. That will be our website featured content. Fill it with light blue (#B3DDFB).
Once done, draw a new rectangle from the top of the document to be our website header. In the example, mine have a height of 89 pixels and the color is #3399CC.
Last part is to do the footer. Just draw a rectangle on the bottom of the document and fill it with grey (#7E8081)

You will have something like this:

3 - A site can’t be great without a great navigation. So let’s draw a cool tab-based navigation for our new design. Create a new layer set and name it navigation.
Pick up the rounded rectangle tool, set the radius to 10px and draw a rounded rectangle to be a menu tab. Background color should be the same as our featured content background (#B3DDFB). On the layers window, right click on the newly created layer and choose “Rasterize layer” from the menu.

4 - Copy the layer 3 times in order to have 4 tabs. Place the navigation layer set a 30 pixels of the right margin of the document, as shown in screenshot below.

5 - Now, let’s create a different style for the active tab. With the rounded rectangle tool, create the same rounded rectangle as before, but with white (#FFFFFF) as background color.

6 - Once the active tab layer is created, right click on it on the layers windows and select “Blending options” from the dropdown menu. Add a gradient with the following parameters:

Your navigation should now look like this:

7 - Let’s add some text to the tabs. I have choosen a 24pt, “Arial rounded” font with #3399CC as color. We now have a finished menu:

8 - The next step is to create the 3 numbered steps describing how cool the product is. Create a new layer set and call it “Numbers”.

9 - Now, pick up the Elipse tool and draw a circle, with white (#FFFFFF) background. Once done, pick up the text tool, and write two lines of text. In the PSD, I have used 24pt #3399CC Arial Rounded font.

10 - Keep the Arial Rounded font and change its size to 60pts. Type “1″ in the whote circle.

11 - Repeat steps 8, 9 and 10 until you have 3 differents numbered steps. At this point, it should looks like this:

12 - Time to add a video presentation of the product. I have simply took a screenshot of a vimeo video, and scaled it to 401*289 pixels.

13 - Now that we completed the upper part of our design, let’s populate the main part of our design, which will be where our product presentation text will go. Create a new layer set named “Paragraph 1″.

14 - Pick up the text tool and write the paraph title. I have choosen Arial Rounded font, 24pt, in #7E8081 color.

15 - Pick up the line tool and draw a line below the paragraph title. Color is the same as for the title, #7E8081.

16 - Let’s write the paragraph: Pick up the text tool and draw a square to write in. The square should have the same width as the line we previously drawn.

17 - Once you typed your paragraph text, select it and open up the Character and Paragraph palette. Click on the “Paragraph” tab in the palette, and click on the “Justify All” button to justify your text.

18 - For the two remaining paragraphs, simply copy the layer set named “Paragraph 1″, or repeat the last 4 steps. Once you completed this step, the paragraphs will look like this:

19 - We now have a design that starts to looks very good. Though, two important part are missing, the footer and the logo. let’s start by the logo. Place the cursor in the header and type your web 2.0 app name. I chose “WidgetCreator”, which sound really cheesy web 2.0, but of course, feel free to find a better name ;) I used a white (#FFFFFF) Arial Rounded font in 30pt size with no effect, in order to keep the logo simple and minimalistic.

20 - For the logo icon, I have picked up this image.

21 - Last step of this tutorial is the footer. Siply choose a white (#FFFFFF), 18pt Arial font and type your text. Make sure to align it to the center of the page.


Another idea for a great footer should have been to add sponsors logos. Feel free to experiment!

And here is our final result:

The proof that you can easily create a very fancy design with nothing more than beginner skills in Photoshop!


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

Author: "Jean-Baptiste Jung" Tags: "Photoshop, layout, web 2.0, website"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 01 Jun 2009 15:26

This is how the final result will look like:

Create a modern blog layout in Adobe Photoshop

1 – Let’s start by importing the 960 grid template into Photoshop. The 960 grid template is a very usefull tool for designers, which can be downloaded for free here.

2 – Time to create our background. Pick the paint bucket tool and fill the background with #27343C.
Create a modern blog layout in Adobe Photoshop

3 – Now, let’s tracing our website main content area. Pick the rectangular marquee tool and create a square of 960px wide for approximately 725px height. Create a new layer, and fill it with light grey (#EEEEEE)
Create a modern blog layout in Adobe Photoshop

4 – Create a new layer, pick the rectangular marquee tool and create a rectangle of 420 px wide, starting at the 6th red column from the 960 grid template. Fill the rectangle white white (#FFFFFF).
Create a modern blog layout in Adobe Photoshop

5 – On the layers window, right click on the last created layer and select “Blending options”. Apply the “Drop Shadow” effect with the following parameters:
Create a modern blog layout in Adobe Photoshop

6 – Let’s create our main navigation menu: Simply create a new layer, and create a 960px wide squareon the top of the page. Fill it with light grey (#EEEEEE).

7 – Pick the text tool and select the Arial font. Select #27343C as text color, and type your menu items (Should be “Home”, “About us”, etc. Use the grid template to align the menu items.
Create a modern blog layout in Adobe Photoshop

8 – Our design starts to look great, don’t you think? It’s now time to fill up the main content space.
Create a new layer set and name it “Post”.
For the post titles, I chose a 24pt, bold Georgia font. Color is #27343C.
The thumbnail size is 180*180 pixels. It is inclued in the resource pack of this tutorial.
The excerpt text is italic, 12pt arial with a #555555 color.
Create a modern blog layout in Adobe Photoshop

9 – Let’s take some time to add fancy details to our post display. Pick up the rectangular marquee tool and create a 269px wide rectangle. Fill it with background color (#27343C). Once done, Type your text using 12pt bold arial font, color #EEEEEE.
Create a modern blog layout in Adobe Photoshop

10 – Make sure that all designs elements of the “post” content area are in the “Post” layer set. Then, duplicate the layer set (Cmd + J) to fill the content space as shown in the screenshot below:
Create a modern blog layout in Adobe Photoshop

11 – Now, let’s populate the right sidebar. Due to its small size, it is particulary great for 125*125px ads. Create a new layer set, name it “right sidebar”, then pick up some advertisment images and insert it in the design.
Create a modern blog layout in Adobe Photoshop

12 – We now have a great looking right sidebar! Time to fill up the white space on left sidebar with useful information that you can find on any good blog: author info, recent posts, etc.
Create a new layer set and call it “Left sidebar” for left sidebar content. When using WordPress, sidebar info is often contained within widgets, so I kept widgets in mind when designing.

13 – I chose to first add author information. The first thing to do is to add your picture (90*128px). Once you added the picture to the design, right click on the picture layer in the layers window, and select “blending options” in the menu. Go to “Stroke” and add a 5px #DDDDDD stroke. Then, add some text to tell the reader a bit more about yourself. I have used Georgia font, italic, with a size of 14pt.
Create a modern blog layout in Adobe Photoshop

14 – For the title, I have choosen 18pt Arial Black font with #27343C color.

15 – For the “Read more about Jean” text, create a new layer, pick the rectangular marquee tool and create a rectangular shape of 180*27 pixels. Fill it with #27343C. For the text, the font used is bold Arial, 12pt.

16 – To finish our widget, we have to create a separator. To do so, pick up the line tool and draw a horizontal line below the text. Color used is #CCCCCC. Once the line is created, right click on its layer in the layers windows, and select “Rasterize layer”.
Create a modern blog layout in Adobe Photoshop

17 – Left sidebar is starting to look great! Repeat steps 13 to 16 as necessary to fill up sidebar’s space with the information useful to you.

18 – We’re almost done. Let’s add some information on the footer. Simply pick up the text tool, the #FFFFFF Georgia italic font, and add your footer info.
Create a modern blog layout in Adobe Photoshop

19 – The final step is to create and add a logo to our design. Let’s start by writing some text, like for example “A Webdesigner Weblog”. I have used the Santa Fe LET font. Once the text is written, we can add some style. Right click on the text layer on the layers window and select “Blending options”.
Select “Stroke” and add a 4 pixel stroke. Then, select “Color overlay” and fill the text with background color (#27343C).
To inclinate the text layer, make sure the layer is selected, hit Cmd+T (Ctrl+T for Windows users) and then rotate the layer a bit. To make the logo looks a bit better, we should definitely add an icon; I got that nice painting palette icon on Iconfinder.[Icon has been removed due to copyright issues. Sorry.]
Create a modern blog layout in Adobe Photoshop

20 – Work’s done! Look what we created together:
Create a modern blog layout in Adobe Photoshop


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

Author: "Jean-Baptiste Jung" Tags: "Photoshop, blog, layout, modern"
Comments Send by mail Print  Save  Delicious 
Date: Sunday, 31 May 2009 05:58

Who am I ?

Jean-Baptiste JungMy name is Jean-Baptiste Jung, but most people call me Jean. I’m 27 years old and I was born in Paris, France. I now live in southern Belgium with my wife and my cat.

I blog since 2007 about various subject as such as Web development, WordPress, Web design. Apart from PsdVibe, I have a few websites, the most known are Cats Who Code and WpRecipes.
I have provided articles for several popular blogs, as such as Smashing Magazine and I’m currently finnishing a tech book about WordPress.

Besides blogging/webdesign/webdevelopment things, I like to travel, having relaxing times with my wife and I love animals. Animal rights is a cause I’m involved.

The future of PsdVibe

I know that sometimes, when a blog or website is sold by its founder, the new owner don’t always care about the blog and the readers, and only want to make some quick money.
To answer a question that many of you shall ask, yes, I’m hoping to make money with Psdvibe, but no, I will definitely not drown the tutorials into crappy Adsense ads without never providing new content.
My goal is to take Psdvibe to a higher level. I’ll continue to provide useful tutorials, resources, and freebies.

Some new things

As a new owner, I don’t want to make big changes to Psdvibe. Anyways, the blog is just great how is it now. Thought, please note the following changes:
1 – Comments are now dofollow, so don’t hesitate to discuss. Don’t spam, though.
2 – A commercial/public use licence for the PSD will be available within a few days (Don’t worry, PSD will still be downloadables for free!)

Well, that’s all for today, so, see you tomorrow for a complete Website layout tutorial!

Author: "Jean-Baptiste Jung" Tags: "News, ownership, psdvibe"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 19 May 2009 19:03

This will be your final result

1. The first thing we want to do is create a new document with the dimensions of 1024×776.

2. Using your Paint Bucket Tool from your Tools Pallet go ahead and fill your background layer with #F1F8F9.

3. I like to start from the top and move my way down, so lets start on our header. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.

4. Next we need to add some blending options to this layer, so right click its layer and choose Blending Options from the drop down menu and insert the following


5. Now I wanted to add some halftones to our header to give it a bit more detail. I have provided you with the halftones and they can be found in the source files. Once you put it on your header, change its blend mode to Soft Light, and lower the opacity to 21% and it will look something like this

6. We now want to add a little ‘glow’ that will be behind our logo. Using your Elliptical Marquee Tool, make a selection similar to the following and make sure your feather is set to 18px and fill it with #FFFFFF.

7. Change the blend mode of your glow to Overlay, and then lower its opacity to 50% and it will look something like the following

8. For the logo I used the font Myriad Pro and laid my text out like the following. Make sure your tag line, and business name are on their own layers. On the “Squared” I have it set to “regular”, and the “Studio” is set to Bold.

9. On the “SQUAREDSTUDIOS” layer, insert the following blending options


10. I added a cheesy square to go along with the name, and this is what I came up with

11. Now it’s time for our navigation. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF

12. Insert the following blending options on the layer you just created



13. Now we need to make a little 1px high highlight, and a 1px high shadow to give it some depth. The top color is #2C9CD3, and the bottom is #FFFFFF.

14. When you zoom out it will look something like this

15. Links are all that we need now. We want to go ahead and get our active link out of the way, and how it will be shown. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #B7B7B7.

16. Now insert the following blending options onto its layer



17. For my text I used Helvetica with the color #525252 and after adding some links your header should look something like this

18. Next we are going to make our ‘featured’ area, where we will be displaying our latest work. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #000000

19. Insert the following blending options onto its layer


20. We want to have a nice 1px highlight at the bottom, so make a 1px high selection going across the bottom of the box you just created and fill it with #FFFFFF. Lower the opacity of its layer to 35%, and it will look something like this

21. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF

22. Now insert the following blending options onto its layer




23. It will look something like this after you add a thumbnail preview, and some text.

24. The last thing we need to do is add some buttons so users will be able to selection “previous, next, etc”. Using your Rounded Rectangle Tool, make a Rectangle similar to the following

25. Now insert the following blending options




26. Using your Text Tool, now add some text similar to the following with the color #323232.

27. Insert the following blending options onto your text layer

28. All you need to do is do that again for a “view entire portfolio” button, and your layout will look something like this by now

29. Time to move onto our content area. The first box we are making is a place for you to put a quote to get the attention of potential clients. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF

30. Now insert the following blending options onto its layer


31. For the “quotes” I used the color #B7B7B7, for the text I used #525252, and for the blue text I used #2590CE. I placed it in the following manor

32. The next box will be for putting a short description about yourself, or company. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF

33. Now insert the following blending options onto its layer

34. For the title I used the font Myriad Pro with the color #2590CE, and for the dots and the description I used #525252 with the font Helvetica. The icons are from a free icons pack that you can download here.

35. I then did the same thing for a “services” box.

36. The last step is adding a footer. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #B7B7B7

37. Insert the following blending options next


38. All that is left is to add some text and your done! This is what your final result should look like


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

Author: "Matthew Heidenreich" Tags: "Photoshop, design, layout, simple, Studi..."
Comments Send by mail Print  Save  Delicious 
Date: Friday, 15 May 2009 14:45

Here is another tutorial that I wrote for Six Revisions.  I thought it turned out pretty well, and I hope you guys enjoy!  On a side note, i’ve been rather busy and i’ve had some time open up, so i’ll be able to get more tutorials up like I used to.

Worn Paper

How to Create a “Worn Paper” Web Layout Using Photoshop

Author: "Matthew Heidenreich" Tags: "Photoshop, layout, paper, textured, tuto..."
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 29 Apr 2009 01:10

This will be your final result

1. The first thing we want to do is create a new document with the dimensions of 1024×1200.

2. Using your Paint Bucket Tool from your tool pallet, fill your background layer with #3E4C54

3. Next lets use our Rectangle Marquee Tool to make a selection similar to the following and fill it with #1F2B33. This will represent our headers background

4. On this layer we want to add some blending options, so go to your layers pallet and Right Click your layer and choose Blending Options from the drop down menu and insert the following

5. Time to move onto a couple links for our header. This is where our page links will be displayed. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #FC4F83

6. Next make 2 more boxes of equal size with a fill color of #27343C. Then you can add some text with the color #FFFFFF to your buttons similar to the following

7. Keeping with the simple nature of this layout, our logo won’t be too flashy. For the logo, I used the font Helvetica Neu, set to bold, with the anti-alias set to strong. I used #FFFFFF for the “Your” and “Gallery“, and for “Photo” I used the color #FC4F83. For the tagline I used the color #B1D4E8. When it’s all said and done, you should have something that looks like this

8. Now it is time to get the sidebar out of the way. Using your Rounded Rectangle Tool with a radius set to 10px, and a foreground color of #ECF1F3, make a rectangle similar to the following

9. We now want to create our link units for our Category box, and our Highest Rated image box. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #000000

10. Next, insert the following blending options onto it’s layer


11. Now just use your text tool to add the heading “Categories” and you should have something that looks like this by now

12. Using your Rectangle Marquee Tool again make a selection similar to the following and fill it with #000000

13. Insert the following blending options onto its layer


14. Use your Text Tool now to add a link with the color #3E4C54, and you should have something that looks like this

15. Now just repeat steps 12-14 as many times as you’d like and you’ll have something that looks like this

16. I repeated those steps for a “Highest Rated” box, and added some 200×80 ads, and you’ll have something that looks like this for your sidebar

17. Time to move onto our content area. Using our Rounded Rectangle Tool with a radius set to 10px, and a foreground of #FFFFFF, make a Rectangle similar to the following. Be sure to let it overlap your sidebar a bit

18. On your newly created Rounded Rectangle layer, insert the following blending options

19. We now want to work on how our picture will be displayed in our gallery. Using your Rounded Rectangle Tool with the radius set to 10px, and a foreground color of #ECF1F3, make a rectangle similar to the following. It doesn’t have to be exactly the same size as mine, just a rough estimate.

20. Now insert the following blending options onto your rounded rectangle layer

21. We now want to duplicate our rounded rectangle layer, and make a selection similar to the following and choose Edit>Clear (or hit delete on your keyboard). To make it easier for you to see what was done, I made the rounded rectangle red for the purpose of this tutorial. This will be a background for the title of our image.

22. Insert the following blending options onto its layer now


23. Your results will look similar to this

24. Next we want to add a little shine. Make a 1px high selection similar to the following and fill it with #FFFFFF. Change its Blend Mode to Soft Light and lower the opacity to around 57%

25. When you zoom out you’ll have something that looks like this

26. Using your Text Tool, go ahead and place it in a similar manner to the following

27. Now insert the following blending options onto your newly created text layer


28. Next we want to add some text to show what day it was posted. I used the color #3E4C54 for my text. I also went ahead and added some rating stars to the header using the default custom shapes tool and you’ll have something that looks like this

29. The last step is adding some text for tags, and your category, and you’ll have a finished result that looks like this for your pictures display box

30. Now we want to add a simple pagination option at the bottom of our content area. I used the color #1F2B33 for the numbers. For the active page, I used the same settings we used back in step 5 for our active page. I made a box and fill it with #FC4F83

31. The last thing we need to do is add our footer. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #27343C.

32. Now insert the following blending options onto its layer

33. The last thing I did was add some footer text, and that is it! You are finished! I went back and added a different background behind the category and tags on your photo gallery, but it is an optional change. Your final product will look similar to the following

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.


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

Author: "Matthew Heidenreich" Tags: "Photoshop, gallery, layout, photo, psd, ..."
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 22 Apr 2009 22:04

This is a tutorial that I wrote for SixRevisions, as I have started to become a writer there, as well as still running psdvibe.  I think the results look good, and hopefully you’ll enjoy the tutorial.  I’ll have another tutorial up on here in a couple days, so be ready for it!

Rusty Styles

How to Create a Sleek and Textured Web Layout in Photoshop

Author: "Matthew Heidenreich" Tags: "Photoshop, grunge, layout, tutorial"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 20 Apr 2009 19:35

Welcome to another PSD to XHTML/CSS tutorial here at psdvibe. We will be converting the Design Lab TV Styled Layout into valid xhtml/css which will be cross browser compatible.
First thing you need to do is create a html file through Dreamweaver choose XHTML 1.0 Strict.dtd from the doc type option - save it as index.html.

Next create a CSS file through Dreamweaver name it style.css - you can either place in the same folder as your html file is or you can make a separate folder - I prefer a separate folder so I am saving my file in “scripts” folder.

Note: we have to reset our margin and padding if we want to completely control our layout without the interference of automatic margin and paddings which some elements posses so either attach another css file mostly known as reset.css (you can google it) or you can copy the code below in your CSS files

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
	margin:0;
	padding:0;
}

ul{
	list-style:none;
}

fieldset{
	border:0;
}

Link the Stylesheet with your html document. Although we will only need a single stylesheet for this tutorial, in most cases IE6 & 7 tend to mess around a bit, so I always create separate style sheet for them so we can sort out problems related to them in those stylesheets - the screen shot below will show you how to add those so that only the browsers they are intended for uses them.

Now create a folder named as “images” - all your images will go in this folder.

Ok, now all the base files are now complete - lets open up our PSD and before starting to cut it up we can study the design and plan a bit how we are going to do this. This design looks straightforward to me. There aren’t a lot of gradients in it and most parts are solid colors, so we won’t have to make a lot of slices. Lets go ahead and start our conversion.

Time to analyze our design - it’s a fixed width and height design - center aligned - consisting of a main navigation - logo and the middle content which is a portfolio gallery along with navigational buttons. Not complicated at all. So lets sharpen our slice tool and start slicing.

First off, hide all layers apart from the background layer. This consists of the monitor and the black background. I don’t like big slices but I have to make a big slice over here. You can make that background 2 slices or how many you would like but I would rather make it a single slice which will be optimized for 80% quality so we can cut down the size of the image and not loose the quality (you can play with it more and turn down the quality a bit more to cut the size of the image, but it will compromise the quality) so I am sticking to 80% here to make the whole background as a big slice.

Now lets implement that slice in CSS - I will be giving this background in the body div which will be centered aligned with background color as black.

body{
	position:relative;
	background:#000 url(../images/body_bg.jpg) center top no-repeat;
	color:#000;
	font:62.5% Helvetica,Arial,sans-serif;
}

Now lets calculate our wrapper area which is 847px in width, but we need the wrapper area to be divisible by 2 so that it aligns in center. So let’s give padding of 1px from right or left to our wrapper div. So our wrapper has an 848px width in effect.

Now lets make a header area - calculate the area from top of the screen to the bottom of the navigation. I calculated 138px in height but our navigation and logo are a lot below than the top so lets use top padding which is 104px in height.


#header{
	width: 847px;
	height: 34px;
	padding: 104px 0px 0px 0px;
}

Now lets slice up the logo and slice the navigation background. We will be using sliding door technique by Douglas Bowman for the navigation. You can learn that technique from the author’s blog - I will be implementing that technique on our navigation, and you can use the guide there for directions on the sliding door effect. Please see how I sliced the navigation background.

Why we did it like this?
This is because our navigation is text. Some buttons have long words like “photo retouch” and some small like “home” - so we don’t want each button to have a background equivalent to there text - that will create 5 or 6 backgrounds, and more over, if in future you want to rename “photo retouch” to something else, say “perfect photo retouch” you would have to slice the background again so it covers all of the words, make sense?

Now the slicing part is done for the top elements so lets move to the CSS part. Create an id for logo and lets just not place it as an image and make it a link. We want that to be shown as text for SEO reasons. Although users will see an image in their browser, create an id named logo and write styles like below. Now implement in html like this.

#logo{
	display: block;
	width: 90px;
	height: 18px;
	float: left;
	margin: 10px 0px 0px 0px;
	background: url(../images/logo.jpg) no-repeat;
	text-indent: -9999px;
}

Now lets move to our navigation, which is the only complicated bit in this whole layout. We will be displaying <a></a> as a block within ul li and within that <a></a> we will have <span></span> as a block as well.

We will apply our left slice of the navigation to tag “<a>” which will be left aligned with no repeat and our right slice to “<span>”, which will be left aligned and will be repeated horizontally - please use padding from top left, and right for the exact adjustment as PSD - check how it’s done in CSS.

#header ul{
	float: right;
}

#header ul li{
	display: inline-block;
	float: left;
	height: 33px;
	margin: 0px 0px 0px 16px;
}

#header ul li a{
	display: inline-block;
	height: 33px;
	padding: 0px 0px 0px 2px;
}

#header ul li a span{
	display: inline-block;
	height: 23px;
	font-size: 13px;
	color: #fff;
	padding: 10px 6px 0px 6px;
}

#header ul li.active a{
	background: url(../images/left_door.jpg) no-repeat left;
}

#header ul li.active a span{
	background: url(../images/right_door.jpg) repeat-x right;
}

#header ul li a:hover{
	text-decoration: none;
	background: url(../images/left_door.jpg) no-repeat left;
}

#header ul li a:hover span{
	text-decoration: none;
	background: url(../images/right_door.jpg) repeat-x right;
}

Note: i have made an class named “active” for the active state as well.

This is how your HTML will look like.

Now lets slice our six portfolio designs and the left and right navigation buttons. Slice the hover designs for the navigation buttons as well, and make a single image of hover and normal state button like shown below - similarly do this for the right button as well.

Now implement those buttons in CSS like this.

a#left_button{
	display: block;
	width: 34px;
	height: 84px;
	float: left;
	margin: 149px 0px 0px 0px;
	background: url(../images/left_arrow.jpg) no-repeat;
	text-indent: -9999px;
}

a:hover#left_button{
	background-position: 0px -84px;
}

a.active#left_button{
	background-position: 0px -84px;
}

a#right_button{
	display: block;
	width: 34px;
	height: 84px;
	float: left;
	margin: 149px 0px 0px 0px;
	background: url(../images/right_arrow.jpg) no-repeat;
	text-indent: -9999px;
}

a:hover#right_button{
	background-position: 0px -84px;
}

a.active#right_button{
	background-position: 0px -84px;
}

Now lets move onto our main content - we have six thumbnails in our content. I am going to make them with the help of <ul><li>. Go ahead and slice all six thumbnails.

Take measurement from both sides for how much each box has margins between each other and write styles for them in CSS like this.

ul.gallery{
	width: 779px;
	float: left;
}

ul.gallery li{
	display: inline;
	width: 224px;
	height: 179px;
	float: left;
	margin: 0px 17px 30px 17px;
}

ul.gallery li a{
	display: block;
	width: 222px;
	height: 177px;
	border: 1px solid #cccccc;
}

ul.gallery li a:hover{
	border: 1px solid #fff;
}

Note: you can see on the design that every thumbnail has a grey border. We are not going to slice it, instead we are going to implement it through CSS so that we can make a hover effect. To make a hover effect just change the color or border on hover like this.

That’s it! I believe your design is done now.

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.


Get a commercial/public use licence for these files (More info)

Author: "Saad Sarfraz" Tags: "Photoshop, coding, css, design, layout, ..."
Comments Send by mail Print  Save  Delicious 
Next page
» You can also retrieve older items : Read
» © All content and copyrights belong to their respective authors.«
» © FeedShow - Online RSS Feeds Reader