Categories
Social Media Video Websites Tips

How to Download Video from Facebook – Easy Steps

It often comes up that you may want to download / save a video to your computer that someone has posted to Facebook.

This is an easy process with a couple of easy clicks. Following these simple steps:

  1. Copy the URL of the video you want to download. You can do this by going to the post of the URL or right clicking on the vid where you might see it on a timeline and selecting “copy URL”

2.Replace the www in the URL with m – this brings you to the Facebook Mobile site.

e.g. http://www.facebook.com/examplevidhttp://m.facebook.com/blahblah

3.Once you are at the new URL, play your video.

4.While the video is playing right click on the video screen and select “save video as”

 

That’s it! Your video will have saved to your downloads in your computer device.

Happy surfing!

 

Categories
Content Marketing Design Freebies Graphic Design Sales & Marketing Social Media Websites Tips

Free Photos To Use On Your Website or Blog

Quality visuals are essential to brand marketing which relies on rich visuals to attract and engage brand audience. Using photos you found online could mean infringing on copyright laws. So how does one find free images that are 100% legal to use?

SEARCH ENGINE IMAGE SEARCH

One way to find free images that are available and legal to reuse for your website is by searching your preferred search engine. I will use google here but most search engines offer a version of this option.

Search by Images in the google search engine. Here you will see a tab “tools”; here there is an option to choose “usage rights”. Selecting  “labeled for reuse with modification” means that these images are labeled as free to use, share or modify even commercially, totally free!

https://www.google.ca/advanced_image_search

PIXABAY Free Images

My next tip is the site pixabay. Pixabay offers free high quality images and videos with a polished commercial look.
https://pixabay.com/

NYPL DIGITAL COLLECTIONS

For something a little different is the New York Public Libraries online digital collections which is mostly comprised of vintage imagery.
https://digitalcollections.nypl.org/
When searching for a term, I recommend ticking off the box “search only public domain materials”

Interested in more free online tool design resources?

Check out more of my blog posts…

Colour Picker by Paletton – Free Online Colour Scheme Tool

Free Vector Icons for your Website or Blog

Categories
Apps Design Freebies Graphic Design Photography Websites Tips

Image Optimization for Web

The important thing to remember is that every webpage has a PAGE LOAD TIME.
This is calculated by how much data needs to be uploaded to the users computer. The data on a page can also be called the WEB PAGE WEIGHT.

Other factors include the internet providers service, such as high speed vs. dial up.
So more web page weight= more web page load time = poor user experience = poor return rates and poor conversion of web traffic to sales. So keeping your web site load times in check and optimal increases your likelihood of having a successful website.

Sites like Pingdom can help you figure out how fast your websites webpages are loading
https://tools.pingdom.com/

The largest culprits of a heavy page weight/ slow page load time is media. Images are the biggest culprit of a slow website. Video and audio can also be suspect. After that, forms, java script and other special bells and whistles can really drag on a pages load time.

My clients primary concern is images and this is what we will concern ourselves with here today.
Estimates are that you should try and keep your websites webpage weight at under 200 kb. These means that all elements on that page should total the web page weight at under 200 kb.

One image can easily be twice that size if you don’t compress it. But if you know how to save your images for website optimization and if you know how to compress them, you will gain the advantage! Your site will be in control of your image content rather than you image content being in control of your site.

FIGURE OUT YOUR IMAGE DIMENSION AND SIZE
Figure out what you’re working with and how much work you need to do to get your images optimized properly. This should be as simple as right clicking your image and clicking “get info”. This will display some of the info data on the image including these two main factors of “size” & “dimensions”

SIZE THE IMAGE HEIGHT AND WIDTH APPROPRIATELY
Images displayed on your computer use pixels. The quality and amount of pixels needed to display a large printed photo to hang on your wall is much bigger than what you want to display on a computer screen. Typically a full screen background image is ideal with the proportions of 1250 X 800 pixels.
Your camera could be taking photos 3-6 times that amount which is great for printing but very superfluous for use on the web.

So start by saving your photo with smaller dimensions in an image editor on your computer (you can even do this in wordpress itself under “edit image”) so now save it to these full screen background proportions of 1250 X 800 if that’s what it’s being used for. Otherwise you can save it smaller than that for a banner or blog post image which don’t need to be fullscreen and will probably display at half that size or smaller.

COMPRESS THE IMAGE
Next is to compress the image in some file format, usually a jpg
This site offers info on working with the different file formats such as .gif, .png and .tiff
http://inobscuro.com/tutorials/optimizing-images-for-web-35/

How to compress your image for web optimization
1.Use an Image Editor

Compress the newly and appropriately sized image (1250 X 800px or less ) by finding the option in your image editor to save for web . This option should display your compression options and data
THis one is free
https://pixlr.com/
here’s some more..

9 Best Free Image Editors

http://mashable.com/2013/07/22/free-image-editors/#WAVaAS9jzmqo
16 essential photo editor apps
http://www.creativebloq.com/software/best-photo-editor-51411752

2. Use a Plug IN (wordpress)
There are many image optimization plug ins out there for wordpress. If you google image optimization plug in, you can find reviews on several of the most current and relevant.
I have recently tried this popular one called SMUSH IT . It is easy to use, once you’ve downloaded it and activated the SMUSH IT plug in, your image files in your website media library will now have a SMUSH IT botton and all you need do is press it.

SMUSH IT
https://en-ca.wordpress.org/plugins/wp-smushit/

3.COMPRESS ONLINE
Websites like Optimizilla may give you the most efficiency for the least tech proficiency. Just load your images to the site and voila! Compressed jpgs

http://optimizilla.com/
With Optimizilla you can control the amount compressed and preview it with the Quality meter on the right. Lower the quality meter and you reduce the file size. This may sound unfortunate to lose “quality” but for the purpose of a website, a fair bit of quality loss can go mostly unnoticed. Optimizilla allows for you to preview the compressed image rates so you can decide for yourself how much compression the image can take while maintaining a good enough quality image to display.
I hope this covered some of what you need to know to achieve a fast loading website and confidence using images on your website and blogs. Images are a great tool for the web and I encourage you to use them. But you’ll be doing your website a favor if you know how to use them wisely.

Wikipedia explains data compression:

“In signal processing, data compression, source coding, or bit-rate reduction involves encoding information using fewer bits than the original representation. Compression can be either lossy or lossless. … The process of reducing the size of a data file is referred to as data compression.”

Compression is useful because it reduces resources required to store and transmit data. Computational resources are consumed in the compression process and, usually, in the reversal of the process (decompression). Data compression is subject to a space–time complexity trade-off. For instance, a compression scheme for video may require expensive hardware for the video to be decompressed fast enough to be viewed as it is being decompressed, and the option to decompress the video in full before watching it may be inconvenient or require additional storage. The design of data compression schemes involves trade-offs among various factors, including the degree of compression, the amount of distortion introduced (when using lossy data compression), and the computational resources required to compress and decompress the data.[5][6]”
(Read more at https://en.wikipedia.org/wiki/Data_compression )

Categories
Content Marketing Design Freebies Graphic Design Websites Tips

Free Vectors Online For Your Website or Blog

Vector images are a great way to add unique and iconic visuals to your website, blog or promotional materials. Read on to find out my top resources for getting free vectors online.

What is a vector?

A vector is a graphic that maintains it’s resolution no matter how large or small because it is built differently than a graphic image like a photograph is. Instead of being built off of lets say pixels, it is built off mathematical proportions. For example, you know all those clean logos that you see facebook or twitter use with the f in the bluebox or the birdie? Those are vectors.

Vectors are great for logos, or for icons for things like visual display of categories & signs, such as a dollar sign for where to pay or a toilet sign for where to use the lavatory.

Free Vectors Online

Here are my top two recommendations for places to find free vectors online for commercial and personal use.

1. www.freepik.com

“More than a million free vectors, PSD, photos and free icons. Exclusive freebies and all graphic resources that you need for your projects.”
Free pik is competing as the place to go for free vectors and graphics so this site is pretty loaded with goodies.

 

2. Smashing Magazine / Freebies

https://www.smashingmagazine.com/tag/freebies/

“Smashing Magazine — for web designers and developers.”
Listing themselves as a site for web designers and developers, so this is a trade secret I am sharing with you! But don’t be daunted by the formality of this. While you may not understand most of what this site has to offer, I am linking you to their “freebie” area which is pretty straight forward and which is wonderfully loaded with awesome freedbie vector packs. While they may be free, you should be sure to double check any other stipulations they may have as they may request attribution or not that you can’t resell the vectors (you did get them for free after all!). But generally most of these vector packs are free to use for your own projects.

 

Interested in more free online tool design resources?

Check out more of my blog posts…

Free Images to Use of Your Website of Blog

Colour Picker by Paletton – Free Online Colour Scheme Tool

Categories
Design Freebies Graphic Design Photography Websites Tips

Full Screen Background Images for Web

I am a big fan of full screen background images used for a websites design.

2/3 screen to 1/3 screen is good too! The important thing is a nice glossy looking image to fill that space with good visual content.  A good quality photograph to convey your sites appeal is not something to be underestimated in terms of the visual impact and appeal that this can have for your website users. As someone who designs and builds websites, and who also is graphic artist and photographer, I can tell you that desiging a website is much easier for me when I have good visual photos to start with. The amount of energy and time that is required to make graphics that are as appealing as photographs isn’t quite the easy ticket as it is when working with good quality professional photos. To me, the ideal for 90% of nicely designed websites is good quality professional photo representation for your site and once this is taken care of, then embellishing with some well places graphics personal to your site.

So that being said, if you’re thinking of DIY building or hiring for a website, please do yourself the favour of taking the first steps of having some photos taken with your website in mind. This is important to have photos taken with the purpose of a website in mind because even though you might already have some great photos hanging around, you might find that they will not work as well with your site as there are certain key details to be mindful of for photographing for the purpose of presentation for web.

 

Width Wise Photos

The first and most obvious thing I try to convey to my clients whether they are selecting images from their personal photo library or hiring a photographer is the simple detail of having mostly width-wise images to work with. Computer screen monitors are width-wise, so most of your photo will want to follow suit, and this is certain for your fullscreen background image!

 

Dimensions and DPI (Dots Per Inch)

The photos most cameras will take will be significantly larger in size and pixels than you should have for your website. This is because cameras are generally made to be good enough for the option to print pictures in large formats to hang on your wall. This quality of image is much better quality and thus larger than what the web likes, because for the purpose of efficient webpage load times, images need to be smaller in dimension and quality for web than for print. For more info on saving images for web, please read my blog post Image Optimization for Web

 

With all that being said, these are the general details for good quality full screen backgrounds for web :

Dimensions: 1250 X 800 px

Resolution : 72 dpi (dots per inch)

 

Some of my other tips for your consideration for the purpose of website presentation include:

 

Colour Contrast

Bear in mind that there is likely to be other content on your website such as Text, Buttons and possibly graphics, forms etc. Especially if your background images are to be layered with these other elements, you will want to ensure that all elements are legible with contrast. If you have a dark background, the other elements should be light and vice versa to ensure high contrast.

 

Testing It Out

Once you’ve got some images to work with, be sure to test out their display or different browsers (Chrome, Safari, Firefox etc), devices (desktop, laptops, mobile, tablets) and screen sizes. All of these are factors in how your site and images will display so be sure to check out how your full screen background image will display with all these different factors.