create a new document 800

8/8/2019 Create a New Document 800

1/27

Create a new document 800800 with a black background, select the color #01afee and create arectangle. Once you have your rectangle press CTRL + T, now rotate your rectangle like this.

Now for this part you need some splatter brushes EITHER search yahoo or goto a site likebrusheasy and download a set, once you have them make some randam splatters over your

canvas, using the colors blue and black.


2/27

Select the type tool and add your site title and slogan.

Now if you have used two colors like mine above for your title then select one of the colors andadd a splatter. If you have used white then you can just use a white splatter, you should have

something like this.


3/27

Select the type tool again and add your navigation, use free transform (CTRL + T) to rotate the

text.

Now im going add 3 sections to my main page which will be news & updates, tutorials &latest work, by the side of each of these 3 sections im going have a different icon, ALL of

which are chosen from adobes custom shapes menu.

Now under each section im going to add some content.


4/27

Once you have your content in place, select a different color, im going to use the same colorgreen i used for my title and add a big splatter at the bottom of the page.


5/27

Here i shall add my footer information.

Now last but not least, add some more black splatters around your content.

When your finsihed you should have something like this.


6/27


7/27

The End Design

Its quite an elegant design, which would probably suit a designer portfolio-type site, but reallycould be altered for all sorts of purposes. It relies on having elegant typography, a structured

layout, and a visually interesting background.

The real power of this design is to show you what can be accomplished by keeping it simple. At

the end of this Photoshop part of the tutorial, Ill show you how we can easily swap backgroundsand fonts and explain why this design works well.

Its a simple structure: horizontal menu, main heading panel, and content area. Although this is a

homepage design, you could imagine an interior page would simply have a different headingpanel and new content area. For the purposes of simplicity, well only be putting together the

homepage design.

Step 1

First of all, create a new document. Mine is 1100px wide x 1100px high. This is so that I cancreate 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 well draw a linear gradientdown using these two colors: #1b204c to #472373.


8/27

Step 2

Now we want a visually interesting background which is abstract enough that it doesnt distractfrom the text. Fortunately, there is an awesome watercolor image available free via GoMedias

Arsenal, click on the freebie section and youll find two watercolors; the one we want is thegreenish one.

Now while its very pleasant as is, its much cooler if we press CTRL+I and invert it so its that

nice pink/purple on black.


9/27

Step 3

Now copy the watercolor onto our main canvas and press Ctrl+T to transform it down to areasonable 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 dont want it too long vertically, either, so itsbest 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 its best to get a brush that has some texture so its not obvious that we erased parts. Ifyou scroll down your brush list, there is a brush that comes with Photoshop that looks like the

one shown. Its not a bad brush to use. Of course, you might have some even nicer paint brushesand feel free to use those.

When youre done, fill in any areas on the right and bottom with black so that the whole canvasis covered by this layer.


10/27

Step 4

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


11/27

Step 5

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

the bottom.


12/27

Step 6

Next in two new layers, draw a couple of Radial Gradients from white to transparency, onelarger 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.


13/27

Step 7

So heres the finished background. Its dark, abstract, and quite elegant with the coloring. Ofcourse, pink might not be your particular choice of color usually, and if thats the case, feel free

to add a color adjustment layer on top and use it to adjust the coloring. I kinda like thepink/purple, so am going to run with it!


14/27

Step 8

Now we create a new layer and add a "logo". I dont really have a purpose with this design, so Idecided just to put some text in and pretend thats my logo. Because this tutorial is half Psdtuts+

and then halfNETTUTS, I wrote out a neat little "psd vs net".

The fonts Im using here are Egyptian505 BT Bold and Egyptian505 LT BT Light (the lighterversion of the font is what Ive 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).


15/27

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


16/27

Step 9

Now at this point, I switched on my Rulers (Ctrl+R) and drew a couple of guides. I divided mypage 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 doh!

Anyways, the point is that Im defining the space Ill 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 homepagebeing designed, Im just going to use those three columns oncea little later on.


17/27

Step 10

OK, so now we draw in our first black box. With your rulers and guides still on, create a newlayer 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 reallycool border that will make the box look much sharper.

Step 11

Now duplicate the box layer, and using Ctrl+T, transform the box so that its the same width butmuch 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.


18/27

This sort of contrast between the two boxes is a great way of setting visual precedence betweenelements. 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 belooked at second.

Step 12

OK, now we add some text. Again Ive used Egyptian Light here for the big headline copy (thatwill 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 weve used a simple, clean

typeface. Having the text nice and large makes it appear very bold, but at the same time becauseits a very thin typeface, it comes out looking elegant.

If youre looking for a high-end design look, thin, classic typefaces are hard to beat. When I firstdiscovered Helvetica Ultralight, I remember I went crazy designing all these designs that lookedreally minimal and up-market.

Additionally, this particular fontEgyptianhas a very sharp, slab serif, combined with a sort

of squarishness that makes it look quite cool (I think).


19/27

There are plenty of other awesome fonts you could use. As a general rule though, you wantsomething more classic looking. Or in other words, unless you know what youre doing, youd

want to stay away from really weird looking fontse.g. something that looks very futuristic.Actually as a good, general rule, unless youre 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 bittechnology-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 its pretty neat. Maybe a kind typophile might illuminateus in the comments

Step 13

Anyhow, after seeing Chris Garrett Medias 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 were

adding a Gradient Overlay from black to white, faded out a bit and on Overlay mode.


20/27

Step 14

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

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


21/27

Step 15

Now we add a bit of dummy content in the content box. Here Ive again used Arial for most ofthe text, but for the headings rather than use Egyptian, Ive gone with Georgia. Georgia is not

quite as elegant, but is a standard font which means I can make these headings in plain oldHTML instead of relying on images (or Flash).

Actually, with Windows Vistas 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 Macsat certain sizes, so well stick with good ol Georgia for the moment.


22/27

Step 16

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


23/27

Ready for Building

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

Alternate Background 1

Now one of the cool things about this design is we can easily swap the background and the

design still looks awesome. Heres Ive swapped it for an image from iStockPhoto calledPassion, with a similar color scheme. Its a very cool 3D rendering of light, and like our currentbackground, it is also abstract and visually beautiful.


24/27

Alternate Background / Colours 2

Here Ive used another abstract image from iStockPhoto called Blue Energy. Because the colorhas changed, Ive also gone through and amended the colors in a few placesparticularly the

textand also added a big glow to the main copy.


25/27

Why itWorks

Now its unlikely youre ever going to have need of this exact designnow that Ive written awhole tutorial on it. So lets talk a little about why it works well, because that will help you use

the principles to create your own unique look.

There are several things that come together to make a design that works here:

1. First, Ive picked really stunning backgrounds. The ones from iStock and the one fromGoMedia would make nice images all by themselves. They are interesting to look at butthey dont fight for dominance. They also all fade out really easily. Photos that fade out

easily are always easier to work with.


26/27

2. Great images are the perfect partner for simple and clean typography. Because the imagesare so lovely, you dont need to do overdo it with the typography. It can just be clean,

clear, and organized.3. Another factor that goes into making this work is that there is plenty of space. With a

complicated background, it would be easy to wind up looking cluttered. So its important

to make sure there is plenty of space between things, and inside the boxes, and so on.Space also is a great way of making a design look more high-end. Nothing screams low-end like clutter.

Of course, there are plenty more things we could talk about like color and precedence, but I think

the main design things you should be looking at here are the typography in conjunction with thebackground. As a final statement to that end, here is a little image that says it all


27/27

Now the HTML/CSS

Now enough of this nambi-pambi Photoshop stuff, lets go do some HTML/CSS! Follow on tothe second part of this tutorial where we build our design into a working Web site over at

NETTUTSWeb Development Tutorials!

create a new document 800

Documents