Berokka

Hi

I have been freelance designing for couple years and going "pro" this year. Means Im starting a company.

I made a timelapse video of making web design template with photoshop. I would like to know what do you think?

http://www.youtube.com/watch?v=OaXVGpg42Dc

- Berokka

Fireproofgfx

I think it is a great timelapse video. Simple design yet very nice looking! I picked up some cool techniques like adding the rounded drop shadow to the slide show image area. Good job.

MacK

Neat video.

mjrzasa

That was awesome. I'd like to be able to see some techniques more in depth as well. I'm curious, do you just design or can you actually develop everything you designed into code and make get the website set up, or what do you do?

Phreaddee

Interesting video, yet it still confuses me, to this day, why you need to “design“ a site in ps in the first place. Isn't that essentially double handling?

Surely it makes more sense to scribble out a basic design on paper (5min)
Something like “ok we have a header and footer full width. (dark grey) Simple nav under the header, centred content in a wrapper. Lets put under that a slideshow, Then two columns of content, followed by another section, maybe a hero shot from a gallery, and a bit of a live feed from our blog, facebook, et al“
Probably take even less than 5min.

Then jump into your editor of choice, pump out a basic html wireframe, and a rudimentary css. Prob 15-20min top.

All that fluffing and modifying and “styling“ that you did with ps, do so with your css.
You'll only need to go into photoshop to resize your images for the slideshow (which by now you would have the scripts for to implement, and know exact sizes of, so unlike ps comps would actually function and not be static) logo and any other assorted assets.
By lunchtime you'll have a pretty sweet template, which you can then show your client, or implement straight away into your cms of choice.

Before css was any good, sure, but nowadays you can do all you did in ps with css alone...
It just seems such an old technique to me.

__________________
if (headhurts == "possibly") {
alert ("keep going!");
}
else if (headhurts == "yes") {
alert ("go to sleep");
}
else if (headhurts == "damn !@#$ mofo scripts...") {
alert ("give up and have a beer!");
}
else {
alert ("watch TV");
}

mjrzasa

I'm pretty new, but to me it is much easier to make changes in PS/Fireworks and see how it'll look compared to HTML/CSS and you can just cut and save the images and use them for the page instead of having to do a ton of CSS for each thing. I do not know if that is correct way to do things, but that's what I thought.

Also, would you really be able to do all the code for that in 15 min? O_o

Phreaddee

Yeah thats a pretty lazy way to do it, not to mention the slice to html feature in ps outputs horrendous code (hoping u dont use that) but really cannot see how for instance if you had a large layout and had sliced it in ps, showed the client, who loved it but wanted the bg a drastically different colour, that going back to ps, changing the background, reslicing, and reloading all the images is “easier“ than just changing background-color:#666; instant . Or if thats too much #999; instant. Personally id prefer to make a site with a “ton of css“ that is infinitely flexible and no images, over basic, autogenerated css and a “ton of images“ inflexible slow loading and well like a site from the late 90s...learn css inside out for your own good.

I did say a wireframe and rudimentary css, but yes, without all the bells and whistles...its a pretty simplistic layout.

__________________
if (headhurts == "possibly") {
alert ("keep going!");
}
else if (headhurts == "yes") {
alert ("go to sleep");
}
else if (headhurts == "damn !@#$ mofo scripts...") {
alert ("give up and have a beer!");
}
else {
alert ("watch TV");
}

Fireproofgfx

Phreaddee, I always love your input on this forum, you are always correct and you are very knowledgeable.

I myself haven't learned all of the ins and outs of using CSS to do the things this gentleman was doing in PS, so I to design everything in PS (I do not slice it up though). I hope to one day be able to do it like you stated on first comment.

Phreaddee

Haha, thanks man, altho i wouldnt say always correct! Im still learning too...
Have had many put me in my place before, i can tell you now!
All it takes is learning and practice, every day, and once youve built enough sites the html structure is the easy bit. You can usually just look at a layout and have a pretty good guess of how it will/should/could be structured. Css is the killer, deceptively simple to begin with, but can get very tricky...
12months of solid work and youll be fine...

__________________
if (headhurts == "possibly") {
alert ("keep going!");
}
else if (headhurts == "yes") {
alert ("go to sleep");
}
else if (headhurts == "damn !@#$ mofo scripts...") {
alert ("give up and have a beer!");
}
else {
alert ("watch TV");
}

mjrzasa

So you really think it is bad practice to use Fireworks and Fillet a nave bar to make it round then save the nav bar and insert it in html as:

.navbg {margin:0 auto 0 auto;background-image:url('images/navbar.png');width:770px;height:50px;}
.nav {font-family:KodchiangUPC;font-size:40px;}

<div class="navbg">
<div class="nav">
<ul>
<li><a href="index.htm">home</a>
<li><a href="aboutus.htm">about us</a>
<li><a href="properties.htm">properties</a>
<li><a href="contactus.htm">contact us</a>
</ul>
</div>
</div>

Rather than going into css and doing something like:

.nav {margin:0 auto 0 auto;width:770px;height:50px;;font-family:KodchiangUPC;font-size:40px;}

<div style="background-color:#666;border-radius:5px;">
<ul>
<li><a href="index.htm">home</a>
<li><a href="aboutus.htm">about us</a>
<li><a href="properties.htm">properties</a>
<li><a href="contactus.htm">contact us</a>
</ul>
</div>

EDIT: Do you think if someone were to design a site in all CSS and same thing in all images, would you be able to tell a difference? In Load time? Will Images all be the same/complete with CSS?