Working with Website Images - DrPic

build a websiteIn our last tutorial, we looked at how to prepare images for your website using a free online image editing programme called DrPic. Today we’ll continue to look at the options and settings available in this programme to help you prepare the best possible images for your pages. Images are by far one of the most important components of your website pages. Images are vital to display the products or services you are providing. They help create a first impression for your company and the people involved to internet users and they add that all important colour and interest to your pages. The quality of your images is vitally important and as a website builder you need to make sure you are using the best possible images available. An image editing programme can help you do this.

An image editing programme not only helps you to get the best out of the images you have, they also allow you to compress the size of your images so that your pages upload quickly and cleanly. When internet users click onto your website, you don’t want them waiting several minutes for your pictures to appear. Minutes seem like hours when it comes to the internet, so you should aim to make your images upload within seconds of the page appearing rather than dragging behind and slowing everything up.

build a websiteWhen resizing your images, you may require various sizes for different applications on your pages but work between 100 pixels wide for small thumbnail sizes and a max size of 400 pixels wide. Compressing your image to the right size is made easy with just 4 choices, 25% - 10KB, 50% - 14KB, 75% - 19KB and 100% - 130KB. 50% is a good safe middle ground but go by the quality. Once you’ve finished editing, save it as a Jpeg or Gif and place your newly edited image into a new folder on your computer so you can find them easily when you need to.

Let’s look at some of the other settings you can apply to your images on DrPic.

Open DrPic in your browser window at Open your first image and start editing straight away.

Select your image to start editing either by pressing CtrA on your keyboard or by clicking the select all button at the top. You can click inside your image and drag to move. You can also hold down the Shift key on your keyboard while resizing the selection. Double-click inside to crop. Click outside to deselect.

build a websiteAutofix: Allows you to automatically adjust the brightness and contrast of your picture. If you don’t like the oucome, simply click the undo button and amend it yourself using the Brightness / Contrast button to its left.

build a websiteText: allows you to add text to your picture with various font styles. This is great for adding titles or descriptions to your images. It’s also really handy for producing link / menu buttons for your pages or special offer banners.

build a websiteRaise: Add a translucent 3D outer bevel border to your images. This is a great tool for making your best product images stand out. Choose how deep you want the border to appear and apply to either the whole image or just certain parts of an image.

Raised Frame: An alternative border option. With this 3D frame option, you can choose a colour and the size.

At any time you can undo any changes you make by clicking the Undo button at the top of the editing window.

Now login into your website. Go to the page (Step 3) or the item (Step 4) you want the image to appear on and upload it. Your newly edited image should load quite quickly.

We’ll look at some of the more artistic effects available on DrPic next time.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
This blog is running version
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');