Digital Portfolio 4 - Color and Others

8/18/2019 Digital Portfolio 4 - Color and Others

1/20

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 aspossible. For example, if the main purpose of your website is toprovide information, then you never want to focus on creating abackground that can distract your users from the information thatthey’re seeking.

http://eyeheartworld.org/pages/abouthttp://eyeheartworld.org/pages/about


2/20

•

•

•

•

Image source: Dominic L.

https://dribbble.com/shots/2300165-Bestake-Stories-Aroundhttps://dribbble.com/shots/2300165-Bestake-Stories-Around


3/20

1. Text rst! "ust as a website that uses all text and no images seemsboring and technical, a website that is full of pictures and not muchtext will lack information. #ou should actually compose your textrst, to make sure you have a powerful call to action for theconsumer to purchase your product or service, and then selectimages that reinforce that message, not distract from it.

$. %eep it simple and clear! &on’t lose sight of the point'

Image Size and Resolution

Image source: jhornig.at

(ore important than the si)e your image appears on the screen isthe si)e of the image le, itself. *maller les take less time to loadand therefore don’t slow down the website and frustrate yourcustomers.

http://www.jhornig.at/http://www.jhornig.at/


4/20

*maller les re+uire less bandwidth, which means you may be ableto avoid extra expense with website hosting. The average web pageis 1.$ (-, with slightly more than /0 of that occupied by images.

#ou don’t want to overburden your site with images that slow downits speed and usability.

(ake sure to compress your images with an image cruncher likecompressor.io or tinypng.com. resolution of 2$ ppi with an imagewidth of 1///px will result in images that are su3ciently clear, yetdemand fewer resources and load +uickly.

Choosing color1. 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 ecitement? !ifferent colors can re"resent

different messages. For instance, green conveys nature, adventure and youth while

black conveys credibility, strength and "ower. #nce you have agreed on your

brand$s "ersonality, you can then select the right colors that would accurately

re"resent it. %olors can re"resent warmth, confidence, "restige and a host of

ad&ectives that can trigger various emotions from your visitors.

Color emotion guide


5/20


6/20

Combination of colors 'et, "ick what combination of colors you want to re"resent your brand. For

instance, do you want com"lementary colors or contrasting colors?

1( %om"lementary colors bring out the attributes of each other and connote

harmony.

2( %ontrasting colors adds an element of sur"rise to your brand.

)( *ulti+colors hel" to add a fun and "layful vibe to your brand and also connotes

variety.

( -n -nalogous color scheme usually consists of colors, several actually that are

net to each other on a twelve "oint color wheel.

( /riadic and /etradic colors are used by combining three colors together. 0suallythese colors are situated at about 12 degrees from each other on a twelve ste"

color wheel. /hese color are usually bold and bright, even if you are using "alecolors or different shade of the "rimary color.

/o match the call to action buttons with your brand colors, you can use

com"lementary or contrasting colors de"ending on if you want to call attention to

the message on the button or have it blended into the site as a more "assive


7/20

message. ou can also "lay around with how the buttons blend into your color

scheme by having it match your site$s background color, if you have one.

https!44www.yola.com4blog4picking5the5right5brand5colors5for5your5website4

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


8/20

12 places to get free images

1. Flickr

Several billion images have been uploaded to Flickr since it launched in 2004 (yes, said billions!". # large percentage of these images have been released under the

$reative $ommons #ttribution license. %his means that the images can be used on your

&ebsite as long as you give the original photographer credit.

Flickr also have a large archive of public domain images. 'no&n as %he $ommons, the

catalog hopes to become the &orlds public photography archives.

Flickr have a huge archive or high )uality images. *any images can be used if you

display a credit link in ret.

2. +ublic omain +ictures

http://www.flickr.com/http://www.flickr.com/commonshttp://www.publicdomainpictures.net/http://www.flickr.com/http://www.flickr.com/commonshttp://www.publicdomainpictures.net/


9/20

# &ide collection of public domain images. #lthough the images are free to use, some

restrictions do e-ist for commercial users, so be sure to check the usage conditions for

each image.

+ublic omain +ictures has thousands of photographs to choose from.

. FreeFoto

# free photo archive that contains over 10,000 images. # link back to the image is

re)uired in order to use them.

http://www.freefoto.com/http://www.freefoto.com/


10/20

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

4. eviant#rt

ith over thirty million registered users, eviant#rt is one of the largest communities

online for artists and photographers.

Some artists allo& their items to be used if you link back to their profile. /ou can search

for these images through oogle using “This work is licensed under a Creative

Commons” site:deviantart.com. /ou can also find suitable images at creative

commons.deviantart.com.

http://www.deviantart.com/http://creative-commons.deviantart.com/http://creative-commons.deviantart.com/http://www.deviantart.com/http://creative-commons.deviantart.com/http://creative-commons.deviantart.com/


11/20

eviant#rt has many uni)ue illustrations and photographs.

3. +i-abay

# directory of free public domain photographs, vectors and dra&ings. #ll images are of a

high )uality and no attribution link is re)uired in order to use them.

http://pixabay.com/http://pixabay.com/


12/20

+i-abay is a great resource for public domain pictures.

. ikimedia $ommons

ikimedia $ommons is one of my favorite places to find images for blog posts. 5&ned

by the ikimedia Foundation, it hosts over t&enty million images and media files. %he

)uality of images is generally high.

http://commons.wikimedia.org/wiki/Main_Pagehttp://commons.wikimedia.org/wiki/Main_Page


13/20

#ll ikipedia images are stored on ikimedia $ommons.

6. $reative $ommons Search

%he $reative $ommons organisation has a fantastic search tool that lets you search

resources such as Flickr, Fotopedia, 5pen $lip #rt 7ibrary and +i-abay. t is the best

&ay of finding suitable $reative $ommons images.

http://search.creativecommons.org/http://www.fotopedia.com/https://openclipart.org/http://search.creativecommons.org/http://www.fotopedia.com/https://openclipart.org/


14/20

5ne of the best &ays of finding images that are licensed under the $reative $ommons

license.

8. Stock.-chng

5&ned by etty mages, Stock.-chng is a free stock image directory that contains over

400,000 photographs and illustrations. %he standard of images varies from poor to high,therefore you sometimes need to spend a little time to find the right photo.

http://www.sxc.hu/http://www.sxc.hu/


15/20

Stock.-chng has a large collection of free stock images.

9. +hotoune

+hotodune is an affordable stock image solution from :nvato that has a collection of

over four and a half million images. 7ike all stock image services, the price of the image

http://photodune.net/http://www.envato.com/http://photodune.net/http://www.envato.com/


16/20

depends on its si;e. Small images of around five hundred pi-els in &idth only cost one

dollar.

+hotoune is a great place to find high )uality images at at a fair price.

10. +hoto


17/20

+hoto


18/20

etty mages has every type of image you can imagine.

12. ShutterStock

ShutterStock is a royaltyfree image service that offers over thirty million images and

vectors. Subscriptions are available that allo& you to do&nload a set number of images

per day. #lternatively, you can pay for a package of images.

http://www.shutterstock.com/http://www.shutterstock.com/


19/20

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

f you found this article useful, encourage you to subscribe to the :legant %hemes for

free updates on our latest posts.

+lease let us kno& &hat resource you use for images in the comment area belo&

Article thumbnail image by YuryImaging / shutterstock.com


20/20

=y 'evin *uldoon

'evin is our resident tutorial master. >e has years of e-perience &ith ord+ress, and is

a professional blogger &ith a special interest in social media, internet marketing and

&eb design.

Digital Portfolio 4 - Color and Others

Documents