1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Web Design Dumb question re Photoshop and templates

Discussion in 'Web Design' started by rndm227, Oct 5, 2010.

  1. rndm227

    rndm227 New Member

    I am finding it very hard as a beginner to work with html templates that were created in Photoshop (slicing and such). When allowed, I would like to change background colors and such. Are there templates out there that look good that were created without slicing -simple backgrounds where colors and text size and such that can be easily changed by a beginner?

    Thanks in advance.
     
    rndm227, Oct 5, 2010
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Well the hard time is due to looking at the problem from one side,
    PSD files and slice and dice is just one method to produce a template. People like to see what the page will look like so they create a psd file. They may also want special graphics say a long gradient for the background, where as you can only set the background color in css not a gradient. Maybe they want to modify a stock jpg for use in the template.
    If one understands the language of css and html then you can just start coding a page.
    Making your different graphics in say photoshop and using the individual graphics as you code.
    w3schools is a good place to learn and it is a quick read.
    After looking at w3schools I believe you will have a better understanding as how to change the background color, graphics, text etc.
    Hope this helps.
     
    ishkey, Oct 5, 2010
    #2
  3. SimonJC

    SimonJC New Member




    agree there,

    Some people design the template in photoshop and slice it but when you may need to custom the design in anyway then you get problems as the page size ect and some images may not be able to be changed.

    Background Gradient can be edited in photoshop first, such as do a 8px wide by 1500px heigh and bring the quilty down some what and should still load fast.

    Need anyhelp learning coding for CSS Layout ect then happy to help.

    Just remember the tags ect.

    Margins: Set as Top Right Bottom Left. if you dont need a margin then use this

    Margin: auto;

    so lets do the body.


    #main-body {
    margin:auto;
    Padding: 0px 0px 0px 0px;
    width: 850px;
    height: 1500px;
    }


    :D

    Oh yeah also, when naming a DIV tag Id or Class make sure you space it out correctly.
    So insted of mainbody put main-body or leftcontainer to left-container.
    Helps out when editing content and putting in the divs in code.

    so would work like this.


    <div id="main-body"> Content here </div>


    For divs ect this is the codes for Class and ID

    # = Id
    . = Class
     
    SimonJC, Oct 7, 2010
    #3
  4. rndm227

    rndm227 New Member

    Thank you. This helps.
     
    rndm227, Oct 7, 2010
    #4