Web Design to Web Programming Functioning Question

Lets say I make my User Interface/Web Page in Photoshop.

How do I use that picture as my webpage?

Or is it just a reference on how I want it to look and I still need to code everything from scratch?

1 Like

IMHO, it’s just a reference, code it from scratch.

There are several reasons such as speed optimization, “scrollability”, load times, Being able to click on elements, Being able to change and add on to your website being able to link to other pages, lots of things other users will probably explain better than me. But basically, I recommend coding it.

2 Likes

In your webpage, include this as the CSS:

body {
    background-image: url("thewebsiteforyourimage.com/yourimage.png");
}

And include this in your actual webpage:

<head>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

The links will depend on where you choose the image, so just replace my example URLs with yours.

2 Likes

Thanks, but now to my original question. How does it become functional? Do I write the html to make everything clickable? Wouldn’t it just be easier to write everything else from scratch then?

3 Likes

Yeah, it would be if there are scrollable/clickable elements. Also would improve things for people going on the website using Phone/Tablet/Pc Etc. Also, a better app for Prototyping than PS is Adobe X.D.

BTW Most Likely you will need to use HTML and CSS Not just HTML. If you want to go more advanced maybe using SASS and BS, along with JS if you want to get ‘Really’ Complicated.

What does the website look like? Can you link the image so we can all see it.

2 Likes

Just use JavaScript, or add some of that more CSS in there. The more you learn, the more better you can make your webpage :slight_smile:

1 Like

That is one way to do it.

That is another way. You choose which you want to do. Personally, a simple on-color background is best and easiest to use with.

What do you want to be clickable?

Yes, I would like to see this so i could also help you.

You don’t JavaScript pending on what you’re doing. A button for example doesn’t need JS, and is also clickable. It just depends.

1 Like

In the old days when tables were still widely used for layout and screen sizes were more predictable, (800x600, 1024X768) it was common for designers to create a full page layout in PS and then slice it up to fit the containers. Obviously, today we have no such luxury as fixed sizes so a full page layout sliced up is pretty much out of the question.

Use the layout design as a reference only, and adapt it to an HTML/CSS layout so it is responsive and can scale to fit any device.

3 Likes