Posts Tagged Template Design

Giveaway: Joomla Online Training Classes at OSTraining.com

Click here to open OsTraining.com home page in a new browser tab/browser window.

Do you need to learn how to build Joomla, WordPress, or Drupal sites for yourself or your clients?  Do you need fast, accurate answers to your Joomla, WordPress or Drupal questions? OSTraining.com can help: they provide online training and support for all three CMSs. In this giveaway, five lucky Six Revisions readers will get 6 months of access to Joomla training and support. Read on to see how you can win this awesome membership access.

** Update: Giveaway Period Has Ended **

Winners will be announced on a separate post. You will no longer be able to comment in this post.

Who Are OSTraining?

OSTraining (short for Open Source Training) are trainers who help people learn Joomla, Drupal and WordPress. They have over 25 teachers who have taught 100s of live classes all over North America and the UK.

They’ve created video versions of the classes so you can learn these open source platforms at home, whenever you have the time. They also have a support forum monitored by Joomla, Drupal and WordPress experts.

About OSTraining’s Joomla Training and Support

You’ll have access to four classes, each of which has around 50 videos. The classes are:

  1. Beginner class
  2. Intermediate class
  3. Template Design class
  4. Search Engine Optimization class

You’ll also get a copy of the Breeze and Bolt templates ($120 value), which are specifically designed to be very easy for beginners to use and edit.

Also, you’ll get guaranteed same-day answers to all your Joomla questions.

Sample Joomla Training Videos

Check out these training videos from OSTraining.com.

An Introduction to the Joomla Beginner Course

How to Make Your Joomla Site Mobile-Friendly

An Introduction to the Joomla Template Course

An Introduction to Joomla 1.6

** Update: Giveaway Period Has Ended **

Winners will be announced on a separate post. You will no longer be able to comment in this post.

How to Win an OSTraining Membership

To win one of the five 6-month OStraining Joomla memberships, simply leave a comment answering the following questions:

  • What site would you like to build using Joomla? How would video classes at OSTraining.com help you achieve this goal?

Giveaway Details

This giveaway ends on Wednesday, January 26, 2011 after which the comments section on this post will be closed and you will no longer be able to leave a comment. Please leave a valid email address when filling out the comment form so that we can contact you if you’ve won. Please only comment once. The 5 winners will be randomly selected using the same method as previous Six Revisions giveaways. The winners will be announced on a separate post and you’re advised to subscribe to our RSS feed so that you can be quickly notified when the announcement post has been published. Please note that comments are moderated and so your comment may not show up right away. Please note that comments that do not follow the instructions on how to participate (mentioned above) may not be published, or may be removed later on.

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

More Tags: , , , , , , , , , , , , , , , , , , , ,

Tags: open source platforms, drupal, north america, access update, class search, intermediate class, cmss, source training, template design, bolt, wordpress, support forum, search engine optimization, class template, beginner course

Winners of TemplateWire Web Templates

Winners of TemplateWire Web Templates

Today, we’re happy to announce the winners of the web templates from the TemplateWire giveaway. Many of you participated for a chance to win an XHTML/CSS, Flash, or logo template of your choice, which made the giveaway exciting!

Without further ado, here are the winners.

The Winners

The Winners

Congratulations to the winners! You should have been contacted via email regarding your prize by now.

Thank You!

Thank you for participating in this giveaway. If you didn’t win, you’ll get plenty more chances in the near future to partake in Six Revisions giveaways. Make sure to subscribe to the RSS feed to ensure that you don’t miss out!

Thanks to TemplateWire, providers of premium XHTML/CSS templates, Flash templates and logo templates at affordable prices, for sponsoring the prizes of the giveaway.

Make sure to follow TemplateWire on Twitter to keep up with news about them and also to discover some great links and resources.

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

More Tags: , , , , , , , , , , , , , , , , , , , ,

Tags: php development, giveaways, logo templates, book author, computer experts, gube, documentary film, template pack, twitter, classic luxury, web templates, templates flash, template design, contests, chief editor

Create a Clean Business Web Template Design in Photoshop

Create a Clean Business Web Template Design in Photoshop

In this web design tutorial, you’ll see a method for creating a professional web design mockup that’s perfect for a modern business or e-commerce website. This tutorial assumes that you know the basics of Photoshop.

Final Result

This is a preview of how your template will look like when we finish it, so take a look at what we will be creating! Remember that you can click on the preview below to see the full-scale version.

Final Result

Setting up the Photoshop document

1 We will start by creating a new document (Ctrl + N) with a width of 1024px and a height of 1200px.

Creating the Header

2 Once the new Photoshop document is set up, create a new layer (Shift + Ctrl + N) above the standard white Background layer and name it header.

3 After that, grab the Rectangular Marquee Tool (M) and draw a 75px high rectangle selection at the very top of the Photoshop canvas, as shown in the figure below:

Creating the Header

4 Now right-click the rectangle, and select Fill, which will open up the Fill dialog box. Under the Use option, choose Color; this will open the Choose a color dialog; use a dark gray color (#191919) and press OK to set the fill.

5 Now go to Filter > Texture > Texturizer to give the header background a bit of texture. Input the settings below:

Setting up the Photoshop document

6 Now, the texture filter applied will seem a little bit harsh and pronounced, but keep reading because we’ll make more adjustments. The next step is to go to Image > Brightness/Contrast and apply the settings below:

Setting up the Photoshop document

7 It already looks better, right? Now we will adjust it with some layer styles. So right-click on the header layer in the Layers Panel and select Blending options. Select Gradient Overlay and than apply the following settings:

Setting up the Photoshop document

Here is what the header should look like now:

Setting up the Photoshop document

Creating the logo

8 Lets create a basic logo/site name; don’t panic, it’s not going to be complicated and if you want to use your own logo, go ahead. Create a new layer over the two existing ones (Background and header) and name it logo.

9 Then grab the Horizontal Type Tool (T) from the Tools Panel and create a text box by holding down Shift and dragging your mouse to the size you want your site name to be. Finally, apply these Character settings (if you don’t have the Character Panel open, go to Window > Character to switch it on):

Creating the logo

10 I chose "INDEX" as the name, but you can choose any other name and may change the size and the alignment. I applied white color (#FFFFFF) to the text but to add a bit of style, changed the last letter, "X", to a color of #00C0FF.

Making the Navigation bar

11 Make a new layer (Shift + Ctrl + N) called Nav Line.

12 Press M to choose the Rectangular Marquee Tool and make a 10px high rectangle right below the header background. Fill it with #0C0C0C. This will be a nice divider between the header background and Navigation bar.

Making the Navigation bar

13 Now, create a new layer and call it Nav.

14 Now select again the Rectangular Marquee Tool (M) and create a 40px high rectangle right below the Nav Line. Fill it with #181818.

Making the Navigation bar

15 Right-click on the Nav layer and choose Blending Options. Add an Inner Shadow layer style to the layer with the following settings:

Making the Navigation bar

16 Select the Horizontal Type Tool (T) and write your navigation link items. You can use the following Character settings:

Making the Navigation bar

17 Now we create a new layer below the text layer we just created named Atab, which stands for Active tab. This will denote the link that the user is currently on – in this example, the Home link.

18 Select the Rounded Rectangle Tool (U). Set the Radius option in the Options bar to 6px and the Color option to a dark gray color (#0F0F0F). Then, draw the rounded rectangle shape right beneath the Home link.

19 Next, right-click the rounded rectangle shape layer and select Blending Options. Apply an Inner Shadow and a Stroke layer style with the following settings:

 

We finished the navigation! Now our template is starting to take shape.

Navigation

Designing the Product Preview section

20 Now, we will set up a nice and modern looking preview of the product/service your company has to offer. We start by creating a new layer and then calling it Product Preview.

21 Grab the Rectangular Marquee Tool (M) and make a 325px high rectangle. Fill it with a light gray color, #E8E8E8.

Designing the Product Preview section

22 Go ahead and create a new layer above Product Review and name it PO Line.

23 Get the Single Row Marquee Tool and make a line between the Nav layer and the Product Preview layer. Right-click on the marquee selection and fill with white, #FFFFFF.

Designing the Product Preview section

Making the Content Area

24 Create a new layer and name it Content. Again, grab the Rectangular Marquee Tool (M) and select the area of the canvas below the header, navigation, and Product Review area; we’ll give this area a subtle gray color gradient in the next steps.

Designing the Product Preview section

25 Fill the selection with whatever color you want; it’s not important what color you choose because we will style it with a gradient overlay.

26 Right-click the Content layer in the Layers Panel, select Blending Mode and apply a Gradient Overlay layer style with the following settings:

Designing the Product Preview section

27 Make a new layer between the PO Line layer and the Content Layer and name it Content Shadow. This will be a nice divider between the Product Preview and Content sections.

28 Grab the Rectangular Marquee Tool (M), make a rectangle that’s roughly 20px in height, and fill it with #000000.

29 Now go to Filter > Blur > Gaussian Blur and set the Radius to 10px. Also, lower the opacity of the layer to 20%.

Designing the Product Preview section

Creating the Footer section

30 Lets work on the footer section of the template. It will be something clean and simple, nothing too fancy. Start by making a new layer and naming it Footer.

31 Grab the Rectangular Marquee Tool (M) and make a rectangle selection at the bottom of the canvas at 150px height. Fill it with a color of #181818.

Creating the Footer section

32 Create a new layer and name it Footer Line. It will be a separator line between content and footer. Use the Rectangular Marquee Tool (M) to create a 20px rectangle and fill it with #0F0F0F.

Creating the Footer section

Creating the Footer section

Adding in the content on the Product Preview section

33 Create a new layer called Preview Image. This will be an image used at the Product Review section. You can either choose a preview image of your own, or download the one I used in the template. If you choose to download the image, place it on the Preview Image layer we just created, then resize it until you like how it looks and align it properly.

Creating the Footer section

34 Apply a Drop Shadow layer style onto Preview Image layer and use the following settings:

Creating the Footer section

35 Next, we add the text content on the right of the layout. Start by creating a new layer. Grab the Horizontal Type Tool (T) and write a nice title for you product. The font settings used in this tutorial, which you can set in the Options bar is Myriad Pro, Semibold weight, 24pt size, and a dark gray color of #0F0F0F.

Creating the Footer section

36 Then create another layer and write a short (a few phrases) description of the product using the settings of Myriad Pro, Regular weight, 16pt, and a color of #5A5A5A.

Creating the Footer section

Creating buttons in the Product Preview section

37 Now, we have to create two nice buttons for our preview product area, a "Read More" button and an "Order Now" button. Let’s start with the first one! Create a new layer and name it Read More Btn. Grab the Rounded Rectangle Tool (U) and draw a good fitting sized rectangle (adjust the Radius option of the corners to something you like).

Creating buttons in the Product Preview section

38 Now right-click the layer and select Blending Options applying these settings:

Creating buttons in the Product Preview sectionCreating buttons in the Product Preview section

Creating buttons in the Product Preview section

Creating buttons in the Product Preview section

Creating buttons in the Product Preview section

39 Use the Horizontal Type Tool (T) to type in the "READ MORE" Text using a white color.

40 Duplicate the Read More Btn layer and rename it Order Now Btn. Move it to the right of the Read More button using the Move Tool (V) and your right arrow key. Change the Gradient Overlay layer style of the button to make it blue; use #0084AF for the left color stop and a slightly lighter shade of blue (#00C0FF) for the right color stop.

Here is how the website should look now!

Creating buttons in the Product Preview section

Adding the content in the Content area

41 Well friends, now we will work on the Content area. This area will contain some more information about the company, testimonials, and payment methods. This is not that hard but we have a little work to do! We’ll be using some free icons called Function Icon Set. Download that set, as we’ll be using some icons included with it in the following steps.

Adding content

42 Grab the Horizontal Type Tool (T) and type "Our company" at the top left of the content area; the font size 18pt, font weight of Bold, and color of #8F8F8F.

Adding the content in the Content area

43 OK. Now create a text layer with the Horizontal Type Tool (T) and write some text describing the company – place it right below the Our company heading. The font size used here is 15pt, font weight Regular, and color of #1B1B1B.

Adding the content in the Content area

44 Let’s create the Read More link for it below. Type out Read More using the Horizontal Type Tool (T) with a font size of 15pt, italics, and the same color as the description. Open the Function Icon Set, look for the coffee cup icon (it’s called coffee_mug.png). Resize it down using the Free Transform Tool (Ctrl + T), making sure to hold down the Shift key while resizing to maintain the proportions. When you get the size you like, place it on the left of the Read More link.

Adding the content in the Content area

45 Create the "Testimonials" section in a similar fashion as the "Our company" section. The icon used in the web template from the Function Icon Set is called coffee_48.png. This is what it looks like now:

Adding the content in the Content area

Working on the Content area right column

46 Now, the right part of the Content area needs to be done. At the right of the first column that we just created, write "Why Us?" as the heading. The font size is 18pt, bolded and using a color of #8F8F8F. Position it so that it is vertically aligned with the first heading of the left column ("Our company").

Adding the content in the Content area

47 Use the Rounded Rectangle Tool to create a rectangle below the "Why Us?" heading.

Adding the content in the Content area

48 Add a Color Overlay layer style using the color #E1E1E1 and a Stroke layer style that’s 1px and set to the color of #DBDBDB.

49 Follow the previous steps for the "Payment Methods" section below the "Why Us?" section. Make the gray Rounded Rectangle significantly shorter, about 40px high and as wide as the "Why Us?" box.

50 Finally, go into the Function Icon Set and look for the credit card symbols, and then place them into our design: they’re called creditcard_paypal.png, creditcard_mastercard.png, and creditcard_visa.png.

Adding the content in the Content area

Adding the content in the Content area

We’ve finished the Content area now! This is how it looks thus far:

Putting in the content for the Footer

51 Finally, the footer! Yes, our template is almost finished, but the cherry on the top will be the footer! I think it’s a great idea to place a newsletter subscription form and a Twitter update status in site footers. Let’s start with the newsletter first. Grab the Horizontal Type Tool (T) and write in the heading, "Get our Newsletter" in the footer area. The setting is: 20pt size, bolded and a color of #0F0F0F.

52 Place newspaper_48.png icon from the Function Icon set it on the right of the "Get our Newsletter" heading.

53 Write some explanatory text for the newsletter feature below the "Get our Newsletter" Heading; I used the same font we’ve been using, 16pt in size, in italics, and with a color of #B8B7B7 (Which is a light gray).

54 Create a new layer and name it Input Box. Get the Rounded Rectangle Tool (U) and create a medium in input box for the users to type in their email address to get the newsletter.

55 Create another rounded rectangle on the right of the input box. Use the Horizontal Type Tool (T) to write the word "Go!’ inside it (the font settings used in this tutorial is 18pt, bolded, and with a color of white – #FFFFFF).

Below is what the newsletter subscription section should look like:

Putting in the content for the Footer

56 Now, let’s work on the Twitter status. We’ll need the icon called twitter_48.png from the Function Icon Set. Place it into the Photoshop document and move it somewhere on the right side of the footer.

57 We need to turn flip it horizontally so that the icon is facing the other way, so press Ctrl + T, then right-click on the icon in the canvas, and then choose Flip Horizontal.

58 Create a new layer under the icon layer. Grab the Ellipse Tool and draw a circle that will act as a shadow of the Twitter bird, using a dark gray color of #0F0F0F.

Putting in the content for the Footer

59 Create a new layer and with the Rounded Rectangle Tool, draw a nice solid square that will act as a speech bubble; use the dark gray color we just used (#0F0F0F).

60 Now, with the Pen Tool (P), draw a triangle that points from the box to the icon using the same color as above (#0F0F0F).

Putting in the content for the Footer

61 And finally, type in some sample text to simulate a Twitter status update.

Putting in the content for the Footer

Conclusion

We just completed the tutorial on how to build a simple business template in Photoshop.

Final Result

I hope you found my tutorial useful; practice and I have no doubt that you’ll do better than this!

Special thanks to We Function for the beautiful free icons used in the tutorial!

Share your work with us on Flickr!

If you’ve finished the tutorial, why don’t you share with us your work in the Flickr Six Revisions group? See you there!

Download

If you would like to get the PSD file associated with this tutorial, you can download it below as a ZIP archive.

Related Content

About the Author

Andrei Patrascu is a young freelancing graphic and web designer based in Romania. His web presence can be found at andreip.net. If you would like to stay in touch with him, follow him on Twitter as @andrei where he regularly shares graphic and web design-related tweets.

More Tags: , , , , , , , , , , , , , , , , , , ,

Tags: little bit, rectangle selection, background layer, professional web design, mockup, texturizer, texture filter, tutorial assumes that, canvas, white background, dark gray color, template design, final result, business web, gradient

48 Trendy And Fresh Web Interfaces From Deviantart: August 2009

title-deviantart-webdesign-inspirationAs you may notice, I am always trying to vary tutorial, resource and informational posts with inspirational ones. And you guessed it – here you have inspirational post featuring several very talented web designers from DeviantArt. All of these inspiring website examples are fresh and new, from this month so you can see current trends. I must be honest I really love all of these sites, I like current trending and research made me want to get my hands dirty with some new design too. Carefully watch every detail – some designs are very simple, but white space is used very efficiently, creating outcome to look really professional. I enjoyed every pixel in these designs and hopefully this article and talented works will make you inspired too!

Finally I know I’ve been promising my webdesign related tutorials, to come out soon – I am keeping you informed, new tutorials are in process! Enjoy what I have to offer you know! Cheers!

1. PaperBlog by edumicro

Author’s comment: “This layout started from sketch. I was drawing some things on the paper and then comes something identical to the result you can see here. It is a blog design with a different structure from my last wordpress themes.”

paperpblog-deviantart-inspirational-creative-web-design

2. Pintley Website by ejsing

pintley-deviantart-inspirational-creative-web-design

3. MyFolio 2 by edumicro

my-folio-2-deviantart-inspirational-creative-web-design

4. Aquaffect by BboyWicked

Author’s comment: “This was design done for a client who needed a new look for his portfolio of variant things such as web, photography, videos etc.”

aquaeffect-deviantart-inspirational-creative-web-design

5. Template 14 for 4T by nodethirtythree

Author’s comment: “Commercial template design. Full view is 75% of the actual design.”

template-14-deviantart-inspirational-creative-web-design

6. Creative Wroclaw by hinok

wroclaw-deviantart-inspirational-creative-web-design

7. Ejsing Graphics – White layout by ejsing

ejsing-graphics-deviantart-inspirational-creative-web-design

8. Ambiground by ECP-Pro

ambiground-deviantart-inspirational-creative-web-design

9. FreshPress by AlxDesign

fresh-press-deviantart-inspirational-creative-web-design

10. Zanimation Portfolio 2009 by z-design

Author’a comment: “Designed to be developed entirely in flash, which will be done over the next few months.”

zanimation-deviantart-inspirational-creative-web-design

11. Edge by AlxDesign

Author’s comment: “Tried to use as little gradients as possible and only “pure” color squares on this one.”

edge-deviantart-inspirational-creative-web-design

12. smfyoo by SencerBugrahan

smfyoo-deviantart-inspirational-creative-web-design

13. easo by osec

easo-deviantart-inspirational-creative-web-design

14. TopBird Admin by SencerBugrahan

topbird-admin-deviantart-inspirational-creative-web-design

15. JustBlue by dioxyzone

justblue-deviantart-inspirational-creative-web-design

16. Muxo Joomla Theme by SencerBugrahan

muxo-deviantart-inspirational-creative-web-design

17. Naturebloggers by SneakyOne1990

nature-bloggers-deviantart-inspirational-creative-web-design

18. SODRINK Layout by ejsing

sodrink-deviantart-inspirational-creative-web-design

19. SeoHero by alivepixel

seohero-deviantart-inspirational-creative-web-design

20. Mockup.GC by cerebrocreativo

mockup-guerra-deviantart-inspirational-creative-web-design

21. Keim.cc by CoronaLemon

keim-cc-deviantart-inspirational-creative-web-design

22. GoldPress by SencerBugrahan

goldpress-deviantart-inspirational-creative-web-design

23. Dioxyportfolio 09 by dioxyzone

dioxy-portfolio-deviantart-inspirational-creative-web-design

24. DressUp Layout by ejsing

dressup-deviantart-inspirational-creative-web-design

25. faucet by emsVizyon

faucet-graphics-deviantart-inspirational-creative-web-design

26. Ready Made Designs v2 by bassmansgz

ready-made-deviantart-inspirational-creative-web-design

27. HuddleHub Layout by ejsing

huddlehub-graphics-deviantart-inspirational-creative-web-design

28. Free OnePagePortfolio – Black by princepal

one-page-deviantart-inspirational-creative-web-design

29. Hover.com by DouglasEltz

hover-deviantart-inspirational-creative-web-design

30. Quacero by SencerBugrahan

quacero-deviantart-inspirational-creative-web-design

31. Snoba world Interface 2009 by tritube

snoba-deviantart-inspirational-creative-web-design

32. ROCKY pre-final: 2 themes by tritube

sa-rocky-deviantart-inspirational-creative-web-design

33. Company Design by Moddog

company-graphics-deviantart-inspirational-creative-web-design

34. KitGraphique : Invaders by miko434

invaders-deviantart-inspirational-creative-web-design

35. eSport Website 4 sale by overcrock

clanpage-deviantart-inspirational-creative-web-design

36. Mens jewellery by finesy

jewelry-deviantart-inspirational-creative-web-design

37. Team Fear clandesign by pixelkoenig

clandesign-deviantart-inspirational-creative-web-design

38. Web Layout 059 by alert84

moovioart-deviantart-inspirational-creative-web-design

39. Ilixum Mockup by ipholio

ilixum-deviantart-inspirational-creative-web-design

40. Instalandia.pl by kibus

instalandia-deviantart-inspirational-creative-web-design

41. Delli Corporate by dellustrations

delli-deviantart-inspirational-creative-web-design

42. CMS – business theme by prkdeviant

cms-business-deviantart-inspirational-creative-web-design

43. Phototune theme by gdnz

phototune-deviantart-inspirational-creative-web-design

44. Business Template by abodemous

business-deviantart-inspirational-creative-web-design

45. TechLeef by Katro16

techleaf-deviantart-inspirational-creative-web-design

46. Qarstar Design by Qarstar

qarstar-deviantart-inspirational-creative-web-design

47. SevenDesigns Studio Finall by rolandek

seven-deviantart-inspirational-creative-web-design

48. Pctronic by finesy

pctronic-deviantart-inspirational-creative-web-design

Related posts:

  1. 22 Photoshop Web Design Interface Tutorial Sites
  2. 90 New And High Quality Photoshop Web Layout Tutorials
  3. Logo Design Trends 2009 – Showcase
  4. 46 Sites To Get Inspired And Familiar With Hand Drawing Style
  5. 23 Extremely Helpful Wordpress Help Sheets And Resources

More Tags: , , , , , , , , , , , , , , , , , , , , ,

Tags: inspiration, trends, wordpress themes, web interfaces, 4t, sketch, wroclaw, web design, informational posts, web photography, design author, portfolio design, deviantart, current trends, fresh