Web design in Photoshop

Discussion in 'Programming' started by raabot, Jan 27, 2010.

Share This Page

  1. raabot

    raabot New Member

    Joined:
    Sep 26, 2009
    Messages:
    26
    Likes Received:
    0
    Hey everyone.

    Was just looking some advice about learning web design in photoshop. Basically I would like to learn it to a reasonably basic level very quickly.

    Would anyone here recommend any particular sites for tutorials tips etc?

    Any help appreciated.
    Thanks:D
     
  2. Chenks

    Chenks Registered Trader

    Joined:
    Jan 5, 2002
    Messages:
    3,741
    Likes Received:
    0
    why would you be doing web design in a photo manipulation app ?
     
  3. Cosmo_1847

    Cosmo_1847 Kiss of death

    Joined:
    Aug 28, 2004
    Messages:
    7,949
    Likes Received:
    1
    Photoshop is a graphics / photo editing tool. I think you're thinking of Dreamweaver which is a GUI web IDE.

    You can use What You See is What You Get or actually code the website.
     
  4. Chenks

    Chenks Registered Trader

    Joined:
    Jan 5, 2002
    Messages:
    3,741
    Likes Received:
    0
    personally if you are serious about learning web coding etc, then notepad is the only application you need.
     
  5. Cosmo_1847

    Cosmo_1847 Kiss of death

    Joined:
    Aug 28, 2004
    Messages:
    7,949
    Likes Received:
    1
    Notepad++ is what I'd recommend. Colour coded syntax for the win plus you can have tabs.
     
  6. latency

    latency Existentialist

    Joined:
    Jul 1, 2004
    Messages:
    8,780
    Likes Received:
    0
    To collate the information here- To code websites properly, use notepad and learn the code.

    If you're looking to design the LOOK of your website for concept art, you want Fireworks. Photoshop is rubbish for designing a user interface, such as a website.
     
  7. raabot

    raabot New Member

    Joined:
    Sep 26, 2009
    Messages:
    26
    Likes Received:
    0
    Thanks for the replies lads.

    I seem to have miscommunicated what i meant to say. I already know how to code websites fairly well, but instead its designing the look as my uni have had a visual designer drop out and need someone to cover for the rest of the year.

    Virtually every tutorial i've ever come across for visuals on websites has been Photoshop. Why is Fireworks much better latency?
     
  8. BloomerzUK

    BloomerzUK I'm back!

    Joined:
    Dec 4, 2004
    Messages:
    3,161
    Likes Received:
    0
    Fireworks is better for slicing etc IIRC.
     
  9. latency

    latency Existentialist

    Joined:
    Jul 1, 2004
    Messages:
    8,780
    Likes Received:
    0
    Dunno... You can certainly do it in photoshop... But Fireworks is about ten times easier to use. It's designed for this sort of thing, where as photoshop is designed for manipulation.

    You have to tinker more in photoshop to do really obvious stuff like exact pixel dimensions and alignment, where as in Fireworks, these are the most prominent items in the toolbar.

    Photoshop is designed for the output to be printed, where as fireworks generally assumes that the output is web oriented, so it's easier to translate what you designed into your code.

    Might just be personal preference, or that I learned Fireworks before photoshop, so photoshop just feels harder.
    Photoshop for web design is like I'm trying to cut a grape in half with a samurai sword. It works, but you're kinda making it harder than it needs to be.
     
  10. raabot

    raabot New Member

    Joined:
    Sep 26, 2009
    Messages:
    26
    Likes Received:
    0
    Ahhhh, i'm getting you now.

    In that case, would you advise on any particular websites for tutorials to get me started?

    Thanks!
     
  11. gmyers

    gmyers Banned

    Joined:
    Jan 29, 2010
    Messages:
    6
    Likes Received:
    0
    Photoshop is just one of the tools you will need (well, not really..)

    I work as a freelance web developer. I typically use a combination of HTML/CSS/Javascript/PHP so those are the things you will want to learn first. Get yourself a big book on all of those.

    Only once you have mastered all of those (or at least HTML/CSS/JS if you want to be a front end designer) should you begin using Photoshop. Essentially photoshop just speeds up design for CSS slicing.
     
  12. amogrr

    amogrr New Member

    Joined:
    May 4, 2010
    Messages:
    6
    Likes Received:
    0
    I've also seen a few tuts lying around for website mock-ups on gimp.
     
  13. Zozart

    Zozart used to be splaty

    Joined:
    Sep 8, 2002
    Messages:
    3,526
    Likes Received:
    0
    Far as text editors go: vi tbh. ;)

    As has been said, Fireworks will be more suitable than Photoshop for web designs if you don't know either tool, but you can always try Gimp too.
     
  14. Samsonite

    Samsonite Mine's a frosty one

    Joined:
    Oct 28, 2004
    Messages:
    1,025
    Likes Received:
    0
    +1 for GIMP. I have the full Adobe CS4 suite at work, but I prefer to use GIMP for web graphics - it is way faster and easier to use for web-related stuff. Also because GIMP is available on the 3 main platforms: Mac (work), Windows & Linux (both at home) and is gratis, it makes life a lot easier!

    Oh and in answer to your question about tutorials and tips, it seems as though there are plenty of results on Google for "gimp web design tutorial" (without quotes).
     
  15. blackstar

    blackstar Regular Kustomer

    Joined:
    Jul 25, 2003
    Messages:
    327
    Likes Received:
    0
    try photoshop and fireworks - a massive amount of web designers do use photoshop, and theres many, many tutorials about based on photoshop.
    its excellent for non - vector artwork.

    psdtuts
    smashingmagazine

    are just two i can think of right now.
     
  16. Thourot

    Thourot New Member

    Joined:
    Nov 2, 2010
    Messages:
    19
    Likes Received:
    0
    you can find tutorials in youtube....
     
  17. Thourot

    Thourot New Member

    Joined:
    Nov 2, 2010
    Messages:
    19
    Likes Received:
    0
    try to search on youtube you will find lots of nice videos with step by step presentations.
     
  18. AllisterBansi

    AllisterBansi New Member

    Joined:
    Oct 10, 2012
    Messages:
    6
    Likes Received:
    0
    To create effective pixel-precise layouts for computer screens, or to make quick changes to screen layouts. Photoshop tends to be used for this purpose however, because users are familiar with the program, and are not aware that Fireworks was designed for this specific purpose...
     
  19. Bryanese

    Bryanese Tasted LAN and liked it.

    Joined:
    Jul 5, 2010
    Messages:
    664
    Likes Received:
    0
    Thread Resurrection no Jutsu!
     
  20. norah

    norah Banned

    Joined:
    Jul 23, 2013
    Messages:
    5
    Likes Received:
    0
    First of all you do not actually need to learn about the Photoshop for web developing. If you want to do this for your own purpose then I will suggest you the YouTube. You will find some of the best and effective tutorial about Photoshop.