PDA

View Full Version : Design Questions......How do U do it?¿


africano
05-23-2008, 04:15 PM
Ok Im embarking a a big project, I want to achieve something like this, as I like panoramic photography and I want to design my own site where I can publish my panos as well as a multimedia portfolio of other work.

Im looking on the net to see how people go about designing websites, there seems to be quite a few people who design a layout in Photoshop and then export a html file (after slicing..) and work with that in Dreamweaver.

So what do experts usually do? Which way do you think is the best? Ive started experimenting making a layout in Photoshop, slicing it and opening it in dreamweaver.... Its all good but I dont really understand Because editing the content, for example adding text on to the layout in Dreamweaver messees everything up. So If you use this method does it mean it must ALL be done in Photoshop.........(adding the text,etc....) and once imported in Dreamweaver just work with linking it all together, adding flash content etc¿??

Well I just want some advice so I can get started trying stuff...Please any advice as to what I want to achieve...something similar to this: http://www.madridvirtual.com/
But with more submenus so I can show other work.....

Thanks, and Im sure Im going to be posting on here a LOT more once I start! bye

Death Dream
05-23-2008, 04:41 PM
I design in photoshop and slice it into dreamweaver, text has always been a problem for me but not over coming.

BTW: that site is not firefox friendly lol

~Death Dream~

africano
05-23-2008, 04:59 PM
What about all the sub pages (I mean the links...the rest of the pages of the website) do you design them in photosop and then slice them as well?¿? And what do you do with the tex? Do you have to work on the layout in photosshop everytime u want to add or modify text??

domedia
05-23-2008, 05:33 PM
I design in Photoshop, then only slice and make the graphics I would need, images and background images. Then I code the website and use the graphics made from Photoshop.

Ricky55
05-23-2008, 06:06 PM
Same here, or I sometimes use Illustrator depending on the complexity of the site. Illustrator is also good if you are using Flash.

Death Dream
05-23-2008, 06:19 PM
I build everything in photoshop till I get the index page done, including text (news posts and whatever).

The only reason I add text to my photoshop design is so I can tell what everything will look like and what font colors look best. Of course nothing I do in photoshop is final, it's more of a template on where to begin.

Most of the time I don't have text in my graphics after slicing away. If I need text above a picture I just make the graphic a background and lay out my text.

~Death Dream~

Andromeda
05-23-2008, 07:45 PM
I design my sites in Fireworks (just to be different from the rest of you! :-D ) and then create the graphics from there. I create the site by coding it. I have no idea what slicing is - I've never used it :shock:. Sounds as though it takes out some of the coding work of creating a web page. Not sure I'd want that though. I need all the coding practice I can get!

domedia
05-23-2008, 08:06 PM
I have no idea what slicing is - I've never used it :shock:. Sounds as though it takes out some of the coding work of creating a web page. Nope, that is exporting from Photoshop to html.. somehting I would discourage anyone from doing :)

What we meant about slicing is that we create a full mock up of the site in Photoshop, a complete visualization of how the site is going to look, and then from it slice out the images and background images we need that we save as jpg or gif images. Then when coding the page, we use those images in HTML and the background images in CSS.

Andromeda
05-23-2008, 08:12 PM
Nope, that is exporting from Photoshop to html.. somehting I would discourage anyone from doing :)

What we meant about slicing is that we create a full mock up of the site in Photoshop, a complete visualization of how the site is going to look, and then from it slice out the images and background images we need that we save as jpg or gif images. Then when coding the page, we use those images in HTML and the background images in CSS.

Sounds as though I'm doing exactly that then! And to think, I've been slicing all along and I never knew it :grin:

domedia
05-23-2008, 08:22 PM
it's all just semantics ;-)

Internally where I work we call it 'breakout'.

..and no, I don't work in a prison ;-D

Ricky55
05-23-2008, 09:01 PM
slicing from Fireworks doesn't have to mean exporting HTML, you can just export the images for use with a CSS based design.

I tend to use Fireworks for this very purpose. I get the design I want in Photoshop or Illustrator flaten the design and then bring into Fireworks as a png for slicing and optimising images.

mangofreak
05-24-2008, 02:42 AM
Fireworks is my favorite tool for designing the layout and when I'm ready I take only the images and background to work with in DW. The rest is coding.

Putting the puzzle together is the fun part.

Corrosive
05-24-2008, 09:42 AM
I work with my brother who has a better eye for design than me. He draws up what he wants the page to look like in Photoshop and then I have to spend 20 mins explaining why it needs to be completely reworked to make it work as a website. :wink: Photoshop is great to visualise a page but then take each main element and save them as gifs or jpegs to rebuild it in DW. The main body of your text must be created as html in DW or search engines wont find you.

Death Dream
05-25-2008, 05:35 PM
it's all just semantics ;-)

Internally where I work we call it 'breakout'.

..and no, I don't work in a prison ;-D

Hahhaha clever!

~Death Dream~

africano
05-26-2008, 02:55 PM
Ok...not sure Im understanding....In Photoshop most of you seem to build the Website layout (How it looks) and then take the images from this payout to Dreamweaver and code.
What about if you have menus with dropdown buttons etc. How do you do these (I mean the images because I suppose that the dropdown feature is coded in Dreamweaver)

** I want to to make My onw website, Ive started working in Photoshop with the layout....But I want to get the procedure right....**

Another thing, can somebody reccomend a Book that I can buy which will help me out, as well as any free tutorials that can guide me.
I want to use my photoshop layout and get something similar to this other site:
http://www.madridvirtual.com/

How would you rate the dificulty of achieving a site like this?
Thanks, see u around here for sure!
Congrats on a great forum!

Corrosive
05-26-2008, 03:19 PM
How would you rate the dificulty of achieving a site like this?


That depends on how much spare time you've got. If you have only just started out then you are aiming pretty high and probably got a bit to learn. The CSS tutorials on this site are pretty good and helped me get started. My one piece of advice is to use the 'code' view in Dreamweaver to see what happens to the code every time you do something in 'design' view. It will help you to fix bugs later. Good luck with your project and let us know how you are getting on. :-D

africano
05-26-2008, 04:55 PM
Thanks corrosive.....Ive had a look at ure site and something like that is what Id like to achieve. The panoramic content of the site is no problem as I know how to do that (at least I think I do...) Its well.....all the rest.
Im not an absolute begginer and I think I can say I know somethings and I usually manage with peoples help or tutorials....
Its Just the getting started..I would like to develope a work flow and get it right from the begging.... COULD you tell me the steps more or less which you carry out for designing and outy of curiosity how long did it take you to get that site done?


Cheers

Corrosive
05-26-2008, 05:46 PM
Thanks corrosive.....Ive had a look at ure site and something like that is what Id like to achieve.

That's funny I was just thinking what a mess it is at the moment :oops:

Have a look at http://www.johntuckeronline.com as that is a site we are designing for a friend who is a photographer and music journo. To be honest it takes a lot of perseverence, angry moments and dissapointments to even get to the stage we are at now. I have been using DW for about a year and my first few sites were terrible. You sound a bit like me in that you need a 'workflow' and to be organised and that can stand you well but just read as much as you can, play as much as you can and for christ's sake, don't use tables for design.

You won't be able to achieve very much overnight. I can help you a bit if you get stuck. Do you have a layout jpeg for your idea you can post?

africano
05-26-2008, 06:07 PM
Ok I will read a lot and look for tutorials. Well Ive just done a real quick index page layout. But its a Basic look.... Ive got a top header with the menu (Some of these may be dropdown menus -- Portfolio --for example.. Then where Ive put the LOGO text would be where I would put my logo(Once Ive designed it) And the white area would be the content area, Where I would have the panorama viewer (Either Flash or Quicktime). The white area Ive tried to separate As on area is for the viewer the area to the right for a map and the area Below both of those would be Text area.

I like what youve done in that website youve shown me......The top menu and then on the left there are other links to interesting areas: Photographs, music interviews...its a good layout, I might oprefer something like that rather than dropdown menus....

Ricky55
05-26-2008, 06:20 PM
Africano that doesn't look bad for an early attempt, believe it or not using CSS as the design stands you would probably only need two images for the gradients, the rest would be created with CSS.

If you can afford $25 dollars for one month I think you'd get so much out of one of Lynda.com training courses, you need to learn CSS and how you use CSS with Dreamweaver.

Take a look at this

http://movielibrary.lynda.com/html/modPage.asp?ID=502

I bet if you took this course you'd be flying.

Corrosive
05-26-2008, 06:32 PM
If you can afford $25 dollars for one month I think you'd get so much out of one of Lynda.com training courses, you need to learn CSS and how you use CSS with Dreamweaver.



That's good advice :-D

africano
05-26-2008, 06:38 PM
Pufffff....cant really afford that at the moment..I just got let go at work cause they closed the office down...I would really like to get a site up and running (I know its impossible over night...but would like to get Something up..)....Even though Its something really simple with little content...but if I could get a Skeleton site, Like Corrossives Ide be happy...help to achieve that goal would be appreciated:-D

Corrosive
05-26-2008, 06:44 PM
Sorry to hear about your job dude. That sucks :( . I have sent you a Private Message. Read that and I'll give you some help.

africano
05-26-2008, 06:47 PM
Cheers corrosive...I appreciate the Help and Ill definetly contact you, as well as posting on this Forum....Dont worry bout the Job, was working for a big Building promoter here in Spain but at the moment theres a crisis in the market (Nobodies buying houses here anymore.....) Doesnt really matter cause I didnt like the Job and didnt like the company or its policies...PolarisWorld arent my favourite people.....:x

Talk soon, I have to head off now but Ill contact you when Ive done a bit more on the design, cheers and thanks a million!

Ricky55
05-26-2008, 07:39 PM
bad times when you can't afford 25 dollars or £12.

You'll still be OK there are loads of good free tuts its just that Lynda course would have got you there quicker.

Let us know how you get on.

africano
05-29-2008, 11:16 AM
Well....more or less I think this is how I want my Index page to look.... I need advice and Opinions....In the White area thats left there is going to be a Panorama(Either a Flash, Java or Quicktime Viewer)....... Corrosive, I nicked your Buttons style from the site u showed me (If you wish these can be changed as Ill understand if you ask me to change).

Im going to upload an image of it here....The upload limit wont allow me to show u a high quality image but I hope u can all more or less see it.

Cheers.

domedia
05-29-2008, 01:21 PM
The upload limit wont allow me to show u a high quality image but I hope u can all more or less see it. Because we can't host everyones images :-) Upload it to your own server or any of the free image hosting websites and provide a link here.

Rob_Che
05-29-2008, 03:00 PM
hmmm...
Your site is very similar to Corrosives... (http://www.johntuckeronline.com] (http://www.johntuckeronline.com))
Can you not change it around a little ?

africano
05-29-2008, 04:42 PM
Your right, it is very similar. But it was like that before seeing his example...Although the Buttons Are his, from that example.... I suppose I could change those....Any other advice, suggestions...Next steps,etc would be greatly appreciated...:)

I mean what would go next?...Should I design the rest of the sections (pages of the site still in Photoshop?....
*Info
*Portfolio
*Contact
*ETC

Rob_Che
05-29-2008, 06:41 PM
Get one page working and set up links to other pages.
Then you can duplicate the skelatal file add the content... that's what I do.

So, do you have a page working yet or still just an image ?

Corrosive
05-29-2008, 08:39 PM
hmmm...
Your site is very similar to Corrosives... (http://www.johntuckeronline.com] (http://www.johntuckeronline.com))
Can you not change it around a little ?

Hi all

Not overly concerned about Africano borrowing an idea here and there because I think we all pick up on stuff we like on the web (whether deliberatley or not) but adapt it to suit our own tastes and style.

I hope you are all going to visit John's site regularly! He is a very talented writer and thoroughly nice bloke. :wink:

Africano, were you going to buy some webspace or go 'free'? (can you still get free webspace nowadays??).

africano
05-30-2008, 11:28 AM
HUmmm, no, at the moment I only have the Photoshop file.....What do I do now? Should I slice it up so I can work with it in Dreamweaver...would that be the next step? Thanks for the patience!:-D

Corrosive
05-30-2008, 12:13 PM
HUmmm, no, at the moment I only have the Photoshop file.....What do I do now? Should I slice it up so I can work with it in Dreamweaver...would that be the next step? Thanks for the patience!:-D

From the practical side, try slicing up all the elements of the page and rebuilding it in Dreamweaver and see how you get on.

I do think you need to work out exactly what your site layout will be and what you want to achieve. I.e. Size of site, how many pages, what is your main content going to be etc. These will all have a bearing on the site design you choose overall.

For example, on John Tucker's site he wanted a simple menu across the top and then we suggested that his main content (or, what he does for a living!), band interviews, photography and the 'about me' would be nice to have as the graphic buttons down the side. So the content and focus has driven the design.

Have a good think about it. ;-)

domedia
05-30-2008, 05:40 PM
From the practical side, try slicing up all the elements of the page and rebuilding it in Dreamweaver and see how you get on. Keep in mind that some of the colors and layout can be done in CSS without the use of images. Slice out images you need that are part of the content, and images that are needed for background images. If a background image is supposed to tile on the x or y axis, only a slight portion of it is needed of course. If you use a graphical header, look into using an image replacement technique so you don't compromise your semantic markup ( the h1 )

africano
06-02-2008, 10:36 AM
Ok, well Im now trying to design the rest of the website....Im doing the Photography page, and Im having some problems.

**Im thinking of haveing the typical Flash viewer with a Main frame displaying the image and below it small frames with the rest of the images. Do I design these in photoshop or would it be Importing this flash into dreamweaver??

Edit** Here are links to two images, the INDEX and the PHOTOGRAPHY page. What I mean is do I design the frames, next/Prev buttons etc or is that all flash which is imported once working within dreamweaver?
http://i301.photobucket.com/albums/nn58/africano1985/index_page_layout.jpg
http://i301.photobucket.com/albums/nn58/africano1985/elchevirtual_fotografia.jpg

Rob_Che
06-02-2008, 12:58 PM
Have you uploaded what you have already done ?
I'd be interested to see the layout you've done...
and then Jumping straight to a flash gallery - that's the spirit !

domedia
06-02-2008, 03:06 PM
It's done in flash not PS

africano
06-02-2008, 03:08 PM
Im sorry for all the continuos questions...but bare with me please..... Ive been looking at some tutorials on the net...I have now designed layout for all my pages in Photoshop (Most of them are preety similar to eachother). I have sliced up the Index layout and imported into Dreamweaver.

I have found a tutorial about how to make Template (I think this is making a skeleton so you can add more pages to the website) from the main page in dreamweaver: My question....Do I use this method and make the rest of my pages like this or do I slice up the rest of the PSD files and import those into Dreamweaver?

**Edit....my problems are now...In the tutorial, after importing the psd layout into dreamweaver, the guy has an image which is the Main content area....To add his own content, he deletes this image and inserts a div tag with a css rule so he can add content to this area. My problem is that my content area which is also an image sliced in Photoshop has bevels and reflections......If I delete it I loose these effects.... Hope you understand me.... Would it be possible to only delete the middle of this image and maintain the frame with the effects??


Thanx.

Answer 4 Corrosive: Hopefully I will be able to buy some hosting to host the site (dont know any free ones...)

domedia
06-02-2008, 03:59 PM
Slice the top part of your box as a top image
slice somewhere in center for the box so you can tile vertically, y axis, with css, and then include the last 2 bottom corners in one graphic at bottom

Corrosive
06-02-2008, 04:24 PM
Have you uploaded what you have already done ?
I'd be interested to see the layout you've done...
and then Jumping straight to a flash gallery - that's the spirit !

Yes indeed, that is brave. Try this...

http://www.airtightinteractive.com/simpleviewer

We use this basic software for galleries now and again and you'll have something in place long before you can learn how to build a picture viewer with Flash. I think it does what you describe...look at rioportrait.co.uk to see it in action. You can style the colors etc. to match the main theme of your site and then just link your site buttons into it.

Hope this helps.

africano
06-02-2008, 05:31 PM
**Ok, Domedia Im sorry but I dont understand your instructions? Can I not just slice the area I need to make editable? Like for example the pink rectangles Ive colored in Photoshop to show you??

***Ive tried this, and then applied a div tag (was in the tutorial Im following) to change the height and width and top padding....But if I slice these out it doesnt work the same as if I dont....

http://i301.photobucket.com/albums/nn58/africano1985/slice.jpg

Corrosive
06-02-2008, 05:59 PM
**Ok, Domedia Im sorry but I dont understand your instructions? Can I not just slice the area I need to make editable? Like for example the pink rectangles Ive colored in Photoshop to show you??

***Ive tried this, and then applied a div tag (was in the tutorial Im following) to change the height and width and top padding....But if I slice these out it doesnt work the same as if I dont....

http://i301.photobucket.com/albums/nn58/africano1985/slice.jpg

Hi mate

I think you are trying to run before you can walk.

I might get shouted down for this by some of the more experienced designers here but go and research two and three column layouts with navbar, banner and footer. Don't worry about the images for now, just colour the elements (divs) differently so that you can tell where they are when you preview in your browser. This will teach you a lot more about CSS than trying to cram your design into various divs on the page. Judging by your design ideas you will need a two column layout (as we have used for johntuckeronline.com).

Ricky55
06-02-2008, 07:25 PM
I agree with Corrosive, you'll only end up pulling your hair out. Doing a few tuts get familiar with the concepts and then have a bash at your design.

domedia
06-02-2008, 07:52 PM
Can I not just slice the area I need to make editable? No it doesn't work like that. I think you need to understand CSS before you can slice it out for a CSS layout. You can slice the rectangle as a background for a DIV, but it's going to be very limiting.
Try some of the tutorials here:
http://www.adobe.com/devnet/dreamweaver/

Corrosive
06-03-2008, 07:14 AM
You can slice the rectangle as a background for a DIV, but it's going to be very limiting.


You could always have the centre 'box' in your layout as a scrolling div but, again, you need to understand CSS to do this.

africano
06-03-2008, 12:27 PM
Ok, thanks for the comments. Your all right, I am probably trying to go too fast... Thanks for the tutorials Domedia...Ive had a look at some and Ive followed your advice Corrosive and done a tutorial on a basic website with tables with navbar, banner and footer (using css to format text, and navigation)....But Im afraid i still dont know what I have to do or how to do it to apply all this to my design.

Where Iam..*Ive designed all the website in Photoshop.
*Sliced the Index page and imported it into Dreamweaver
*I now have my index page in dreamweaver with all the separate parts: Buttons(for links) graphics, content areas, etc (all the sliced items from my psd design.

Now what Im thinking is that I can use css to format the text, navigation, etc in my site. BUT my 1ST problem here is that I dont know what to do with the Content Area Ive sliced in Photshop, as this area is an image and cant be edited. I know Domedia has tried to explain (Slice the top part of your box as a top image
slice somewhere in center for the box so you can tile vertically, y axis, with css, and then include the last 2 bottom corners in one graphic at bottom) what I should do but I dont understand....

How I understand it is once I have this index page working, with css styles to format text, nav and layout and can then make a skeleton of the rest of the site.... Anyways I hope some of what ive said makes sense and I hope you can undesrtand my issues. **Another thing..Please dont get impacient with me!! I can understand that happening though...It might seem that Im a bit annoying, but I assure you its that Im eager!
Cheers
EDIT: Here is a video tutorial Ive found on the net, this is where Iam at the moment, importing the photoshop sliced into dreamweaver. Now one more question.. Would the next step be importing this into dreamweaver(like the guy in the video tutorial) or would it be to make a css layout/structure in dreamweaver AND THEN import the slices¿??

Corrosive
06-03-2008, 01:10 PM
Ive followed your advice Corrosive and done a tutorial on a basic website with tables with navbar, banner and footer (using css to format text, and navigation)....But Im afraid i still dont know what I have to do or how to do it to apply all this to my design.

Hi Africano

Don't worry about asking questions as we have all been there and if people are happy to help then they will.

OK, DON'T USE TABLES for design. Build your two or three column layout using only CSS. It's good that you have started to use CSS to style nav and text but it is so much more powerful than that and you can construct a whole site layout with CSS and not a table in sight. The beauty of this is that, if you put an image as a background in a div then you can put html text over the top.

Do a search for two and three column layout tutorials with pure CSS.

I could send you a demo but you need to mail me at info@corrosiveonline.co.uk as I can't do much through this forum.

Don't worry your eagerness will pay off in the end.

africano
06-03-2008, 01:20 PM
http://www.vtutorial.com/videos/Adobe_Dreamweaver/Import_PSD_Into_Dreamweaver_and_Build_Website
Link to video tut.

Corrosive
06-03-2008, 02:09 PM
http://www.vtutorial.com/videos/Adobe_Dreamweaver/Import_PSD_Into_Dreamweaver_and_Build_Website
Link to video tut.

I've just watched 7 and a half minutes of that with morbid fascination. the same reason I watch F1...for the car crashes. Please don't follow this tutorial it is piss poor. :confused:

Don't worry about the web design or photoshop for the time being. Just learn how to get divs positioned on a page and centred to make a website shape and then use that knowledge to start to apply it to your design.

Try reading this...

http://www.digitalfamily.com/dreamweaver/css-two-columns.html

This is what you'll need (with some teaks) for your layout.

africano
06-05-2008, 10:35 AM
Hi corrosive. Thanks. Im going to do as you say and do a search for two and three column layout tutorials with pure CSS. Ill also email you for the demo and help. Here is a jpeg of what I think my layout has to be, can you have a look and correct it if its wrong. Im gonna continue doing some research and Ill be in contact, cheers.

http://i301.photobucket.com/albums/nn58/africano1985/csslayout.jpg

The green outer div is the container div which contains all the other div tags.


Africano.

africano
06-05-2008, 11:40 AM
Once I have a CSS based layout for my site. I can then start inserting my background images from the photoshop layout I made and sliced, right??

Now this to me seems imposible because there are loads of images,...I mean my top bar is made up of various small segments(imgs), the sidebar as well, etc, etc...How is this done¿?¿

domedia
06-05-2008, 12:51 PM
How is this done¿?¿ A great way of learning is finding websites and look at the source to find out how they did stuff. Personally I do this almost every day.. but I also eat client side code for breakfast/lunch/dinner :)

Corrosive
06-05-2008, 07:09 PM
I also eat client side code for breakfast/lunch/dinner :)

Brown sauce or red??

Corrosive
06-10-2008, 07:25 AM
Africano, check your e-mails. :grin:

davidj
06-10-2008, 08:14 AM
but I also eat client side code for breakfast/lunch/dinner

you can almost use a food analogy to describe serverside code except you have to add a tea spoon full of broken glass and your there!

Corrosive
06-10-2008, 08:17 AM
you can almost use a food analogy to describe serverside code except you have to add a tea spoon full of broken glass and your there!

Mmmm. Sounds like the menu in our work canteen :wink: