Latest Announcemnent
New thread
Status
Not open for further replies.
Sp32

Sp32

Active Member
3,652
2009
1,326
340
What kind of software is being used to create layouts and designs for website such as vbulletin, phpbb, wordpress, WHMCS, BoxBilling + other CMS's?

Also what is the most commonly used software to create websites from scratch? I'm on about styling websites that are used for information/portfolios.

p.s if someone could explain the process of how someone would design a style for a website that has software such as vbulletin or wordpress.

i.e step 1 step 2 step 3 step 4 etc.

Cheers <3
 
9 comments
Here are my tools of the trade:
Photoshop for the design
Sublime Text 2 for the coding

As for making skins for bulletin boards and blogs the best thing to do is learn the structure / template system first but obviously you will need good html and css knowledge first, So if you dont know that then might be a good idea just to design some basic html + css templates first to get the feel of it. the steps generally go like this:

1. Design the skin in photoshop.
2. Slice it up in photoshop.
3. meticulous begin coding the design into a skin.
 
Well, there are various kinds of "languages" used to design/code websites. And also, lots n lots of options are available to do the same. It all depends on your flexibility and knowledge.

For developing a script, you must have a sound knowledge on programming languages.

There are softwares to do this, like DreamWeaver.. But again, it goes to core of Programming languages like PHP/JAVA/HTML .

And as i said, there are different methods to create a website. Another popular way is to design a website with Photoshop and then convert (slice and code) the PSD to a live website.

If you are a pro coder with good HTML5/CSS3 knowledge, you can design a site from scratch. (y)

Hope this helps.
 
I have some CSS and HTML knowledge amongst other languages, I just don't understand how it gets from the design stage from Photoshop to the Coded stage?
 
Sp32 said:
I have some CSS and HTML knowledge amongst other languages, I just don't understand how it gets from the design stage from Photoshop to the Coded stage?
Click to expand...

Well, its called "Slicing" and "coding", you basically take out the images from Photoshop file (PSD) and determine the effects/colors used in the PSD.
Then comes the coding part, you use the images that were sliced out from the PSD file, and use CSS3 stylesheet to get the required style/effect/colors on a live website. This is also tricky, as complex designs require huge experience and knowledge. Also remember that, you must have a sound knowledge of Photoshop, to do this. :)
 
Lets take a IPB forum and the work flow is same for every one
- Design cool skin in PS
- slice all the buttons, background images and stuff.
- now comes the HTML + CSS part
Here your psd turns in to HTML Page
- Apply JQuery to make auto validations at client sides

your are done
i must specify this is not as easy as explaining work flow.
 
Everyone is confusing :D

Basically its all about slicing the design you made in photoshop and then coding it into the theme structure of your script choice.

Nettuts have some really good tutorials on slicing up your designs and coding it into html.

Code: 
http://net.tutsplus.com/articles/news/how-to-convert-a-psd-to-xhtml/
Should help you get a better understanding of the process required.

Its no easy feat but once you get the hang of it trust me it will become much easier.
 
Well I've been designing websites in photoshop since 2009 and used to tweak theme codes since 2010.

Now what I do to complete a website development project.

  1. Open Dreamweaver. Make a style.css & index.html file.
  2. Then I start coding.
  3. I visualize by closing my eyes and think what style to apply.

Now I don't do website design in photoshop for others (I just do it for myself :D) but I do convert PSD -> HTML5

I slice out the images, although I try to achieve the visual effects using CSS3 but sometimes I need to use images.
Then I finish the website code and hand it over to client.
 
Take out a pen and paper first and write out what you want, draw arrows between the different areas, see how the pages link, what info each page will contain, how will people flow through the site and what will direct them to where you want them to go.

Spend at least 30 minutes at this before you go near a computer. Skip this step and you'll have a site that looks like every other on the web. Design is more important than code.
 
Status
Not open for further replies.
Back
Top