1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How is this done?

Discussion in 'BlackHat Lounge' started by -SiNN, Jul 17, 2009.

  1. -SiNN

    -SiNN Newbie

    Joined:
    Jul 14, 2009
    Messages:
    0
    Likes Received:
    2
    Hey everyone,

    Ok, I have been racking my brain here for the past day, so I figured I would see if any of you could point me in the right direction.

    Let me start by saying that I can use Photoshop pretty decently, but have never used it for making a website.

    I can used Dreamweaver, and do the basics with HTML. I can look through a Wordpress template, and change it up to my hearts content.

    But, I can't write code from scratch. I am good at taking things apart and figuring them out to make them work for me, such as templates and whatnot, but when it comes to building a site from scratch, I really suck.

    So, here is my question.

    How are all of these higher end sales pages made?
    An example:
    Code:
    http://www.dominatingniches.com/
    http://www.moneysiphonsystem.com/grn/index01.html
    Those are 2 random examples.

    I have toyed with quite a few WYSIWYG editors, and even XSitePro (although I am on Linux now and don't have XSitePro, nor have I used it in the past 8-10 months), but I can't figure out what these are designed with, or how the hell I can do it myself, short of ripping the site, and photoshopping every image to make it my own, which is a total pain in the ass.

    Does anyone have any ideas, tips, or anything else?

    I'd REALLY appreciate it, because I have a few products ready to roll out, and would rather build the sites myself to save on the cash I have on-hand right now... Things are tight these days.

    Thanks again!
     
  2. ForeverNever

    ForeverNever Power Member

    Joined:
    Sep 17, 2008
    Messages:
    727
    Likes Received:
    365
    The first one was designed by extremewebgraphics.com (says it at the bottom) and they are both called Minisites. You can download minisite templates from anywhere.
     
  3. -SiNN

    -SiNN Newbie

    Joined:
    Jul 14, 2009
    Messages:
    0
    Likes Received:
    2
    Oh sweet! Thanks!

    Does anyone have any info on creating a mini site from scratch in Photoshop?? I'd love my own design
     
  4. 195471

    195471 Regular Member

    Joined:
    Oct 11, 2008
    Messages:
    417
    Likes Received:
    260
    These sites are easy to make IF you know HTML and CSS. I don't recommend using Photoshop to create layouts -- just use it for creating individual graphics for your site. While you can save files as HTML in Photoshop, what it does is slice up your images and put them in an HTML table. The result is a lot of unnecessary HTML and large image files that will slow down the loading of your page.

    The ideal way to make the sites that you're asking about is to create the images individually and use CSS to design the layout. For the "border" graphic, like the one that outlines the white area of the sales letter in the first site that you listed, you would create a large version in PS and then create a 1- or 2-pixel height "slice" of that image, which you would then force to repeat vertically down the page using CSS. Using a smaller, repeating image is much more efficient than using one large image that uses more disk space and bandwidth.

    Also, you see the background image in the first site that you listed? That image is fixed in place, whereas the background image of the second site is not. This means that when you scroll down the page, the background stays put, while on the second site, the background will scroll with the page. You can control all of this with CSS.

    IMHO, you should bite the bullet and learn how to code sites from scratch. Yeah, there's a learning curve and it will take time, but after you get over that, you will be able to build sites and landing pages very quickly.

    Having said all of that, if you still want to use PS to do a layout, here are a couple of tutorials:

    Code:
    http://www.sitepoint.com/article/design-website-photoshop/
    http://www.entheosweb.com/photoshop/layout.asp
     
    • Thanks Thanks x 1
  5. -SiNN

    -SiNN Newbie

    Joined:
    Jul 14, 2009
    Messages:
    0
    Likes Received:
    2
    195471

    Thanks a ton!!! That's basically everything I wanted to know, including the stuff I forgot to ask! haha

    I can't code HTML/CSS from scratch, but I know my way around it enough to make it work, it just takes me a little longer to get a site up and running smoothly with no glitches. So, I think, as long as I can figure out the CSS layers, and how to make that border image repeat horizontall and veritcally, as well as insert the corners, I'll be well off.

    That was what I needed to know man, so thanks a ton.