How to set up color and get images for portfolio

Background of webpage

Image source: eyeheartworld.org

In terms of web design, it is often best to keep things as simple as

possible. For example, if the main purpose of your website is to
provide information, then you never want to focus on creating a
background that can distract your users from the information that
theyre seeking.

Image source: Dominic L.

1. Text first: Just as a website that uses all text and no images seems
boring and technical, a website that is full of pictures and not much
text will lack information. You should actually compose your text
first, to make sure you have a powerful call to action for the
consumer to purchase your product or service, and then select
images that reinforce that message, not distract from it.
2. Keep it simple and clear: Dont lose sight of the point!

Image Size and Resolution

Image source: jhornig.at

More important than the size your image appears on the screen is
the size of the image file, itself. Smaller files take less time to load
and therefore dont slow down the website and frustrate your
customers.

Smaller files require less bandwidth, which means you may be able
to avoid extra expense with website hosting. The average web page
is 1.28 MB, with slightly more than 60% of that occupied by images.
You dont want to overburden your site with images that slow down
its speed and usability.
Make sure to compress your images with an image cruncher like
compressor.io or tinypng.com. A resolution of 72 ppi with an image
width of 1000px will result in images that are sufficiently clear, yet
demand fewer resources and load quickly.

Choosing color
1. What message do you want to convey to the audience?
2. Select the basic color scheme
Before you select your brand colors, ask yourself what you want your visitors to
feel when they see your website. For instance, do you want your website to convey
warmth and nurture or energy and excitement? Different colors can represent
different messages. For instance, green conveys nature, adventure and youth while
black conveys credibility, strength and power. Once you have agreed on your
brands personality, you can then select the right colors that would accurately
represent it. Colors can represent warmth, confidence, prestige and a host of
adjectives that can trigger various emotions from your visitors.
Color emotion guide

Combination of colors
Next, pick what combination of colors you want to represent your brand. For
instance, do you want complementary colors or contrasting colors?
1) Complementary colors bring out the attributes of each other and connote
harmony.
2) Contrasting colors adds an element of surprise to your brand.
3) Multi-colors help to add a fun and playful vibe to your brand and also connotes
variety.
4) An Analogous color scheme usually consists of colors, several actually that are
next to each other on a twelve point color wheel.
5) Triadic and Tetradic colors are used by combining three colors together. Usually
these colors are situated at about 120 degrees from each other on a twelve step
color wheel. These color are usually bold and bright, even if you are using pale
colors or different shade of the primary color.
To match the call to action buttons with your brand colors, you can use
complementary or contrasting colors depending on if you want to call attention to
the message on the button or have it blended into the site as a more passive

message. You can also play around with how the buttons blend into your color
scheme by having it match your sites background color, if you have one.

https://www.yola.com/blog/picking-the-right-brand-colors-for-your-website/

12 places to get free images

1. Flickr
Several billion images have been uploaded to Flickr since it launched in 2004 (yes, I
said billions!). A large percentage of these images have been released under the
Creative Commons Attribution license. This means that the images can be used on your
website as long as you give the original photographer credit.
Flickr also have a large archive of public domain images. Known as The Commons, the
catalog hopes to become the worlds public photography archives.

Flickr have a huge archive or high quality images. Many images can be used if you
display a credit link in ret.

2. Public Domain Pictures

A wide collection of public domain images. Although the images are free to use, some
restrictions do exist for commercial users, so be sure to check the usage conditions for
each image.

Public Domain Pictures has thousands of photographs to choose from.

3. FreeFoto
A free photo archive that contains over 130,000 images. A link back to the image is
required in order to use them.

You can use FreeFoto images as long as you display an attribution link.

4. DeviantArt
With over thirty million registered users, DeviantArt is one of the largest communities
online for artists and photographers.
Some artists allow their items to be used if you link back to their profile. You can search
for these images through Google using This work is licensed under a Creative
Commons site:deviantart.com. You can also find suitable images at creativecommons.deviantart.com.

DeviantArt has many unique illustrations and photographs.

5. Pixabay
A directory of free public domain photographs, vectors and drawings. All images are of a
high quality and no attribution link is required in order to use them.

Pixabay is a great resource for public domain pictures.

6. Wikimedia Commons
Wikimedia Commons is one of my favorite places to find images for blog posts. Owned
by the Wikimedia Foundation, it hosts over twenty million images and media files. The
quality of images is generally high.

All Wikipedia images are stored on Wikimedia Commons.

7. Creative Commons Search

The Creative Commons organisation has a fantastic search tool that lets you search
resources such as Flickr, Fotopedia, Open Clip Art Library and Pixabay. It is the best
way of finding suitable Creative Commons images.

One of the best ways of finding images that are licensed under the Creative Commons
license.

8. Stock.xchng
Owned by Getty Images, Stock.xchng is a free stock image directory that contains over
400,000 photographs and illustrations. The standard of images varies from poor to high,
therefore you sometimes need to spend a little time to find the right photo.

Stock.xchng has a large collection of free stock images.

9. PhotoDune
Photodune is an affordable stock image solution from Envato that has a collection of
over four and a half million images. Like all stock image services, the price of the image

depends on its size. Small images of around five hundred pixels in width only cost one
dollar.

PhotoDune is a great place to find high quality images at at a fair price.

10. PhotoRack
A large directory of free stock images. It contains hundreds of thousands of
photographs, textures, and wallpapers.

PhotoRack is a good place to find nature photos, city photos, backgrounds and textures.

11. GettyImages
With over eighty million photos in their archives, GettyImages can claim to be the
largest stock image service online. Earlier this month they made thirty five million
images available to bloggers. All you have to do is click on the embed icon and then
paste the code into your post or page.

Getty Images has every type of image you can imagine.

12. ShutterStock
ShutterStock is a royalty-free image service that offers over thirty million images and
vectors. Subscriptions are available that allow you to download a set number of images
per day. Alternatively, you can pay for a package of images.

ShutterStock has a good collection of photographs, vectors and illustrations.

If you found this article useful, I encourage you to subscribe to the Elegant Themes for
free updates on our latest posts.
Please let us know what resource you use for images in the comment area below

Article thumbnail image by YuryImaging / shutterstock.com

By Kevin Muldoon
Kevin is our resident tutorial master. He has years of experience with WordPress, and is
a professional blogger with a special interest in social media, internet marketing and
web design.