4. Editable PSD Files

Working with Images and Copy

Now that you have setup the design kit’s demo pages, you can start updating the site with your own content. Onyx design kit has several customizable elements, where you need to add your images. You will find Photoshop files for each customizable element in the kit.  You will need Photoshop to add your own images to the covers, or edit text for areas where it's saved as an image. We have prepared a video where we cover the principles of working with these files in Photoshop and saving your own elements for Onyx design kit. 

But before that, there are several things to remember when Working with Images for digital use: 

    1.    Resize your Images

Make sure to resize all of your images before uploading them to the site. For horizontal images we recommend width at least 1920pixels (for full screen images the width should be at least 2400pixels), and for vertical ones: width at least 1280pixels (in most of our videos we use 2400x1600pixels for horizontal images and 1500x2250pixels for vertical images). This sizing is big enough to keep the images crisp, while also not slowing down your site’s load time.  

    2.    Save for Web

When you finalize resizing your images, choose the option Export -> Save for Web, instead of Save As. This will remove all proprietary data from the file and will result in smaller file size. 

    3.    Save as JPEG

Save all your images as JPEG, as this ensures that the browsers will render them in good quality. Unless a visual element needs to be on a transparent background, then you should save it as PNG.  

    4.    Optimize your Images

We use JPEGmini to optimize the images. You can download their trial and optimize up to 200 images before being asked to buy one of their plans. There are also other tools that you can use, i.e. https://tinypng.com

Note: Please note that some of the graphics, specifically images on section Portfolio/About and section of boxed images from Homepage, that are described in the video below are not relevant any longer since these can be edited without Photoshop files (check article Updates).

PASSCODE: onyx

Preparing Written Content

Good job at uploading your own images to the site! You are one step away before you have all your content ready. Now it's time to work on your copy. We recommend the following process for preparing your written content:

1. Copy/paste the demo's text into a separate text document (i.e. you can use Evernote, WordDocument, Mac's Text document, etc.).

2. Estimate the number of characters for each section. There's a lot of online resources that count characters, while you can also view the character and word count in most text documents. Identify those sections that would allow lengthier text, such as About page. Other than that try to  stick to character count 

3. Establish your content strategy, replying to the following 4 main questions: Who is your Target Audience? How much written content you plan to have on the site and how often you plan to update it? (be realistic here about your time resources) If you were to break down your content to one message, which one would that be? What is your final Call to Action?

4. Start writing your own content instead based around your Content Strategy. 

5. If it's a new site, have at least 3 blogposts ready for launch. The first one can be an announcement about your new site's launch, while the next one can dive a bit more about yourself and then about your work. Don't overcomplicate it, and remember that sometimes Less is More. 

6.  When you're done, have a friend, relative, or industry peer, proofread your Content for mistakes, but also don't hesitate to ask them for feedback and impressions on the actual message of the content. Make adjustments if necessary! 

Congrats on adding your content and images to the site. Check out our next article with a comprehensive checklist to prepare your site for launch.