Creating A Professional Magazine

Web Layout

1. Open new document (CTRL + N) with 1024px width and 960px height, RGB color. CTRL + R to bring out the ruler. Draw the guide lines follow the sample image. The maximum width we are going to use is 960px. We will use 240px for the left column, 468px for the middle column and 212px for the right column. There will be 20px space between each of them. We will split the middle column into two.

2. Create a new folder and name it as “header”. I use this font for the title. Type the title you want or simply follow mine. I use 48px font for this. Change the color of the first alphabet into #f1b90b. The rest keep it in black (#000000) color. Double click on the text layer, bring out the blending option. Apply1px outside stroke with grey (#747474) color. Apply black to white Gradient with Soft Light Blend Mode. Then, hold CTRL and left click on the text layer thumbnail to bring out the selection. Go toEdit > Stroke > 1px , white, inside. Grab the rectangle tool and draw a rectangle above the title with color #464646. Apply 1px inside stroke with black color.

3. Create a new folder and name it as “nav”. Grab the rectangle tool and draw a horizontal navigation bar, color #e1e1e1. Apply 1px inside stroke, color #c8c8c8. Type some dummy text. I am using 11pt Tahoma, grey (#7e7e7e) color for inactive link and black color for active link. Draw a rectangle for the active tab and draw the border using pencil tool. You should get the result shown in the sample above. Then, draw a horizontal white color line and place it 1px inside the navigation bar.

4. Subscriber number (readers) is very important for a magazine site. It determinates the popularity of the site in some points. So, I decided to make it big enough and put at the top right of the site. I am using the same technique in Step 3 to achieve this. I am using 30pt Tahoma for the reader’s number.

5. Create a new folder, rename as “feature”. We are going to use this section to display the headline stories. I am going to use the same technique in Step 3 to create the heading and title. What we need to pay attention here is the image size. I am using 220px X 100px where is nearly 2:1 ratio. This is a good option because when it comes to the detailed articles, the image can be resized easier and better.

6. We can now create all the sections by using the same technique in Step 3. Remember to create a new folder for each section. This is to let you modify the layout easier in the future.

7. For the icon we created for the author, refer to the image above. I am using 10pt Tahoma for that, so the icon should match the font size as well. I create 2 guide lines in order to draw the icon. In this stage, you need to zoom into 1200% to draw using 1px pencil tool. We can use the same technique to create the tabbing area icons for the top stories and recent comments.

8. Member login is consider a must have section for magazine site. So, I put it on the top right of the site for easy navigation. I am using 10pt Tahoma for the typing and the similar technique we used before to create the button. You may notice that there is a 1 pixel white color stroke in between the outline and inner gradient. That’s to create the sharper look and feel for the buttons. To create the button, draw a rectangle using rectangle tool and fill it with light grey (#f3f3f3) color. Apply 1px grey (#cccccc)color inside stroke. Apply white to black gradient overlay with soft light blend mode. For the 1 pixel white color stroke, you can zoom in and draw using pencil tool or CTRL+ left click on the rectangle button, bring out the selection. Go to Select > Modify > Contract > 1px. Then create a new layer above the button. Goto Edit > Stroke > 1px inside white color stroke.

9. Member login is consider a must have section for magazine site. So, I put it on the top right of the site for easy navigation. I am using 10pt Tahoma for the typing and the similar technique we used before to create the button. You may notice that there is a 1 pixel white color stroke in between the outline and inner gradient. That’s to create the sharper look and feel for the buttons. To create the button, draw a rectangle using rectangle tool and fill it with light grey (#f3f3f3) color. Apply 1px grey (#cccccc)color inside stroke. Apply white to black gradient overlay with soft light blend mode. For the 1 pixel white color stroke, you can zoom in and draw using pencil tool or CTRL+ left click on the rectangle button, bring out the selection. Go to Select > Modify > Contract > 1px. Then create a new layer above the button. Goto Edit > Stroke > 1px inside white color stroke.

Create a Sleek, High-End Web Design from Scratch

1. First of all, create a new document. Mine is 1100px wide x 1100px high. This is so that I can create a Web site made for 1024px wide, but still have space to decide what is going to happen outside the viewable area so that it degrades nicely even on larger screens.

Now our first task is to create a nice abstract background. To do this we’ll draw a linear gradient down using these two colors: #1b204c to #472373.

2. Now we want a visually interesting background which is abstract enough that it doesn’t distract from the text. Fortunately, there is an awesome watercolor image available free via GoMedia’s Arsenal, click on the freebie section and you’ll find two watercolors; the one we want is the greenish one.

Now while it’s very pleasant as is, it’s much cooler if we press CTRL+I and invert it so it’s that nice pink/purple on black.

3. Now copy the watercolor onto our main canvas and press Ctrl+T to transform it down to a reasonable size. Our aim here is to have it fade to black on the right (so that we can build our HTML later with greater ease). Additionally, we don’t want it too long vertically, either, so it’s best to erase a little of the excess. To do this grab a paint brush and paint in black to just remove the bottom parts.

Note that it’s best to get a brush that has some texture so it’s not obvious that we erased parts. If you scroll down your brush list, there is a brush that comes with Photoshop that looks like the one shown. It’s not a bad brush to use. Of course, you might have some even nicer paint brushes and feel free to use those.

When you’re done, fill in any areas on the right and bottom with black so that the whole canvas is covered by this layer.

4. Now decrease the opacity of the watercolor layer to about 70% and set its blend mode to Overlay. That way, some of the coloring passes through to create a nicer look.

5. Now in a new layer above the watercolor layer, and drawing straight up, make a Linear Gradient going from black to transparency so that afterwards your canvas basically fades to black down the bottom.

6. Next in two new layers, draw a couple of Radial Gradients from white to transparency, one larger than the other. Set these to Overlay and 40% and 100% Opacities for the larger and smaller ones respectively.

Basically, you should be making a highlight on our image to give it a bit more texture.

7. So here’s the finished background. It’s dark, abstract, and quite elegant with the coloring. Of course, pink might not be your particular choice of color usually, and if that’s the case, feel free to add a color adjustment layer on top and use it to adjust the coloring. I kinda like the pink/purple, so am going to run with it!

8. Now we create a new layer and add a "logo". I don’t really have a purpose with this design, so I decided just to put some text in and pretend that’s my logo. Because this tutorial is half Psdtuts+ and then halfNETTUTS, I wrote out a neat little "psd vs net".

The fonts I’m using here are Egyptian505 BT Bold and Egyptian505 LT BT Light (the lighter version of the font is what I’ve used for the ‘vs’).

To make the ‘vs’ bit raise up a little you can use the baseline control in the Character Palette (shown in the second image below).

Finally, I also added a little layer style to the text with a faint Gradient Overlay as shown and a 1px Inner Glow with white.

9. Now at this point, I switched on my Rulers (Ctrl+R) and drew a couple of guides. I divided my page into three columns with lines at 50px, 320px, 610px, 900px. At least those are the numbers I should have used. Looking at my screenshot I just realized my third line is off … d’oh!

Anyways, the point is that I’m defining the space I’ll be placing all me elements in, and if I were to make multiple pages I could use this grid in different ways. As it is, with only the homepage being designed, I’m just going to use those three columns once—a little later on.

10. OK, so now we draw in our first black box. With your rulers and guides still on, create a new layer and draw a Rectangular Marquee (M) going from one side to the other. Fill it with black, then set this layer to 80% Opacity, right-click the layer, and choose Blending Options. Then click on Stroke and add a 1px white stroke on the Outside and set to Overlay. This will give us a really cool border that will make the box look much sharper.

11. Now duplicate the box layer, and using Ctrl+T, transform the box so that it’s the same width but much shorter (as shown below). This will be our navigation box.

Change the Opacity to 40% and the Fill to 50%. This will make our box much fainter and give some depth to the two boxes, making one seem more important and imposing than the other.

This sort of contrast between the two boxes is a great way of setting visual precedence between elements. When the user comes to the page, we want them to see our big message first, and then the navigation bar. By having it faded out we tell the user that the less prominent one is to be looked at second.

12. OK, now we add some text. Again I’ve used Egyptian Light here for the big headline copy (that will be an image in the final HTML) and Arial for the menu items (that will be HTML text links).

Now a word on typography. This design relies heavily on the fact that we’ve used a simple, clean typeface. Having the text nice and large makes it appear very bold, but at the same time because it’s a very thin typeface, it comes out looking elegant.

If you’re looking for a high-end design look, thin, classic typefaces are hard to beat. When I first discovered Helvetica Ultralight, I remember I went crazy designing all these designs that looked really minimal and up-market.

Additionally, this particular font—Egyptian—has a very sharp, slab serif, combined with a sort of squarishness that makes it look quite cool (I think).

There are plenty of other awesome fonts you could use. As a general rule though, you want something more classic looking. Or in other words, unless you know what you’re doing, you’d want to stay away from really weird looking fonts—e.g. something that looks very futuristic. Actually as a good, general rule, unless you’re super confident, it tends to be better to veer towards more ordinary fonts.

Another kind of typeface that would work really well here is something that is a a bit technology-looking like this font that Chris Garrett Media uses. I have no idea what font that is, or what that type of font is called, but it’s pretty neat. Maybe a kind typophile might illuminate us in the comments :-)

13. Anyhow, after seeing Chris Garrett Media‘s site, I decided it would be pretty cool to add a gradient overlay to my type and give it a bit of a shine. So as you can see below, here we’re adding a Gradient Overlay from black to white, faded out a bit and on Overlay mode.

14. Now we can draw an additional big black box for the content area. Actually, you can just duplicate the earlier layer and transform it again.

And that gets us to the point shown in the image below. Looking pretty cool!!

15. Now we add a bit of dummy content in the content box. Here I’ve again used Arial for most of the text, but for the headings rather than use Egyptian, I’ve gone with Georgia. Georgia is not quite as elegant, but is a standard font which means I can make these headings in plain old HTML instead of relying on images (or Flash).

Actually, with Windows Vista’s release there is also another semi-standard font that would work well here called Cambria. But Cambria has some weird rendering problems in Firefox on Macs at certain sizes, so we’ll stick with good ol’ Georgia for the moment.

16. Finally, I created a new layer at the bottom, filled it with a dark purplish color, added a 1px border to the top, and voila we have a footer.

Final: Putting it all together, the site is ready to build.

Create a Dark Themed Web Design from Scratch

1. Now that we know what we are going to make, and the design decisions behind the layout, letâ€™s move onto the design process.

To begin, create a new document. Mine is 1024px wide x 1200px high. Though the main content will be contained in the center 800px, this document size will show how it looks on larger monitors as well. Next, fill our background with black.

2. Now we want to add a stroke and a gradient to the background to give it more depth. Grab your Single Row Marquee Tool and select a row about 400px below the top of the document. Fill your selection with (#1b1b1b). Then make a gradient underneath the stroke. Set your foreground color to (#0d0d0d). Then make a selection 1024px wide x 20px high. With your Linear Gradient Tool selected, make a Foreground to Transparent gradient. Start at the top and end at the bottom of the selection.

3. Now letâ€™s create the header of the design so we know where to place our graphics. Make a selection 800px wide x 225px high. Fill your selection with black. Then make a 1px border on the inside with the color (#0a0a0a). Make sure your Rulers (Ctrl+R) are showing. Then drag a guide out to 512px on the horizontal ruler. Now drag your black header until the middle of it snaps with your guide. This will center your header.

Let’s add an outer glow to our header as well. Set the Blending Mode to Normal, Color to black, Opacity to 50%, Spread to 0%, and Size to 29px. You won’t notice this right now, but later when we add graphics behind the header it will cast a shadow on them.

4. We don’t need a floating header, so letâ€™s add our body below. Make a selection 800px wide and the rest of the height under the header. Fill the selection with black and add an inside stroke of (#0a0a0a). Nudge our body up 1px so that it overlaps the header.

Be sure that the body layer is above the header layer, since we don’t want the header to cast a shadow over the body. Letâ€™s add a 10px Foreground to Transparent gradient with a foreground color of (#0a0a0a) underneath the stroke.

Before we continue, letâ€™s make sure we have our layers grouped and ordered. Place the layers that have your header and body into a group called Body. Then place your background layer, and the layers that have your background stroke and gradient into a group below your Body group called Background.

5. Letâ€™s create a new group called BehindHeader. Place it between the Body and Background groups. Then create a new layer inside this group. Grab your Polygonal Lasso Tool.

Select the triangular areas growing out from the header, and fill them with the color (#151515). The point of this is to create rays of light, so try to picture a focal point behind your header that these are being led to. To make it easier, only do one side of the rays, then duplicate the layer. Then go to Edit>Transform>Flip Horizontal

Now letâ€™s create a Radial Gradient from the center of the ray to the outside. Make it so that it fades into the background. Set your foreground color to white, and your background color to black.

6. To create an effect like the heart logo at the top right of the header, download some splatter brushes.

Let’s review the basic process of creating these graphics. Pick a splatter brush and a color that will fit your design, then brush it onto the canvas. Create a new layer above or below your previous one, depending on which color you want on top, and select a new color. Use another splatter brush and brush it onto the layer. You can also draw shapes, like hearts or circles on different layers as well.

You could use opacities or layer effects to enhance the design. Creating brushes or shapes with the same background color will knock out portions of the design, or you can delete portions of shapes or use masks to keep it nondestructive. Repeat this process until you have the effect you desire.

7. Let’s take a moment away from designing and examine what we have so far. We have a background with a gradient that adds depth to the design. We also have a body and a header with strokes to separate them from the background and each other. We have a set of graphics that are currently placed behind the header to give our design a unique look.

The things we still need are the inside of the header, the title and description, the navigation, the sidebar design, the content design, and the footer.

8. Now that we have the area behind our header finished, letâ€™s work on the header itself. Create a new group above the Body layer and name it InsideHeader. Now that we have our group, letâ€™s duplicate the designs that we made earlier in the upper left, and upper right corners of the header so that we can get the hidden content inside the header.

Place the graphics inside the new group. The problem now is that the layer still shows outside the header, which is blocking our shadow effect. To fix this (Ctrl-click) on the thumbnail for your header layer. This will make a selection of the header. Now all we need to do is click the Add Layer Mask button on ourInsideHeader group so all the contained layers show inside the header. Finally, letâ€™s change the Opacity of the group BehindHeader to 90% so that it appears darker.

9. Letâ€™s place some text on top of the header and inside the header to introduce the site. Create a logo or graphic and place it to the left so that it draws attention to the main attraction area. You can also add a Foreground to Transparent gradient layer. I used (#030a0e) for mine. If you add this, be sure to create a stroke underneath it that is brighter than the gradient. For this I used (#0b1316). This will help to add a transition between the header and the navigation.

10. Make a selection of your header area. Create a new layer effect. Apply the settings shown below. For the Pattern Overlay I used a pattern of a fleur-de-lis I had available. Then create a layer mask, by clicking the Add Layer Mask Button in the layers palette. Be sure to click this with the layer selected. Then draw a radial gradient that goes from white to black. Place it at the top center of the header and allow it to overlap past the top of the document. The effect is shown in the last image below.

11. For the navigation, letâ€™s make a new group called Navigation. Then create a 35px high black bar underneath the main part of our header. Then letâ€™s add a Foreground to Transparent gradient with a foreground color of (#0c0c0c) starting at the top of the navigation. It looks good, but adding a 1px stroke of (#232323) at the bottom will make the transition between the banner and the main body better.

Add some text so that you know how the links will look. I used a basic Verdana 18pt size text with Strong enabled.

12. Now create new group called Date. Create a new smaller splatter effect and keep it within a 100px wide x 100px high area. Then create a new layer above these splatters. Then grab your Rounded Rectangle Tool. Set the Radius to 5px. Then make a rectangle around 50px wide by 50px high. Then add an outer glow with a Blending Mode of Normal and set the Color to black.

You can also use the rays of light you created earlier, and place a smaller version behind your box. Add some text inside the date box so that you know what it will look like. I used 12px Verdana for the month and 24px bolded Verdana for the day.

Add a title and content to the right of the date box. I used 30px Verdana with a color of white for the header, and 12px Verdana (#dddddd) for the content text. I made a sample link with the color (#36ade1).

13. To create the sidebar box use the Rounded Rectangle Tool with a Radius of 10, add a stroke of (#080808) and create two Foreground to Transparent gradients. Place one on top and one on the bottom.

14. Finally, the last step is to create the footer. You can create it with the same technique used for the inside of the header. Create a layer mask on the group so that it stays in a 800px wide x 300px high. I decided to place an image in the top left position. I also created small boxes with arrows to use before links, as seen in the image below. There are also hair line separators between each link. I used a Foreground to Transparent gradient to separate the footer from the main content.

Final Outcome:

We now have a completed dark Web design that is ready to be coded in CSS/HTML. Remember the strategic reasons for placing graphics in certain areas of attraction. Create your own unique awe-inspiring designs that pop with color set against a dark background.

70 Tutorials Using Photoshop To Design A Website

http://creativenerds.co.uk/tutorials/70-tutorials-using-photoshop-to-design-a-website/

J.e.l.l.o

Sunday, November 25, 2012

Sass Design

Thursday, May 17, 2012

Website Initial Ideas

Tutorials Website on Ai/Ps

Create a Sleek, High-End Web Design from Scratch

Create a Dark Themed Web Design from Scratch

70 Tutorials Using Photoshop To Design A Website