6 Replies - 4017 Views - Last Post: 15 June 2012 - 04:20 PM

#1 itsjimmy91  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 77
  • Joined: 19-January 11

Bringing a Layout to Life

Posted 12 June 2012 - 05:05 PM

Hey guys,

This is a pretty basic question and will probably come across as completely newbish. I know HTML, CSS and am currently in an internship where I'm working heavily with ASP.NET and SQL so I am learning web development at a rapid pace and am really looking to start to build websites on my own time. The one thing that I am not good with at all is the graphics department. I have Photoshop and have done some very basic things before, but I have some questions.

First of all, say I do create a layout with Photoshop for a website. What's the best way to really... turn it into a website? Do people take pieces of the layout and set them as background images of a div? Or would I be better of setting the layout as a background for the whole page? I'm kind of confused with how this process works. The whole turning it from just an image, into something that works.

Also, if I have Photoshop, should I still look into Fireworks? What am I missing out on by not having Fireworks? Anything?

I've got most of the coding stuff down (at least the basics) .. just looking to expand on my graphic-side knowledge, which is pretty slim at the moment.

Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Bringing a Layout to Life

#2 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 241
  • Joined: 22-November 10

Re: Bringing a Layout to Life

Posted 12 June 2012 - 05:51 PM

There are a ton of PSD to HTML tutorials on this site, you should check it out.

This post has been edited by exiles.prx: 12 June 2012 - 05:51 PM

Was This Post Helpful? 0
  • +
  • -

#3 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6236
  • View blog
  • Posts: 10,782
  • Joined: 28-September 07

Re: Bringing a Layout to Life

Posted 13 June 2012 - 04:00 PM

You're not missing anything by not having Fireworks. I've been doing web design and development professionally for quite a few years and I have never used Fireworks.

If you create a layout in Photoshop (or GIMP), keep it in layers. For example, you have a background image for your bottom layer; you have a separate content background for your next layer; you might have a special menu background on another; menu text on another; a logo on another... and so on and so forth.

When you're ready, start your code. If you have a body background, pull out that layer and save it as it's own file (jpg, gif, png, etc)... for my dork-a-licious example, we'll call it "whoo_background.jpg". In your code - most likely in your CSS - you have this bit:
body {background:url('whoo_background.jpg');}



If the background needs tiled or other adjustments, you'll have to add that bit.

Do the same for your content background. Personally, I'm a fan of a parchment paper look. So say there's a parchment paper thing on that layer, pull out that layer and save it as "awesome_parchment.png" (because parchment has uneven edges, we need a transparent background, so jpg won't cut it). Now back to the CSS:
#content {background:url('awesome_parchment.png');}



When it comes to your logo or other graphics that may need to be easily switched out, don't use it as a background image. So we'll pull that logo out of it's layer and call it "magic_logo.jpg". Then we go to the HTML instead of the CSS:
<html>
<head>.... head stuff ...</head>
<body>
<div id="content">
<img src="magic_logo.jpg" alt="My extra special logo" />
.
.
.
... more code stuffs ...
.
.
.
</div>
</body>
</html>



Does any of that make sense at all?



Side note: Personally, I hate using PSD to create a site. I don't like to split and splice everything into squares. It just makes it all more difficult to change later.

PSD to HTML is akin to tabled layouts. They make me want to scratch my eyeballs out when making edits.
Was This Post Helpful? 1
  • +
  • -

#4 itsjimmy91  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 77
  • Joined: 19-January 11

Re: Bringing a Layout to Life

Posted 14 June 2012 - 05:04 PM

View PostBenignDesign, on 13 June 2012 - 04:00 PM, said:

You're not missing anything by not having Fireworks. I've been doing web design and development professionally for quite a few years and I have never used Fireworks.

If you create a layout in Photoshop (or GIMP), keep it in layers. For example, you have a background image for your bottom layer; you have a separate content background for your next layer; you might have a special menu background on another; menu text on another; a logo on another... and so on and so forth.

When you're ready, start your code. If you have a body background, pull out that layer and save it as it's own file (jpg, gif, png, etc)... for my dork-a-licious example, we'll call it "whoo_background.jpg". In your code - most likely in your CSS - you have this bit:
body {background:url('whoo_background.jpg');}



If the background needs tiled or other adjustments, you'll have to add that bit.

Do the same for your content background. Personally, I'm a fan of a parchment paper look. So say there's a parchment paper thing on that layer, pull out that layer and save it as "awesome_parchment.png" (because parchment has uneven edges, we need a transparent background, so jpg won't cut it). Now back to the CSS:
#content {background:url('awesome_parchment.png');}



When it comes to your logo or other graphics that may need to be easily switched out, don't use it as a background image. So we'll pull that logo out of it's layer and call it "magic_logo.jpg". Then we go to the HTML instead of the CSS:
<html>
<head>.... head stuff ...</head>
<body>
<div id="content">
<img src="magic_logo.jpg" alt="My extra special logo" />
.
.
.
... more code stuffs ...
.
.
.
</div>
</body>
</html>



Does any of that make sense at all?



Side note: Personally, I hate using PSD to create a site. I don't like to split and splice everything into squares. It just makes it all more difficult to change later.

PSD to HTML is akin to tabled layouts. They make me want to scratch my eyeballs out when making edits.


Great info, thank you a ton. I've recently created somewhat of a layout in Photoshop and am looking to turn it into actual code now.

My question to you is... you don't create any type of layout at all? Or do you use something other than Photoshop?
Was This Post Helpful? 0
  • +
  • -

#5 RexGrammer  Icon User is offline

  • Coding Dynamo
  • member icon

Reputation: 182
  • View blog
  • Posts: 783
  • Joined: 27-October 11

Re: Bringing a Layout to Life

Posted 15 June 2012 - 02:29 AM

You CAN make image-less website. Now that doesn't mean it won't have any images, but it just won't rely on the images to be the actual design.

You can develop sites in two ways (more actually, but for the sake of keeping things simple I've kept it only two):

1. By slicing PSD files
2. By creating an image-less site with CSS and HTML

Now with HTML5 and CSS3 it becomes a breeze to create an image-less site, due to the new header, footer, article, sidebar, aside tags.

You don't use any other program rather than a text editor in the latter build method. (I recommend Sublime Text 2)

You chose which method will you apply to your website, just keep in mind:

The thing is with slicing PSD files to create a site:

1. You create a vast number of images
2. Each represents a HTTP request
3. Which in terms increases your website load time

But if you do it image-less, you can create your site and combine all your images into one css sprite, which means only one HTTP request for that sprite.
Was This Post Helpful? 1
  • +
  • -

#6 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6236
  • View blog
  • Posts: 10,782
  • Joined: 28-September 07

Re: Bringing a Layout to Life

Posted 15 June 2012 - 06:41 AM

View Postitsjimmy91, on 14 June 2012 - 08:04 PM, said:

My question to you is... you don't create any type of layout at all? Or do you use something other than Photoshop?


I create full, layered layouts of every site. I use GIMP, which is essentially a free version of Photoshop.

As Rex said, you can create an imageless site. Or, as in my example, it can be crazy amounts of images. I prefer to find a happy medium somewhere in between. Some people extol the the virtues of minimalist design, some people like a lot of color and craziness, some people like everything staunch and professional. A good designer can do them all, because in the end, it's not about what you like... it's what the client likes that lands you a paycheck.
Was This Post Helpful? 1
  • +
  • -

#7 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 241
  • Joined: 22-November 10

Re: Bringing a Layout to Life

Posted 15 June 2012 - 04:20 PM

To add on to what RexGrammer said, I find it much easier to makes changes via CSS rather then images. With images I have to find the PSD (if I still have it), make the change, save and re-upload. With CSS, I just need to find the class or id where the change needs to be made and make the change. This is probably just personal preference, but still something to think about.

Quote

it's not about what you like... it's what the client likes that lands you a paycheck

This quote should be a sticky for web development and design.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1