mpjcortland.files.wordpress.com  · web viewhow to set up color and get images for portfolio....

24
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 they’re seeking.

Upload: others

Post on 08-Jun-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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 they’re seeking.

Page 2: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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

Page 3: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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: Don’t 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 don’t slow down the website and frustrate your customers.

Page 4: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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 don’t 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 FontBest and Worst Font for Resume, Bloomberg

1. The most common three fonts

Helvetica is the top pick when it comes to playing it safe and straightforward. "It feels professional, lighthearted, honest," Brian Hoff, creative director of Brian Hoff Design tells Bloomberg.

Times New Roman is trickier. Because it has a tired reputation, Hoff says using it shows that you didn't put much thought into your font selection.

Page 5: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

If your experience-heavy resume is cramped for space, go with Garamond, says Matt Luckhurst, the creative director at the brand consultancy company, Collins. Its legibility makes it easy on the eyes.

2. Fancy Choices

Say you're a high roller and want to actually purchase a font. Go with Proxima Nova, which Hoff calls a “cousin to Helvetica” with less of an edge.

“It has a softer feel. Helvetica can be more stiff, and Proxima Nova feels a little rounder,” Hoff says. Proxima Nova is apparently a hit among suits. “I never met a client that didn’t like that typeface,” he says.

If you want something intentionally upscale, try Didot. “It’s very tall, it’s a little fancy, [and] it’s a little feminine,” says Luckhurst. It’s a good option for a fashion job, but not much else, he adds. “It’s like wearing the black dress to the ball. Do you wear a tuxedo to your job interview?”

3. Don’t use:

Page 6: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

You have been using a computer to do a handwritten thing. You haven’t used a computer properly, and you haven’t handwritten properly.” Damn. Don’t use Courier, I guess.

We probably do not even need to discuss this, but you should never use Comic Sans unless you are designing the investment issue of a national business magazine. Do not even look at Comic Sans. It should not be on your résumé “unless you are applying to clown college,” says Hoff.

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 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 brand’s 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

Page 8: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

Combination of colorsNext, 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

Page 9: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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

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

Page 10: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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 world’s 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

Page 11: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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.

Page 12: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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 creative-commons.deviantart.com.

Page 13: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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.

Page 14: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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.

Page 15: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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.

Page 16: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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.

Page 17: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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

Page 18: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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.

Page 19: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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.

Page 20: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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.

Page 21: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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

Page 22: mpjcortland.files.wordpress.com  · Web viewHow to set up color and get images for portfolio. Background of webpage. Image source: eyeheartworld.org In terms of web design, it is

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.