/    Sign up×
Community /Pin to ProfileBookmark

Web design – is this possible…..

Copy linkTweet thisAlerts:
Jan 26.2007

Hi,

[B]I’ve been given a design for a website, as a photoshop graphic, and asked to if there’ll be any problems making it in html/css.[/B]

This is the graphic [URL=”http://www.egton-education.com/images/websitedesigns/4.jpg”]http://www.egton-education.com/images/websitedesigns/4.jpg[/URL]

I would have thought it was not possible, especially the logo at the top having a transparent background, with a shadow.

And what about the boxes below the text, how could this be implemented?

This is not work I’ve been actually asked to do, but any advise/opinion would be gratefully recieved.

Andy

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@HDCJan 26.2007 — Hey Andy,

If you have Adobe Photoshop you could take the jpg and slice it and let Photoshop create the code for you. Just becarfull you slice it right to allow the design to flex with the text content of the page.

Aaron
Copy linkTweet thisAlerts:
@KDLAJan 26.2007 — I don't see it as a problem. Nested divs, with some z-index styling should work fine.

Here are some resources that might help you:

Boxes with rounded corners: http://alistapart.com/articles/customcorners/

Layout: http://glish.com/css/

Z-index: http://developer.mozilla.org/en/docs/Understanding_CSS_z-index
Copy linkTweet thisAlerts:
@CentauriJan 27.2007 — I also don't see it as a problem. This layout should be able to be made "fluid" to stretch to suit different screen sizes. BUT you will need access to the original .psd Photoshop graphic that has the various elements in separate layers. DON'T slice-and-dice as has been previously suggested - you need the graphic elements to allow free positioning.

There are also some other articles, including drop shadow ones, on the "A List Apart" site KDLA linked to above.

Cheers

Graeme
Copy linkTweet thisAlerts:
@Andy_BaptisteauthorJan 29.2007 — [B]Thanks for all the advice, it does seem more or less possible after all,

although the graphic at the top does look pretty poor in my attempt at this.[/B]

I had to do it as a gif so that the webpage background could show through, but the drop shadow went very jagged and because you can't have that many colours in a gif the logo is very grainy.

Seems a choice between having a flat a blackground or more "photographic" logo.

[U]Thanks again for all your advice.[/U]

Andy
×

Success!

Help @Andy_Baptiste spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...