Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Member smedz28's Avatar
    Join Date
    Jul 2011
    Location
    Scotland, UK
    Posts
    41
    Member #
    28612
    Liked
    3 times
    Hi all,

    This is my first question within the forums and please bear in mind that I know nothing about photoshop, so far all I have done is experiment with re-sizing an image while learning how to insert images with html code. I have just started learning (x)html and CSS so I may be jumping ahead a little......

    So I intend to at some point start using photoshop to design web graphics and layouts, I have browsed through many "tutorials" that cover the practical side of things such as how to create this effect and that, although that kind of information will obviously come in handy what I want to discover is the theory and reason behind it.

    Let's just say I have created my layout, have the header, logo, buttons/tabs and text boxes etc and i'm ready to move on and save it to use as a web page, write my html code to add the content. I have read that you must first slice it into sections. Is this done in order to created individual images within a large image? if so would I be correct in saying that these small images can then be used to create anchors for links etc? e.g. using image mapping to create clickable regions on the image such as buttons or tabs.

    Apologies if I waffled on a bit but I was unsure how to explain it in a much simpler way

    Smedz28

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by smedz28, post: 212984
    Apologies if I waffled on a bit but I was unsure how to explain it in a much simpler way
    Smedz28
    Actually the fact that you gave so much info is good - it gives me an idea of what you are thinking, and how to steer you in the right direction.

    Quote Originally Posted by smedz28, post: 212984
    Let's just say I have created my layout, have the header, logo, buttons/tabs and text boxes etc and i'm ready to move on and save it to use as a web page, write my html code to add the content. I have read that you must first slice it into sections. Is this done in order to created individual images within a large image? if so would I be correct in saying that these small images can then be used to create anchors for links etc? e.g. using image mapping to create clickable regions on the image such as buttons or tabs.
    In my opinion imagemaps are last resort - images do not do well in SEO and you really are better off keeping as many of your images in your CSS as you can, so that when the HTML page is indexed by the search engines, they see your <h1> <h2> and <p> text higher up in the code than if you had all sorts of image tags interspersed.
    Quote Originally Posted by smedz28, post: 212984
    So I intend to at some point start using photoshop to design web graphics and layouts, I have browsed through many "tutorials" that cover the practical side of things such as how to create this effect and that, although that kind of information will obviously come in handy what I want to discover is the theory and reason behind it.
    Sounds like you have been reading Photoshop tutorials - they do tend to concentrate on how to do stuff with Photoshop, ( gradients, embossing, using filters, etc) but very few mention getting a design ready for the web.

    There are a couple of good slicing tutorials out there - try the ones linked from this page - scroll down to the bottom and check them out - the designs may not be similar to yours but you should be able to adapt the methods to your site.

    And if that doesn't work - Google " PSD to HTML tutorials" rather than Photoshop.
    smedz28 likes this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Quote Originally Posted by AlphaMare, post: 212997
    In my opinion imagemaps are last resort - images do not do well in SEO and you really are better off keeping as many of your images in your CSS as you can, so that when the HTML page is indexed by the search engines, they see your <h1> <h2> and <p> text higher up in the code than if you had all sorts of image tags interspersed.
    That's not really true. Images have their own SEO applications (e.g. image searches), and a lot of potential customers do use image search to find products and in really strange cases services. So putting them in a page is not a bad thing, and they really don't have that much of an impact on the overall SEO of a page anyway. If it's a background, this is a different story, but you can use images by themselves.

    One other thing you'll want to consider...slice the images only (do not use the bloated, inefficient ImageReady code).
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Member smedz28's Avatar
    Join Date
    Jul 2011
    Location
    Scotland, UK
    Posts
    41
    Member #
    28612
    Liked
    3 times
    I agree, I would rather keep image mapping to a minimum in any future designs, I understand that it does have some usefulness in certain senarios, but at this stage in my learning I would like to concentrate more on writting my code correctly whilst using enough variety of elements to in the design part of the process.

    I will have a look at the tutorial you posted alpha and see if that can throw more light on the subject. If i have anymore questions I will reply as soon as I can. Thanks to you both for the input.

  6. #5
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Keep us informed of your progress - OK?
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  7. #6
    Member smedz28's Avatar
    Join Date
    Jul 2011
    Location
    Scotland, UK
    Posts
    41
    Member #
    28612
    Liked
    3 times
    Ok, so I have had a look at the tutorial and found that it goes into alot of details about code, how to create the effects and slicing. It does still concentrate mostly on the practical side of how to create. Again I think that learning to use the tools within photoshop is something I will concentrate more on at a later stage in my learning. As I said I need to understand the why before I do the how. It's fairly simple to follow an instuction that says "click on this and slice this section, this section and that section", what I needed to understand was why I needed to do that. However it has been a great help

    I think from what I have read it answers my question although, my interpretation is that you are creating a large image and slicing it into different sections so that these individual sections can be referenced seperately in the code.

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    That's exactly it. You're slicing it so that you can use each slice later on when you're coding each section.
    smedz28 likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by TheGAME1264, post: 213010
    That's not really true. Images have their own SEO applications (e.g. image searches), and a lot of potential customers do use image search to find products and in really strange cases services. So putting them in a page is not a bad thing, and they really don't have that much of an impact on the overall SEO of a page anyway. If it's a background, this is a different story, but you can use images by themselves.
    I was referring to imagemaps only, and had assumed the OP meant to use it for navigation (possibly a bad assumption) - for that I put the images in CSS and use an <ul> for navigation. Of course if you are offering products etc. you will want to have images on the page.
    Quote Originally Posted by TheGAME1264, post: 213010
    One other thing you'll want to consider...slice the images only (do not use the bloated, inefficient ImageReady code).
    "LIKE"!!!
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  10. #9
    Member smedz28's Avatar
    Join Date
    Jul 2011
    Location
    Scotland, UK
    Posts
    41
    Member #
    28612
    Liked
    3 times
    Now that I understand the reason behind slicing the web layout into images I have to say it makes alot more sense to use this technique for buttons/navigation for example rather than writing code for image maps to create clickable regions on a larger image. Having looked at a couple of those tutorials you suggested alpha I now see how the <ul> tags come into it as well.

    Although I am still learning xhtml and CSS and haven't started to build anything like a proper site, I do have a project sort of lined up for later down the line so all this even at the early stages is helping me to piece together how the design and coding will come together. My friend is studying fashion design at university at the moment and only has another year to go before she is qualified and plans to start a small business designing and making club wear for the very popular rave scene over here, just to keep her ticking over until she can establish herself more in the industry. So it will be a kind of joint venture and an excellent way to build on my skills and develope my own ambition.

    That may have been more that you needed or wanted to know, but there you go lol

  11. #10
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by smedz28, post: 213083
    Now that I understand the reason behind slicing the web layout into images I have to say it makes alot more sense to use this technique for buttons/navigation for example rather than writing code for image maps to create clickable regions on a larger image. Having looked at a couple of those tutorials you suggested alpha I now see how the <ul> tags come into it as well.

    Although I am still learning xhtml and CSS and haven't started to build anything like a proper site, I do have a project sort of lined up for later down the line so all this even at the early stages is helping me to piece together how the design and coding will come together. My friend is studying fashion design at university at the moment and only has another year to go before she is qualified and plans to start a small business designing and making club wear for the very popular rave scene over here, just to keep her ticking over until she can establish herself more in the industry. So it will be a kind of joint venture and an excellent way to build on my skills and develope my own ambition.

    That may have been more that you needed or wanted to know, but there you go lol
    It's always good to have a goal!

    One way to learn a lot is to download a free template and then study the code, examine how it works, how the divs and classes in the CSS are reflected in the HTML, play with it and break it and then put it back together.
    A good example of some decent freebies can be found here -
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:49 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com