Web Design Forum: How to design a website layout in photoshop - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

How to design a website layout in photoshop Rate Topic: -----

#1 User is offline   Ash Scott 

  • Competition Manager
  • PipPipPipPipPip
  • Group: Members
  • Posts: 1,416
  • Joined: 25-May 10
  • Reputation: 53
  • Gender:Male
  • Location:Kent
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 23 June 2010 - 08:26 PM

http://www.adobetuto...wordpress-theme
http://www.adobetuto...ch-in-Photoshop
http://www.adobetuto...-Studio-Website
http://psd.tutsplus....design-with-it/
http://www.psdcore.c...-20-web-layout/
http://www.adobetuto...tfolio-web-page
http://hv-designs.co...folio-layout-6/

Enjoy, feel free to add anymore :)
1

#2 User is offline   THallDesign 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 77
  • Joined: 23-September 10
  • Reputation: 4
  • Gender:Male
  • Location:Niagara Falls
  • Experience:Beginner
  • Area of Expertise:Web Designer

Posted 24 September 2010 - 05:16 PM

Gotta admit I am fairly new, not to photoshop but to coding web sites. How does making a layout in photoshop help?
0

#3 User is offline   Ash Scott 

  • Competition Manager
  • PipPipPipPipPip
  • Group: Members
  • Posts: 1,416
  • Joined: 25-May 10
  • Reputation: 53
  • Gender:Male
  • Location:Kent
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 24 September 2010 - 08:10 PM

you can make the site, then slice it into various image. You then use DIVS (HTML) and Layout (CSS) to position the site as you want it. Basically, you make the site, slice it into different images such as banner, navbar. then code it into a webpage
0

#4 User is offline   Gopher 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 57
  • Joined: 07-October 10
  • Reputation: 0
  • Gender:Male
  • Location:Farnborough, Hampshire
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 21 October 2010 - 10:38 AM

Nice set of links.

Just tried the PSDcore one, or my take on it !

Had to fill in a few gaps myself on how to use gradients, inverse etc but getting there (practice makes perfect i guess!)

Attached File  pssitedraft copy.jpg (464.83K)
Number of downloads: 21

Now onto slicing and coding it .. :shok:
0

#5 User is offline   Gopher 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 57
  • Joined: 07-October 10
  • Reputation: 0
  • Gender:Male
  • Location:Farnborough, Hampshire
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 21 October 2010 - 10:56 AM

Was going to use the PSDcore next tutorial for slicing but have to pay to be member of the site.

Can anyone recommend a good resource or tutorial for slicing for web/css/html please ??!!
0

#6 User is offline   ChrisOliver 

  • Dedicated Member
  • PipPip
  • Group: Members
  • Posts: 119
  • Joined: 14-August 10
  • Reputation: 1
  • Gender:Male
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 21 October 2010 - 10:57 AM

Interesting links. Do you know any good tutorials that good through the coding after you've made a design in photoshop?
0

#7 User is offline   waynede 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 531
  • Joined: 30-April 09
  • Reputation: 23
  • Gender:Male
  • Location:Essex, UK
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 21 October 2010 - 11:03 AM

One of the Mods made a post about taking a photoshop psd and coding it.

Will have a look and see if I can find it.
0

#8 User is offline   Gopher 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 57
  • Joined: 07-October 10
  • Reputation: 0
  • Gender:Male
  • Location:Farnborough, Hampshire
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 21 October 2010 - 11:55 AM

View Postwaynede, on 21 October 2010 - 11:03 AM, said:

One of the Mods made a post about taking a photoshop psd and coding it.Will have a look and see if I can find it.


Pleeeeez!

Thanks!
Steve
0

#9 User is offline   Luana 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 30
  • Joined: 20-October 10
  • Reputation: 0
  • Gender:Female
  • Location:São Paulo, Brazil
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 21 October 2010 - 12:07 PM

Hey Gopher, here's a post about what you want
20+ Best Tutorials to Convert Psd to Html/CSS

There are 20 tutorials that help you to code your PSD.

View Postwaynede, on 21 October 2010 - 11:03 AM, said:

One of the Mods made a post about taking a photoshop psd and coding it.

Will have a look and see if I can find it.

0

#10 User is offline   Gopher 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 57
  • Joined: 07-October 10
  • Reputation: 0
  • Gender:Male
  • Location:Farnborough, Hampshire
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 21 October 2010 - 12:13 PM

that the evenings entertainment sorted!! thanks!
0

#11 User is offline   waynede 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 531
  • Joined: 30-April 09
  • Reputation: 23
  • Gender:Male
  • Location:Essex, UK
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 21 October 2010 - 01:07 PM

Hey Luana that is the one I was looking for.

:)
0

#12 User is offline   Gopher 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 57
  • Joined: 07-October 10
  • Reputation: 0
  • Gender:Male
  • Location:Farnborough, Hampshire
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 21 October 2010 - 05:01 PM

Cheers for this guys,

I just checked out the first two tutorials on this site and have certainly learnt a lot (and a few trick that will save me time!)

One thing I would say .. is he uses border-radius for his rounded corners, and as this doesnt work yet in IE, isnt this rather bad practice???
0

#13 User is offline   Ash Scott 

  • Competition Manager
  • PipPipPipPipPip
  • Group: Members
  • Posts: 1,416
  • Joined: 25-May 10
  • Reputation: 53
  • Gender:Male
  • Location:Kent
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 23 October 2010 - 08:33 AM

Found a very descriptive tutorial on how to slice then cod eyour design...

http://www.youtube.c...159/bsrCPwt-Ue8

There is more than one part
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users