inPreview

EVERY SINGLE PIXEL, EACH DETAIL IS VERY IMPORTANT FOR US.

Our way of presenting is also important as much as producing the design. InPreview,
provides you to present your design with the best way on different device and resolutions.

You can edit your design way easier and faster than before like copy/paste. You don't need
any plugin installation. You are ready to present with tiny configuration.

Howdy!

inPreview — PSD Template Presentation

This page will help you to work with template. Possibly, we tried to be descriptive to learn about template’s structure and features.

If you have any problem or concern about the product, please don’t hesitate to contact with us. We will help you with satisfaction. Need support →

1Idea

Our way of presenting is also important as much as producing the design. inPreview assists you with minimal design.

Aim To present your design in a best way on different device and resolutions, to give information to your visitors with perfect style and to engage with social network. Other important point is that you can collect your each work, design under one single link.

Powerful and Useful Features for Presentation:

  1. Fullcsreen preview
  2. Sticky/Hidden Navigation
  3. Give information about your projects - explanation, links, social netwok links
  4. Easy to change between alternative page designs (click & radio button)
  5. Links where you can download your design files, source codes or screenshots
  6. Chance to share your design links on social networks
  7. Publish your works with one single link
  8. Option to view your design with 100% width or 1/1 scaled actual resolution.

2Package

Extract the contents of the zipped package downloaded trom themeforest.net to your computer. In the contents of the package, you’ll find these files below:

  • PSD Files — Layers are designated and grouped on all of the PSD files.
  • Documentation — Contains this document.
  • inPreview.zip — Main files (.js, .css)

3Structure

You can edit your design way easier and faster than before like copy/paste. You don't need any plugin installation.

You can upload your local design files to any directory you want on your server.

Folders and Directory structure

  1. assets — folder that includes css, js and images files.
  2. projects — folder that includes your design files (jpg, png).
  3. generate.html — it generates explanation and link structure automatically.
  4. index.html — preview file

Notice: favicon.ico logo.png should be placed under root design directory.

4Compress and Optimise Images

When you export your images from Photoshop, always use the “Save for Web” option. Once your image is exported, you can make it even smaller with an image optimisation tool. These tools are able to strip unnecessary data and compress your images even more than “Save for Web”, usually losslessly.

Some image compression tools you might like to try:

  1. TinyPNG (web-based).
  2. * Ccaesium (windows, mac and linux).
  3. ImageOptim (mac).
  4. ImageAlpha (mac, especially good for optimising transparent PNGs).

source  envato

5Project Generate

project-generate.html a true wizard. Generates code pieces automatically where it belongs to the directory of your project after filling required fields about your project. After all, all you need to do is just copy/paste it.


inPreview - Project Generate
  • /evmetnet

    • 6Projects.JS

    On this step you add generated code blocks to inpreview-projects.js which you already did on previous step. With following "assets/js/" directory, you can find the related file. You can edit codes with any other editor.

    Follow these steps:

    1. Create Project code with project-generate.html and copy.
    2. Paste the code piece that you copied into inpreview-projects.js placed under "assets/js/" directory
    3. index.html — and its ready.

    7Customization

    inPreview, provides speed and simplicity with project-generate option. Just changing your "logo" and "page title", gives you a chance to have a unique interface.

    Follow these steps:

    1. For logo: "assets/img/logo.svg" - it is important to have your logo as ".svg" format to appear as best quality on retina screen.
    2. For the share visual: "assets/img/default-share.jpg" - visual that will be appeared on social network.
    3. For share text: open "index.html" with editor and you are able to edit between pages 20-33. - texts which will appear on social network when its shared.

    8Upload

    You can upload your design files where you prepared in local, to any place you want on the server.

    If you are not familiar with FTP or looking for any FTP software, FileZilla is easy to use.


    How to set up and use Filezilla
  • /evmetnet

    • 9Support and Sources

    If you need any help. Feel free to contact me anytime. I will reply in 24 hours.
    Send a mail from my Themeforest Profile |  Facebook | Twitter

    JS / Tools

    © 2012 Evmet. Pure Passion