top of page

VISUALS: IMAGES

Yes, text is always number one in the hierarchy in terms of the content of any graphic design product. However, for that content to be displayed as effectively as it can be you also need really good visuals. Not just a visual that shows your content in any which way but a visual that shows the content in an aesthetically pronounced manner. Meaning:

  • good composition

  • good balance of elements

  • good color scheme

  • clear, and crisp

  • high resolution

  • high quality, with no "visual artifacts" that occur from inadequately low resolutions or badly used image processing effects.

While it used to be quite difficult to find free images that answer all of these requirements, these days this is no longer an issue given that there are excellent creative commons usage image (and video) portals that let you download high quality, high resolution images at no charge.

IMAGE FORMATS AND IMAGE SIZE

FORMAT

There are 2 basic image formats that we will be using for Wix uploads:

  • JPEG (acronym for Joint Photographic Experts Group) is a high quality compressed bitmap file that has no transparency. 

  • PNG (acronym for Portable Network Graphics) is a very high quality compressed bitmap that can also have transparency and semi transparencies. They have larger file sizes than JPEGs, but since they preserve high quality  with high load time they have become the format of choice in web design. 

High quality images have to do with the size of the image - in pixels! There is a misconception that in web design the PPI (pixels per inch) matters just the same as it does in print media. This is incorrect. What we are looking for instead is the overall width and height of the image in pixels - not inches or centimeters but pixels - since pixels are what matter in screen based visual work. 

This importance of size has to do with the fact that:

  • Bitmap files (JPEG, PNG, GIF etc) cannot be sized up.

  • You can make a bitmap file much smaller by scaling it down - no problems at all when you do that. 

  • However if you scale it up by even a tiny amount you will start to get visual artifacts such as pixilation, blurring and hardenings around straight or hard edges.

Therefore the smart thing to do is to always start out with large sized images that you scale down if needed, rather than small or even medium sized images that you try to scale up, which is something that will never work. Here are the minimum sizes needed for different usages:

  • 2000 pixels or above for full width images that you place inside things like strips. 

  • 1024 pixels or above for text images like I am showing you on this page >>>.

  • Note that Wix does not allow for images above 3000 pixels wide or high to be uploaded and will automatically resize any such upload down to 3000 pixels.

    • Therefore if you decide to take a crop out of an image, this restriction will need to be taken into consideration.

    • It is a better idea to open large sized images in Photopea or in Pixlr and make your crops there, and only upload to Wix after that.

    • In this way you will not suffer size loss which will inevitably happen inside the Wix photo editor when you take a crop out of an image that is only 3000 pixels wide or high.

CURATING

CURATING

The 4 thumbnails above show you collections that I made on the 4 recommended resource portals for images. These are Pexels (top left), Pixabay (top right), Freepik (bottom left) and Unsplash (bottom right).

When we look for the definition of the term "curating" on dictionary.com we find it to be "to pull together, sift through, and select for presentation, as music or website content." And that is precisely what we do when we select the visual material that we put on out site. So, instead of taking every photograph ourselves, or painting every picture or drawing every vector ourselves we select from the vast creative commons licensed resources that are available online. 

Here are some of the things to pay attention to when you do this:

  • Use resource portals rather than opting for the regular search engine or what you will get from social media sites since:

    1. The material that you find on resource portals will have no copyright infringement issues attached to them, you will be using the stuff with the creator's permission.

    2. The material that the resource portal shows you will be pre-selected by them, which means that both the technical as well as the visual quality will be vastly superior to what you will find from a google search or a social media site where anyone can upload whatever they like. Resource portals screen the submitted material before they put it at your disposal - and that is a major difference.​

    3. The image resolutions on a resource portal will be very big (usually 5000+ pixels) and this will make it very easy to obtain high quality crops out of such big images.

  • Create an account before you start browsing

  • Get organized by creating collections because: 

  1. There will be lots of photos that you will want to compare and decide among and unless you bookmark them inside a collection you will not be able to find them again. These portals are enormous; giving you tens of thousands and very often hundreds of thousands of results, and there is no way to keep up with that amount unless you get organized.

  2. When you curate things it is as important to have a visual relationship between items as it is to have a contextual one. Placing images inside a collection and looking at them together will help you get a visual continuity, as I am showing you in the 4 images above. While I was looking for images under one concept, I didn't just try to find images that showed what I was looking for but also paid a lot of attention to how they showed what they were showing such as color schemes, lighting, composition, and focus. 

​

EDITING

EDITING

Here are your options for image editing for which I am also showing you screenshots in the 4 piece gallery below:

  • Pixlr: A minimal interfaced online photo editing software that is part of a wider suite of photo editing tools. Particularly recommended is their collage maker which I use myself quite a bit as well. Here is a tutorial to learn the basics >>>. 

  • Photopea: A "light" online version of photoshop that has all the basics of the real big photoshop covered - except for the smart layers and objects. With the added feature that it will also open vector formats and let you manipulate them, which is something that the real photoshop doesn't let you do all that easily.  Here is a playlist of tutorials for photopea >>>. And here is a short introductory tutorial >>>.

  • The built in Wix Photo Editor: You can access this through any image that you either place on the page itself or inside a gallery or a strip by clicking on the adjust button that you will find under the settings icon which is the wheel. This will take you to the Photo Editor. I would advise you to stay away from doing ambitious stuff inside this editor and especially to stay away from the effects and filters that they have.  But for basic color adjustments and large scale crops, where you are not cutting too deeply into the image, it is a perfectly adequate tool. 

  • And then there is a highly developed and completely free image editor called Gimp >>> and I would be remiss in my duties if I didn't point this out to you also. I am primarily a photoshop user, but I also use Gimp - it is that good, especially when it comes to the plugins and filters, of which they have a very big variety of built-in ones but also a big community of developers who also contribute. And, as said, it is all free software.

Note: In the first video at the top of this page I am giving a basic tutorial on the usage of the Wix photo editor as well as a short overview of photopea. Please check these out also.

And then finally I want to alert you to the crop tool that you will find at the top bar, third icon after "Change Image", as soon as you click on the image as shown in the image on the left above. When clicked this icon will allow you to crop the current instance of your image. In other words your original image will stay exactly as it is but you will be able to crop it and also resize and move it within the crop area. The tool also lets you access different shapes into which your image can be cropped and by clicking on the + button at the top of this tab will take you to an even bigger selection of vector elements on Wix that can be used for such crops.

Caution: Be very judicious in  your usage of these shape crops. While some can greatly enhance the interest of your picture, many are downright silly or are clichés such as  Miki Mouse heads or dollar signs and hearts..

IMAGE USAGE INSIDE WIX

  • You can place an image directly on the page after you have imported it.

    • There will be a row of icons at the top, starting from a text button that says "Change Image" from where you can replace your image with another one but also edit it inside Wix, using the Wix Photo Editor. Watch out for the small adjust icon with tiny sliders if toy wish to do that.

    • Aside from this you can add a border around your image by clicking on the brush icon,

    • crop it by clicking on the crop icon (as already explained above),

    • give it an effect (my advice is DON'T btw!!!) by clicking on the effect icon,

    • animate it by clicking on the animate icon,

    • and link it to something by clicking on the link icon. 

  • You can place images inside galleries, which are a very nice component of Wix. 

  • You can place an image inside a strip and stretch this strip to the full width of the page and also give it some very nice scroll animations.

  • You can place images inside Lightboxes.

​

DESIGN TIPS
bottom of page