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 template13 - no slices in photoshop?

Discussion in 'Web Design' started by david90, May 24, 2009.

  1. david90

    david90 New Member

    How come template 13 on page 12 doesn't have slices when I open it up in photoshop to change some graphics?

    Without slices, how can I change the graphic in photoshop and accurately cut it in a way that it will fit the original graphic position in the html?
     
    david90, May 24, 2009
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Hello david90 -
    Mimoun created all the templates, this one in 1995, maybe he forgot, maybe back then he went he used to get paid he deceided not to.
    These templates are not table based. They are css, so just pick the images from the images directory, edit them and even adjust the sizes and margins as needed on the fly in the code. Just look at the code for both the html/css files to see. Slicing was intended to reduce the size of a large graphic for load times during the days of dial-up and grew into full blown web pages. It's now a thing of the past, but has it's place.
    Example below - before and after "menu_cap.gif"
    Let us know how it goes.
     

    Attached Files:

    ishkey, May 25, 2009
    #2
  3. david90

    david90 New Member

    I'm not an expert at photoshop or web design but I don't think your method would work for the images in the template that I'm trying to change. Take a look at the pic below:

    [​IMG]

    The images that I'm trying to change is the three bullets image on the middle-upper left. The images are directly above the "our technology" text. What I want to change is the bullet's text. I just don't see how I can change the text, which is an image itself, by directly editing the picture.

    Your method works for your example.
     
    david90, May 27, 2009
    #3
  4. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    no you can use the same method it works for any graphic
    just open box1.jpg
    make a copy of the background layer
    copy a small rectangle piece of the blue left of the background layer
    paste it on to the copy
    stretch it over the words to obscure them
    you now have a blank bullet.
    add you text, merge all layers and save it.
    redo - undo merge layers, delete text and add new text, save it.
    make as many as you need.

    Another method:
    I looked at the psd file and there is only 3 layers with one locked.
    you could move the text out, add your own and then slice it yourself.
     

    Attached Files:

    ishkey, May 27, 2009
    #4
  5. nightowlhid

    nightowlhid New Member

    I too am working with this template and I like and get whats up with the blue bullet. My question is how do I move the other ones (the 3 to the right) I wanted to move them closer to center.

    Also, I know this is an index page template but had anyone made templates for the other pages linked in the index page? (support, faq resources etc etc)
    this would really help if someone hasnt done it.

    Lastly, Im using dreamweaver and my view is completely skewed, i have to preview in browser after I make changes.. is my display view incorrect in dreamweaver or do I need to do something else? its a pain and not very effecient way to work.

    thanks in adv.
     
    nightowlhid, Jul 15, 2009
    #5
  6. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    You will need to edit the style.css file.
    Look at the index.html file for the <div> class surounding the bullets and look at the ones before and after. Then go look at the style.css for those divisions.

    I sure there has been other pages made, but I do not know of any posts.
    Most people try to remove some areas to give the other pages a different look or you can mod the css file with extra divisions.

    DW is a pipe dream - powerfull but it does has it's drawbacks as you have seen. I do believe you can set it for several different browsers, so at least you can click within the program to view. External I know but, most browsers will at times display your page differently anyway.
    I always check my work with IE FF Opera. My program cute HTML pro isn't always on the money.
     
    ishkey, Jul 15, 2009
    #6
  7. nightowlhid

    nightowlhid New Member

    ok thanks!
    yea I just want a blank page or something close that I can start adding in my content for each page

    im sure you have posted this somewhere before but I havent seen it..
    the included .psd is used to make changes to things like logo, bullet item text or whatever and exported out as a slice to be used as a gif or jpg in int index file or where ever in the site correct?

    thanks again.
     
    nightowlhid, Jul 15, 2009
    #7
  8. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    psd - you are correct...
    the other two parts css and html files.
    Think of the css file as map for your building blocks. ( think temp13 what it looks like ) if you put one of those <div> tags in the the html file it's like putting a block on the page, only the css file has all the info about the block ie; how big it is, what color, where it goes.
    So lets say your page holds 4 blocks, you take out three because you want the whole page for some pics. The problem is your one block is 1/4 of the page and the css file will tell you. So you will have to make a new <div> tag to reflect your new whole page size, new block. Store the parameters in the css file and use the html file to call it up.

    Hope this makes sense.
     
    ishkey, Jul 15, 2009
    #8