7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Need ideas to make a mokup site from a WP theme

by bwh1
6 replies
  • WEB DESIGN
    • |
I purchased lately a nice WSO which let me make a static HTML mokup for clients to show them a possible site before they buy.

Well, that's nice but I can't do this with the themes I already owe, DO I?

DO you know maybe a smart way to make a quick HTML page from a WP theme I have access to, and then change the logo, some images and content on a fly?

G.
#ideas #make #mokup #site #theme
  • Profile picture of the author Istvan Horvath
    Right-click > Show source > Save as .html file
    (to be on the safe side, you should save the images as well, in the same folder!)
    Open it in your favourite text/html editor > Edit > Mess around

    What exactly would be "on the fly" in this case?
    Signature

    {{ DiscussionBoard.errors[6978508].message }}
    • Profile picture of the author bwh1
      Originally Posted by Istvan Horvath View Post


      What exactly would be "on the fly" in this case?
      Guess you already answered that

      Why didn't I knew this, so simple.

      Many thanks

      G.
      Signature

      Affiliates Wanted! Make anywhere from 42,- to $72 in commissions. Simply Recommend the Best QuickBooks Pro Video Course available at Clickbank.

      {{ DiscussionBoard.errors[6978554].message }}
      • Profile picture of the author webxpedia
        this will works but the script in that page and the php content will not work because they need database to be linked up with that.
        {{ DiscussionBoard.errors[6978835].message }}
  • Profile picture of the author ArcherWylde
    Many times I will do this for clients if we're using a theme, but take out all of the stock info, logos and text and screenshot it over to Photoshop.

    It seems to work alot better because we put things wherever we want and even email a PDF copy to clients after we're done.

    We work mainly in PS because even if do use a pre-made theme they are typically highly customized...almost not recognizable compared to the stock ones...
    {{ DiscussionBoard.errors[6979453].message }}
    • Profile picture of the author bwh1
      Originally Posted by ArcherWylde View Post

      Many times I will do this for clients if we're using a theme, but take out all of the stock info, logos and text and screenshot it over to Photoshop.

      It seems to work alot better because we put things wherever we want and even email a PDF copy to clients after we're done.

      We work mainly in PS because even if do use a pre-made theme they are typically highly customized...almost not recognizable compared to the stock ones...
      That looks a lot with what I would like to accomplish.

      I would like to use a existing WP site, take some like a screenshot, and then paste the clients logo, some images and fake content in there to send him a sample of a great looking site.

      Could you expand a bit on the process you follow, and can I do this without having PS?

      Thanks in advance.

      G.
      Signature

      Affiliates Wanted! Make anywhere from 42,- to $72 in commissions. Simply Recommend the Best QuickBooks Pro Video Course available at Clickbank.

      {{ DiscussionBoard.errors[6980009].message }}
      • Profile picture of the author ArcherWylde
        Originally Posted by bwh1 View Post

        That looks a lot with what I would like to accomplish.

        I would like to use a existing WP site, take some like a screenshot, and then paste the clients logo, some images and fake content in there to send him a sample of a great looking site.

        Could you expand a bit on the process you follow, and can I do this without having PS?

        Thanks in advance.

        G.
        First thing we do is use Google Chrome's inspect element on the live theme demo page. Right click anywhere on the page and hit "Inspect Element" or hit F12.

        There is an extension for Firefox that allows the same thing called "Firebug", we just prefer to use Google Chrome for the speed of the browser.

        We go through and find the elements we want to "hide" before we take the screen shot and add the CSS class to the side "visibility:hidden;" that way it hides the logo, text, etc but keeps all of the spacing the way it was before.

        Once we get it pretty bare-bones we then hit PrtSc and go over to Photoshop and paste it into a blank image. We work off that as the background.

        You can use other tools, like Gimp...which I think is still free. The biggest thing to keep in mind when working with this is that you need separate layers so that way your elements can be edited individually. We just default to Photoshop because we use it all day long anyways.

        I included some visual aids just because I love pictures
        http://i.imgur.com/O7VBh.jpg
        http://i.imgur.com/9rPrx.jpg
        http://i.imgur.com/jSm7a.jpg
        {{ DiscussionBoard.errors[6980857].message }}

Trending Topics