How to create website in Photoshop

32 replies
  • WEB DESIGN
  • |
Hi members,

Can you please help me in giving some ideas on how to create websites in adobe photoshop?
#create #photoshop #website
  • {{ DiscussionBoard.errors[3952194].message }}
    • Profile picture of the author jenniferhudson
      Yes dear you can make website in Adobe Photoshop just to make a design and slice all of that design in various parts of images and save that as a web page.
      now goto that folder where you save your webpage design and open it in browser and look at it's page source.
      Your site is ready for upload.
      Thanks
      Regards:
      Jennifer Hudson
      {{ DiscussionBoard.errors[3963669].message }}
      • Profile picture of the author newbim
        Originally Posted by jenniferhudson View Post

        Yes dear you can make website in Adobe Photoshop just to make a design and slice all of that design in various parts of images and save that as a web page.
        now goto that folder where you save your webpage design and open it in browser and look at it's page source.
        Good advice. Personally, thats how I learnt, but then as soon as I looked at the source, I got the bug, and started to learn how to code by hand.

        From personal experience, sites that have been sliced in PS can, depending on the sites complexity, take a lot longer to load.

        Having said that, PS is a great design tool for sites.

        My two cents would be, start of basic, and learn the basics of HTML and CSS. Then, your designs will develop with your coding skills. If have any queries about using PS or basic coding, feel free to PM me.

        Cheers,

        Newbim.
        Signature
        If what I said helps, let me know, throw me a 'thanks'.
        {{ DiscussionBoard.errors[3964785].message }}
      • Profile picture of the author webdesigenusa
        Originally Posted by jenniferhudson View Post

        Yes dear you can make website in Adobe Photoshop just to make a design and slice all of that design in various parts of images and save that as a web page.
        now goto that folder where you save your webpage design and open it in browser and look at it's page source.
        Your site is ready for upload.
        Thanks
        Regards:
        Jennifer Hudson
        You give such good information now i can try to make webpage in adobe photoshop as soon as possible.
        Signature
        {{ DiscussionBoard.errors[6563158].message }}
  • Profile picture of the author mezner
    It took me forever to understand how to use Photoshop to make websites. Here is the process that I learned...

    1- Learn HTML. You need to understand the basics of HTML before you start applying styles to it (CSS).
    2- Learn CSS. CSS is what gives your text different fonts, sizes, colors as well as the background, headers, footers, etc

    For starters learn how to code what is called a "box model". This is a basic code structure for a simple webpage which should include a header, navigation, body and footer.

    3- Learn how to use Photoshop if you don't already know how. If you know how CSS properly works, then you will know what to do with your Photoshopped webdesign when its completed.
    {{ DiscussionBoard.errors[3969329].message }}
  • Profile picture of the author goldenweb
    Hello, the best thing you can do to find out more infomation on this subject is have a look on Youtube. you could search for "slices photoshop" as the slices tool is the main tool for saving images into web pages.


    Hope this is helpful


    Thank you
    Keith
    {{ DiscussionBoard.errors[6525054].message }}
    • Profile picture of the author ronc0011
      I will never get used to this question. When I think of building a website I tend to think of containers or boxes inside of other boxes I usually start with a "wrapper" div or container and then put a "header " div or container inside of that and then either a sidebar div and a main content div and finally a footer div. Then I usually code up some <ul> and some <li> rules also any other special formatting rules i.e. CSS. I generally stay away from full sized images for background because of the loading time and file size. So I try to sick as much as possible with colors and shading for the sites look and feel and any images are kept to either header size or logo size. In a header I can usually use an image set either to the left or right side with a matching background color to fill the header div.

      I suppose starting a website from Photoshop just strikes me as starting from the wrong end of the process. But whatever works for you.
      {{ DiscussionBoard.errors[6525298].message }}
      • Profile picture of the author thelearningman
        Originally Posted by ronc0011 View Post

        I will never get used to this question. When I think of building a website I tend to think of containers or boxes inside of other boxes I usually start with a "wrapper" div or container and then put a "header " div or container inside of that and then either a sidebar div and a main content div and finally a footer div. Then I usually code up some <ul> and some <li> rules also any other special formatting rules i.e. CSS. I generally stay away from full sized images for background because of the loading time and file size. So I try to sick as much as possible with colors and shading for the sites look and feel and any images are kept to either header size or logo size. In a header I can usually use an image set either to the left or right side with a matching background color to fill the header div.

        I suppose starting a website from Photoshop just strikes me as starting from the wrong end of the process. But whatever works for you.
        We used to work with a Photoshop expert to display the look of the site before we made a purchase. It's an incredibly efficient way to make a selection as we needed the visuals and not the code to see what would work. Asking someone to write html/css is a long drawn out process and should only occur once a determination has been made about the site style/map. What better way to make such a determine based upon an 'image'.
        {{ DiscussionBoard.errors[6605609].message }}
  • Profile picture of the author antac
    Banned
    [DELETED]
    {{ DiscussionBoard.errors[6532625].message }}
  • Profile picture of the author Photofixations
    I am very experienced in Photoshop and have never built a website in it. I do however use it extensively for images, designs, logos, slices and much more.It is a great tool for that. However as others have suggested, learning html and css is a great foundation on which to start. From there you can use Dreamweaver, another Adobe product to actually build your sites.You can even load a Wordpress, Joomla or Drupal cms into Dreamweaver which will help you with the dynamic parts such as javascript, php and sql. If you really want to learn to build websites from the ground up it is a fairly steep learning curve. You might want to try Wordpress by itself to start. There are a gajillion good web tutorials on this. If you want to build dynamic (interactive) websites start with Joomla. It's a little more complex but a great platform.

    bob
    {{ DiscussionBoard.errors[6543694].message }}
  • Profile picture of the author CovertecH
    Originally Posted by gokulvikas View Post

    Hi members,

    Can you please help me in giving some ideas on how to create websites in adobe photoshop?
    It is not a good idea to create websites in ps. You must design websites with ps. You can watch visual lessons about interface design, html / css and how PSD exporting to html...
    {{ DiscussionBoard.errors[6550022].message }}
  • Profile picture of the author anisans
    Banned
    [DELETED]
    {{ DiscussionBoard.errors[6551345].message }}
    • Profile picture of the author ronc0011
      Your PSD file is going to be your working file in other words you will probably keep it at a higher resolution and it will probably keep all your layers and stuff. In other words it will be your master file that you make PNG and GIF and JPG files from as needed.
      When I'm working on a site I build all the HTML and CSS as I build up my site. In other words I will define the containers like header, and sidebar, and main content, footer etc in the CSS. I will often give them a background color just so I can get a visual representation of my page. from there I can start putting in graphics and logos as needed also any special images for <li> bullets, or images for rounded corners on <div>s etc. Once you have a visual outline for your site it pretty easy and pretty intuitive to work up the details and finer points.
      {{ DiscussionBoard.errors[6553034].message }}
  • Profile picture of the author Terry Crim
    What version of Photoshop are you using? I come from the land of hand coding and mocking up websites with paper and pencil but have recently been switching over to visual designing layouts using fireworks and photoshop using the new CL-CS6 versions of Adobe's software.

    There are quite a lot of videos on how to do mockups in photoshop and illustrator on Adobe's website and also on youtube. If you want to spend a little money you can pay for a month at lynda.com or some other video training site that goes into FULL details on how to use Photoshop. Spend one month going through the video's at lynda.com and you will be more of an expert than most designers.
    {{ DiscussionBoard.errors[6553459].message }}
  • Profile picture of the author Iron
    Anything is possible in photoshop. I would say watch some good tutorials regarding web designing on youtube. There are some great ones.
    {{ DiscussionBoard.errors[6563180].message }}
  • Profile picture of the author gordonlds
    Originally Posted by gokulvikas View Post

    Hi members,

    Can you please help me in giving some ideas on how to create websites in adobe photoshop?
    Take a screenshot of the site you want to make, Crop the container/wrapper save it as an image to your desktop. Open the image using PhotoShop use the slice tool to split it up be careful to size your autoresponder to fit the slice you are going to delete to accomodate the auto responder in your finished site. Save the sliced up image for web and devices within photo shop so you are saving html and images, Open your sliced up file in Dreamweaver and the file will appear on the left of your browser page. Create a css rule for the body set your colour for the background of the body and set the alignment at center. Click on the sliced up page and it will give you a value such as table01 or something like that, make a css rule for the table go to the box section, uncheck the box that makes all the values the same for the margin and set the margin at auto for right and left. Insert your auto responder code into the space you have measured and delete the slice that makes way for it, that's it you can do it with any page you want. You can change the graphics or text on any slice you want while in photoshop.
    It's really easy but after reading what I've wrote I realize it sounds really complicated. Anyway hope this helps
    Signature
    Six Of The Best No-Restriction PLR Products *FREE* My Best Ethical Bribe Ever.

    Could you use 6 high quality PLR products with OTO's to generate income for your business?
    {{ DiscussionBoard.errors[6566558].message }}
    • Profile picture of the author MattSabia
      I've never tried this before myself so I can't exactly recommend it, but it looks really cool. It's a Photoshop plugin that let's you convert a project to a WordPress theme.

      Check it out and let us know how it worked if you try it. Google it, it's called "divine"
      Signature
      How I Built My First $3000/Month Cashflow Business With A Facebook Group - Watch My Webinar
      {{ DiscussionBoard.errors[6567347].message }}
  • Profile picture of the author Jordi
    I'm surprised a lot of people recommend learning the development stage before designing. I start from the designing stage and still learning the development stage this very moment. I only know the simple stuff or enough to code in MY work and not from another theme or somewhat. The thing is, improving on graphical design takes practice and practice of your creativity! You don't want to be like most of the designers on this forum, plain and boring.
    {{ DiscussionBoard.errors[6568149].message }}
  • Profile picture of the author situ08
    Many people try to build website in Ps. But It will increase the load time as complete website will be in images.
    {{ DiscussionBoard.errors[6569148].message }}
    • Profile picture of the author MattSabia
      Originally Posted by situ08 View Post

      Many people try to build website in Ps. But It will increase the load time as complete website will be in images.
      How is that different tan any other website? lol
      Signature
      How I Built My First $3000/Month Cashflow Business With A Facebook Group - Watch My Webinar
      {{ DiscussionBoard.errors[6570573].message }}
      • Profile picture of the author ronc0011
        When you talk of building a website in Photoshop what you are actually talking about is drawing a picture of a website. In other words an image. Image files are large even when "optimized" Photoshop will help you to "slice" up an image file so if you have an image 960px X 450px then what you have i s a bunch of smaller image files that will load a little bit faster than one big image file But its only a small improvement. So where true design skill comes in is being able to take a small graphic maybe 50px X 30px and using it in such a way that it does the work of a big image for instance if you take your small image and give it a gradient background and put it in a 100px X 200px <div> with a gradient background that matches your images background You can end up with a small image that works effectively like a big image. A background color ads very little to file size on a webpage.
        Still at the end of the day a website is an interactive medium It has links and navigation and probably forms of some sort and these days likely even video. Building all these things is what it is to build a websites and it's a bit different than drawing a picture of a website. Learn the HTML and the CSS and then you can pick up Photoshop to build your graphics. Really the HTML and the CSS is pretty easy to pick up and in fact with all the tutorials on Youtube Photoshop is pretty easy to get a handle on.
        {{ DiscussionBoard.errors[6571735].message }}
  • Profile picture of the author gineen
    I sort of laugh with each new version of photoshop.
    First it was vector graphics... which illustrator is better for
    then animation ... which flash is better for
    now it's making websites... which dreamweaver is better for


    I don't get it???
    If you want to create a website without learning code, just use dreamweaver, yes it is a little clutzy but not nearly and awkward as photoshop
    Signature
    http://homegardening101.com -- a Latin free blog
    {{ DiscussionBoard.errors[6605539].message }}
  • Profile picture of the author antac
    Banned
    Creating the design using Adobe Photoshop, which means creating an image of the main page and a model page that will repeat on all the other pages and then generating (also with Adobe Photoshop) HTML format pages with images.
    {{ DiscussionBoard.errors[6654128].message }}
  • Profile picture of the author mmrumii
    When I was tried to learn more about this topic, then I found this link.
    I think you should check the link to learn more about creating website in photoshop.

    Create a Clean Modern Website Design in Photoshop
    {{ DiscussionBoard.errors[6667191].message }}
  • Profile picture of the author davidsbain
    The best way to achieve this from a design and coding point of view would be to build each item seperately in photoshop, so make the logo, header area, nav buttons and all other items on the page as separate photoshop files then create a photoshop file for your web page, open your files and drag all the images onto the new file. After that its just a matter of determining which items you will use as images and which you will code. Beauty of this method is that all of your images are all ready to go directly onto the server and the other parts of the page that need coded, like the text in the main content area, you have already determined the font and the color so very easy for a programmer to code the page if you include on the page the size and the font you have used for the text
    {{ DiscussionBoard.errors[6673213].message }}
  • Profile picture of the author dogbedcity
    Photoshop itself you can create good website, if you are familiar with that.
    {{ DiscussionBoard.errors[6677088].message }}
  • Profile picture of the author dmg68
    I use photoshop to version made ​​easy ???
    {{ DiscussionBoard.errors[6680415].message }}
    • Profile picture of the author ronc0011
      It finally occurs to me why this whole idea is so bothersome to me. When I first started tinkering around with building web pages back in 98 it was generally considered bad form to load a page up with a lot of images. Obviously this had a lot to do with band width and also server capacity. Basically everything you could find on building web pages advised against using a lot of images with the idea of keeping the file size of your pages as small as possible . You have to remember also that at the time almost everyone used dial up for their internet connection. Some still do today. So I guess for me I'll always have that idea in the back of my mind and I will never see Photoshop as a web design tool. Now obviously I use Photoshop to build graphics for web pages but building a graphic is just building a graphic which I then place in my web page that I'm building with software like Visual Web Developer (my personal favorite)
      {{ DiscussionBoard.errors[6682666].message }}
  • Profile picture of the author introandsimplelog
    [DELETED]
    {{ DiscussionBoard.errors[6683758].message }}
    • Profile picture of the author doncook
      its very easy but you have to learn the use of PS. So u can make it easy.
      {{ DiscussionBoard.errors[6684138].message }}
  • Profile picture of the author TimeTravelAgent
    Start off with a premade .PSD maybe, modify it according to what you like, and then go from PSD to HTML. That's a good coding practice!
    {{ DiscussionBoard.errors[6688991].message }}
  • Profile picture of the author jaasmit
    You can design a site using photoshop easily. First of all you have to make the design you want in the conventional way in photoshop then cut the whole thing into pieces and make them work as a web page.
    {{ DiscussionBoard.errors[6689152].message }}
    • Profile picture of the author TimeTravelAgent
      Originally Posted by jaasmit View Post

      You can design a site using photoshop easily. First of all you have to make the design you want in the conventional way in photoshop then cut the whole thing into pieces and make them work as a web page.
      Exactly. Basic HTML and CSS can do enough for the design.
      {{ DiscussionBoard.errors[6689278].message }}
  • Profile picture of the author ClicProject
    You want to avoid simply slicing your psd into images- stuff like borders, drop shadows and even gradients can be coded in css now, most modern browsers support the css rules. This will keep your page loads down.

    Also stuff like repeating patterns you should create by creating the smallest possible image, then repeating it using css.

    For icons and other decorative items, check out css sprites. This is where you put all your icons in one image, then use css positioning to show the correct portion of the image in the right place, this drastically reduces http requests and keeps your page speed up.

    Also, check out the 960 grid, it is a way of dividing up the page into different columns with aesthetically pleasing proportions based on the golden mean - using a layout based on these proportions ensures a tight design, most professional sites you see adhere to these sort of design rules. Google 960 grid, you will find some psd files with 960 grid guides, some css frameworks with the skeleton already set up for you, and even firefox browser plugins that overlays the grid in a web-browser, so when you are coding your css you can check that the spacings are correct.

    When coding your html and css, avoid dreamweaver and such, they just add bloat to your code. Use an editor such as komodo edit, or netbeans, which are free, and have syntax highlighting and tooltips with reminders.

    Finally, check out the firebug plugin for firefox, it lets you inspect the css and html of any web page, great for debugging your site, and seeing how other sites acheived a particular effect.

    Good luck!
    {{ DiscussionBoard.errors[6689407].message }}
  • Profile picture of the author WritingService
    waw...nice discussion ini here..

    thank you all
    {{ DiscussionBoard.errors[6701572].message }}

Trending Topics