Following on from Part 2 – Designing in Photoshop, the next phase is preparing your work to sell. Each Market Place has slightly different requirements, but are mostly the same except for preview images.
Tidy your Photoshop layers
For the reviewed Market places like ThemeForest, all your layers need to be named, tidy and folders & effects closed. It’s also nice for your buyers to open a file that is easy to follow. For example give your layers meaningful names like; flower top right, box background, title underline etc. When you’re done close all folders.
To close all layers & folders with one click: hold SHIFT + Ctrl and click a folder in the layers tab.
Save previews of each page.
Save a preview jpg or png of everything that is for sale in your item, so potential customers know exactly whats on offer.
Create a Main Preview Graphic
Create an interesting image that is a summary of what is for sale. Include details such as the number of files, what format the files are, colour versions etc.
TIP: It’s also a good idea to appear to offer a Bonus or Extras, such as a slightly different version or extra files.
The dimentions of the files depends on the Market Place:
- ThemeForest – 590x300px
- GraphicRiver – allow preview images of any height.
- Creative Market – 580 x 386px min size (1160x772px ideal for hi-res)
Create a Thumbnail
Themeforest also requires a thumbnail image at 80x80px. A thumbnail is super important when it’s all people have to go off until they hover over the image for the preview image to popup. So include part of your design if you can. We also chose to have a border around ours and overlaying the file type (WP, PSD, HTML etc) so we stood out in the crowd and our brand is easily recognised.
Create a Help File
This can be as simple as a .txt file or as fancy as a HTML file with anchor links. The important thing is to include ALL the information your buyer will need to edit it, and where to go if they need more help.
Example Simple Help File:
Refresh 4 Page PSD Version 1.0
Designed by BakerWebDev https://creativemarket.com/BakerWebDev
Home Page: https://bakerwebdev.net———
Hello and welcome to the help file for the Refresh. These instructions assume a basic understanding of photoshop so I will outline a few of the tricker techniques used below.
Fonts:
The fonts used are from google fonts online library.
- Logo: Merriweather (https://fonts.google.com/specimen/Merriweather)
- Menu: Source Sans Pro (https://fonts.google.com/specimen/Source+Sans+Pro)
- Titles: Merriweather (https://fonts.google.com/specimen/Merriweather)
- Body font: Source Sans Pro (https://fonts.google.com/specimen/Source+Sans+Pro)
- Icons: Font Awesome (https://fortawesome.github.io/Font-Awesome/)
———
Photos:
The photos used in the design are under a royalty free, public domain licence and can be used by you for free. (released free of copyrights under Creative Commons CC0. You may download, modify, distribute, and use them royalty-free for anything you like, even in commercial applications. Attribution is not required.) They were sourced from here: https://pixabay.com/
———
Icons: (social icons & service icons)
To change the icons used in the example, download and install the font awesome font here (https://fortawesome.github.io/Font-Awesome/).
1.Go to the “cheat sheet” page,
2.find the icon you want to use,
3.highlight the icon on the screen,
4.right-click and copy it.
5.Open photoshop,
6.go to the the correct layer, for example the social icons.
7.select the text tool and paste your icon. It should then appear.
8. If you only see a square or nothing at all make sure the font on that layer is selected as “font Awesome”.———
Changing the logo:
The logo is plain text and can be edited directly on the layer.
———
Thank you for purchasing our File. If you have any questions, please feel free to email design@bakerwebdev.net
Name All your Files Consistently
Name all your files professionally, include your username.
Themeforest Photoshop Files
For ThemeForest you must remove all photos from your photoshop files before uploading (even if they are yours & royalty free). This is a paaaaaaaaaain if you have to make changes later on and need to resave a preview. On the plus it makes the file size smaller.
Once the files are 100% tidy, I duplicate my Item Folder on my computer and call it “Download with photos” and ” Download no photos”. In the no photos files I place a grey colour overlay on the photo layers and “rasterize layer style”.
Zip it up buttercup!
You’re almost there! Zip up your files for sale include the help file and any assets that the buyer needs. Name your file Download-filename-username.zip
Preview images (for themeforest, include the main preview image in this file. Name each jpg 01-filename.jpg, 02-filename.jpg etc to select the order they appear in. Name your file Preview-filename-username.zip
Start your upload on the MarketPlace
Head to ThemeForest.net or CreativeMarket.com and follow the onscreen instructions for submitting a new file for sale.
Description Tips:
- Fill out the form using very descriptive language, include the style your website is (vintage, modern, corporate).
- Include the colours and variations of the colours like, pink, peach, cream, orange, people use different words for the same colour.
- Mention the possible uses for the file (childrens clothing, kindergarten, play centre etc)
- It can be helpful to see what keywords your competitors use.
Submit
On ThemeForest you hit submit and pray you get through (ha ha). On Creative Market your file is live straightaway, Whoo!
The review queue for ThemeForest can be days, weeks or months depending on the busyness. So it’s best to get started on your next file instead of waiting until this one is approved. It’s likely you will get at least 1 rejection and suggested changes before your file goes live.
Thanks for making it this far!
I hope you have enjoyed this insight into my design process from idea to designing and finally getting your file up for sale. I would love to hear your own tips and processes as I’m always wiling to streamline my work further!
