Jump to content


- - - - -

Create a basic website layout


  • Please log in to reply
15 replies to this topic

#1 SwitchFX

SwitchFX

    formerly TeleFarsi_Airlines818

  • Members
  • PipPipPipPipPipPipPipPip
  • 30,764 posts

Posted 18 December 2006 - 06:09 PM

I've noticed a lot of people wanting help in designing their own sites, instead of using free cheap looking ones from the internet.

First of all please start up photoshop 7 or higher


Go to File>New>And enter these specs
Posted Image


When your file opens, click the base layer and pres ctrl+J and it will make a copy. You will end up with something like this
Posted Image


Create a 700px by 30px rectangle at the of the copied layer and press ctrl+J
Posted Image


You will get something like this hopefully in the layers box.
Posted Image


To the exact same procedure to the lower half as you did to the top half.
Posted Image


Now click on the top half layer while holding down the ctrl button. It will be selected and pick the same or different color and press alt+backspace.
Posted Image


Do the same procedure for the bottom half.
Posted Image


Now click the small eyes for the bottom and top layer strips. Click the layer 1 copy and pick a dark color or a lighter one than the strips. And press alt+backspace.
Posted Image


Now click the eyes again for the strips. They should reappear
Posted Image


Create a text box
Posted Image


Input a basic menu system
Posted Image


Center the text
Posted Image


When your're done click the check mark and move the menu using the move tool.
Posted Image


Go to File>Open if you would like to put in an image.
Posted Image


I picked the fs2004.com top banner as an image. Go and click the magic eraser
Posted Image


Get rid of those white corners using the magic eraser
Posted Image


Here is what you should get
Posted Image


Now click the picture layer in the layers box whilst holding down the ctrl button. This will put a marquee around the image. Choose overlay from the layer blending mode, and 19% opacity. Click on the regular eraser and use a soft brush and lightly erase those annoying edges for a soft look.
Posted Image


Your result should end up like this, mine wasn't very good.
Posted Image


Now right click on the layer that houses the top strip and select blending properties, go to overlay
Posted Image


Enter 60% for opacity, overlay for layer style, and 90* as the angle.
Posted Image


Do the exact same for the bottom strip except put the angle at -90*
Posted Image


This is how it should look like, and be your results
Posted Image


Now go and click ok and go and select the slice tool
Posted Image

slice the file to as close as this.
Posted Image


Go to File>Save For Web
Posted Image


You should get a screen like this
Posted Image


Click the Save button, and type in a filename and than click save
Posted Image


Now switch back to windows and you should get files in a folder like this. Images being the images you sliced up and the html file being your coding with the images.
Posted Image


Now click the html file and open it. Walla your website. All it needs is coding.
Posted Image

#2 Manny

Manny

    formerly eee722

  • Members
  • PipPipPipPipPipPip
  • 4,849 posts
  • Location:New York City

Posted 18 December 2006 - 07:35 PM

hot tutorial!

#3 SwitchFX

SwitchFX

    formerly TeleFarsi_Airlines818

  • Members
  • PipPipPipPipPipPipPipPip
  • 30,764 posts

Posted 18 December 2006 - 07:48 PM

? Not familiar with that lingo

#4 ak427

ak427

    Airline Transport Pilot

  • Members
  • PipPipPipPipPipPip
  • 4,035 posts
  • Location:Toronto, ON

Posted 18 December 2006 - 08:39 PM

I can create templates, well, I use too, but I can't code them for beans. :lol:

#5 dolbinau

dolbinau

    Download Manager

  • Download Manager
  • PipPipPipPipPipPipPipPip
  • 16,148 posts
  • Location:Australia

Posted 18 December 2006 - 09:11 PM

SwitchFX, on Dec 19 2006, 11:48 AM, said:

? Not familiar with that lingo
He thinks your tutorial is superb :lol:.

#6 SwitchFX

SwitchFX

    formerly TeleFarsi_Airlines818

  • Members
  • PipPipPipPipPipPipPipPip
  • 30,764 posts

Posted 18 December 2006 - 09:42 PM

Oh well thank you. I've been meaning to do this for years. I had some free time today and got down to work!

#7 SwitchFX

SwitchFX

    formerly TeleFarsi_Airlines818

  • Members
  • PipPipPipPipPipPipPipPip
  • 30,764 posts

Posted 17 January 2007 - 02:21 AM

What in...

I never remember doing this

#8 kewlceo

kewlceo

    Download Manager\Contributor

  • Contributor
  • PipPipPipPipPipPipPipPip
  • 15,877 posts
  • Location:SoCal

Posted 17 January 2007 - 03:37 AM

SwitchFX, on Jan 16 2007, 11:21 PM, said:

What in...

I never remember doing this
LOL. It was just a month ago, were you sipping Martinis? :shifty:

In any case, job well done. :lol:

#9 Magix26

Magix26

    Passenger

  • New Members
  • Pip
  • 5 posts

Posted 17 January 2007 - 11:30 AM

Nice look then !

#10 Captainmk

Captainmk

    Orville Reincarnate

  • Members
  • PipPipPipPipPipPipPip
  • 8,769 posts
  • Location:UK - London

Posted 17 January 2007 - 01:59 PM

Nice tutorial, I might make a web design tutorial too soon :lol:

#11 SwitchFX

SwitchFX

    formerly TeleFarsi_Airlines818

  • Members
  • PipPipPipPipPipPipPipPip
  • 30,764 posts

Posted 17 January 2007 - 07:25 PM

kewlceo, on Jan 17 2007, 12:37 AM, said:

SwitchFX, on Jan 16 2007, 11:21 PM, said:

What in...

I never remember doing this
LOL. It was just a month ago, were you sipping Martinis? :shifty:

In any case, job well done. :lol:
  :P

That explains why half the Bombay sapphire is gone!

:angry:

#12 The Boss.

The Boss.

    Airline Transport Pilot

  • Banned
  • PipPipPipPipPipPip
  • 3,091 posts
  • Location:YMML

Posted 18 January 2007 - 01:01 AM

There's still links to freewebs on your site.

#13 SwitchFX

SwitchFX

    formerly TeleFarsi_Airlines818

  • Members
  • PipPipPipPipPipPipPipPip
  • 30,764 posts

Posted 18 January 2007 - 01:24 AM

Ben., on Jan 17 2007, 10:01 PM, said:

There's still links to freewebs on your site.
He can't remove them. Most if not all free hosts such as freewebs specifically outline in their TOS that removal of links are in violation of the TOS and the account will be shut.

Just get yourself a domain name and get a good host. Use it as a backup. Or if you've got a spare PC at home make it into a makeshift home server. Leave it on all day.

#14 The Boss.

The Boss.

    Airline Transport Pilot

  • Banned
  • PipPipPipPipPipPip
  • 3,091 posts
  • Location:YMML

Posted 18 January 2007 - 02:14 AM

He could. Easily. As far as I'm aware it's not hosted on freewebs. Then he'd only be plaigarising their work. :lol:

#15 The Boss.

The Boss.

    Airline Transport Pilot

  • Banned
  • PipPipPipPipPipPip
  • 3,091 posts
  • Location:YMML

Posted 18 January 2007 - 09:22 PM

Why not design your own?

#16 FSbro

FSbro

    Commercial Pilot

  • Members
  • PipPipPipPipPip
  • 1,180 posts

Posted 19 February 2007 - 07:44 AM

Cool tutorial  :lol: