• 0

From Design to the Web..


Question

Alright, so I have a few questions..

I haven't done web designing in forever. I never coded my own designs, I had a friend who took the PSD and made the site from that.

How should I go about making it into code? Should I use Photoshop, slice the image into smaller ones, and then saving it as a web page?

 

I tried a bit of Googling, and couldn't find exactly what I was looking for.

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0

Your best off looking through some basic HTML and CSS lessons (try somewhere like HTML Dog).

Most of the heavy lifting, graphically, on site these days is done with CSS (you no longer need to use images for rounded corners, gradients etc). Anything that claims to "Save as a web page" will produce absolute crap code and do nothing but hinder your searchability, usability and performance.

 

 

Link to comment
Share on other sites

  • 0

Your best off looking through some basic HTML and CSS lessons (try somewhere like HTML Dog).

Most of the heavy lifting, graphically, on site these days is done with CSS (you no longer need to use images for rounded corners, gradients etc). Anything that claims to "Save as a web page" will produce absolute crap code and do nothing but hinder your searchability, usability and performance.

 

 

This x 1,000,000. I would also recommend heading to mozilla's Developer Network. I learned CSS from there.

https://developer.mozilla.org/en-US/docs/Web/CSS

 

Also, look for CSS3 effects instead of using .gif and intensive JavaScript. Animate.css is a good candidate for learning and building quickly stuff: Pretty simple too!!

https://daneden.github.io/animate.css/

 

And for building responsive sites, learn a bit about Flexboxes

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Or use a css framework like bootstrap: http://getbootstrap.com/

Much has changed bro...

 

  • Like 1
Link to comment
Share on other sites

  • 0

 

Much has changed bro...

I started in this business in '99 (the year, not the ice cream) and it's frankly amazing how much has changed since then. The flexability and power we have now is awesome, but the extra work to support all the different devices, types and screens is a pain lol

Link to comment
Share on other sites

  • 0

Yeah, totally. There's a few bits and bobs there you'd use images for (flags, honeycomb background) but apart from that, HTML/CSS will do it all.

Link to comment
Share on other sites

  • 0

I did the HTML/CSS class from codecademy but I felt it didn't teach you enough. I don't know where I use said coding. Bleh. I guess I need to spend a little more time doing things.

Link to comment
Share on other sites

  • 0

If you guys have any trouble with something in css feel free to send me a message ^^

Also check css-tricks.net every once in a while, it's my source of css tricks & information :D

Edited by Seahorsepip
Link to comment
Share on other sites

  • 0

In present days, we have very good companies that design websites, according to the needs of the customer. The web designing can be done by using some of the software tools such as dreamweaver and notepad++, for developing the back end of the web site we use the scripting languages like HTML, PHP and Javascript. There is more demand for web designing in the field of marketing.

<snip>

Sorry but advertising isn't allowed on the forum.

Besides that I would look into getting/designing a more creative and diverse logo on your website, your current logo is too simple in my opinion to actually stand out from the crowd ^^
Logopond.com has some great logo's you can look at for inspiration.

Welcome to neowin, hopefully you stay around and help some people out at the Web design & programming forums.

Also if you're looking for work you should look at the grafix exchange forum: https://www.neowin.net/forum/forum/202-grafix-exchange/ There are mostly logo requests but there is also a vbulleting skin request as example.

Link to comment
Share on other sites

  • 0

Well... there's a few ways in going about to doing this.

  1. Google... lol.
  2. Slice is up to pieces like what you said.
  3. Code the whole thing with HTML and CSS (for very advanced developers).

 

Link to comment
Share on other sites

  • 0

Well... there's a few ways in going about to doing this.

  1. Google... lol.
  2. Slice is up to pieces like what you said.
  3. Code the whole thing with HTML and CSS (for very advanced developers).

 

It was more of where to start with the coding. I've been watching videos on HTML5/CSS3 coding. It's much like C++, quite logical. Start at the top, and work your way to the bottom.

 

If you guys have any trouble with something in css feel free to send me a message ^^

Also check css-tricks.net every once in a while, it's my source of css tricks & information :D

CSS3 Generator - Was told about this site too!

Link to comment
Share on other sites

  • 0

It was more of where to start with the coding. I've been watching videos on HTML5/CSS3 coding. It's much like C++, quite logical. Start at the top, and work your way to the bottom.

 

CSS3 Generator - Was told about this site too!

Also for readable content I suggest the following contrast ratio tool: http://leaverou.github.io/contrast-ratio/

Also for gradient I use: http://www.colorzilla.com/gradient-editor/

And for closing a popup, dropdown etc when clicking outside of it in js: https://css-tricks.com/dangers-stopping-event-propagation/

Link to comment
Share on other sites

  • 0

For now a days you have to use to make responsive web design and you can see that effect on your business which get leads over with search engine.

True. I'm struggling hard with the coding. I don't know HTML tags that well, not like I know some C++.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.