Publishing content to the Internet isn’t an easy task if you’re just starting out.
So, we put together some useful tips for new web editors, designers and developers to help when working with online content.
Some of these tips you’re probably already aware of and use regularly. However, even the most advanced web expert will find a few of the tricks below to be new and useful.
Everything this blog mentions is free! All you need is a computer, internet connection, patience and practice to get the most use out of them.
1. Use common keyboard shortcuts
Below are some the most common keyboard shortcuts to know when it comes to working on a website. You may already be familiar with some from other programs like Microsoft Word.
(Use command on Macs and control on Windows.)
Command/Control + f: opens the Find field, which allows you to search the text currently displayed in any program that supports it. This comes in super handy to see how many times when someone asks you to remove a word from a 1000-word document or web page. After you put in your keyword, it gets highlighted and you can see how many times the term is used.
Command/Control + c: copy
Command/Control + x: cut
Command/Control + v: paste
Command/Control + b: make bold
Command/Control + p: print
2. Get an image off of a website
If you are looking for quick and easy way to get an image off a website to share with someone else, and the resolution doesn’t have to be for print quality, this is the way to go.
Right click on an image to see your options: view it, copy it, save it, etc.
If the right click option says that it’s a background image, that just means it’s coded a bit differently to sit in the background.
This requires you to ‘View background image’ first then right click on the image again to get more options to copy, save, etc.
If you don’t get the option to view or save the images, you may have to do a bit more work through the inspector tool and find the path to the image through the code.
Sound too complicated? If you keep reading, there is a browser add-on mentioned below that makes this process so much easier!
3. No PhotoShop? Use a free alternative
There are several options for photo editing out there — some are programs like Gimp that you can download to your computer, while others are browser-based. If you edit a lot of photos on a regular basis and have space on your computer, learning a program like Gimp may be best.
For people who don’t want to mess around with downloads, but want to dabble in quality photo editing, browser-based programs are great.
Our recommendation is Pixlr — a browser-based, powerful photo editing program where you can add text, resize, crop and add other effects for free!
In the screenshot below, we are able to add the dog’s name in white text with a drop shadow.
4. Open PSD, AI and EPS files without Photoshop or Illustrator
While Pixlr is a great photo editor for you basic formats like JPGs, we found that trying to get it to open up PSD files often ended in an error. So what do you do when someone sends you a PSD and you don’t have Photoshop to open it?
The following browser-based programs are able to effortlessly open PSDs and EPS files*.
After uploading and processing is finished, you are able to convert and download your opened PSD or EPS file to different image formats as .jpg, .png, .bmp, .gif or .tiff just by clicking on appropriate buttons that are shown below.
*Upload file size is limited up to 20 MB.
5. Quickly & easily resize photos in bulk
Every good web editor knows that adding large images to a website:
1.) takes longer to upload,
2.) slows down the page load speed
3.) takes up more storage on the server, costing you money.
High-resolution photography is needed for print, and many people have their digital cameras set to capture photos in the highest resolution. When it’s time to share them on website, you’ll need to downsize them, unless the website does it for you — like Facebook.
Adobe Photoshop has options to do bulk resizing through the actions command, but not everyone has the program. There are comparable, even faster options out there that are browser-based — again, no download required!
Bulk Resize Photos — you can drag in multiple photos at once right from your computer. Scale the size you wish them to be converted to, and hit Start Resizing.
You can find resized images in your Downloads folder.
6. Convert images with text to word documents
Do you need to pull copy from a marketing piece for your website? For example, maybe someone scanned a postcard or recipe and you need the content typed out.
Online OCR makes it pretty easy for images like this, often saved as .jpgs or scanned .pdfs to be quickly converted to editable text.
Follow the steps below — Select/Upload your file, then click Convert.
You now have the option to download the output file or copy the text right from the text area field. That was easy and saved so much time!
You’ll need to proofread and correct some typos for files that are low quality/difficult to read. But it will definitely save you time from typing.
7. Use Google Drive to open, edit & create Microsoft Office documents
If you haven’t yet – get Google Drive. One of the great features it offers is the ability to open, edit and create spreadsheets, word docs and other programs similar to Microsoft Office files, without having to own the software.
Like most the programs mentioned so far, this too, is browser- and cloud-based. No download is required.
8. Implement add-ons/extensions to your favorite browsers
Add-ons or extensions (used interchangeably) for your browsers can save a web editor tons of time. There are hundreds out there. Below are our favorite extensions for Firefox (with the exception of Alexa) we deemed useful. Similar extensions for Chrome are available as well.
Color Sampler add-on
ColorZilla – A color sample tool useful for finding the hex number for the gold color used on your website. Just add it to your Firefox browser and click on the eyedropper before you hover over the color you need. Then, click. The hex number is automatically added to your clipboard. Take this over to Pixlr and customize your photos!
Analytics/SEO add-on
Alexa Traffic Rank — This Chrome extension provides you with Alexa data about the sites you visit without interrupting your browsing. Check out how popular keloland.com is! You can see its rank, number of sites that link to it, plus other interesting information.
Image Finder add-on
Image Extract — Extracts all the images in the current tab and shows you them. You can right click and download them from there. There is also an option to show background images.
Download All Images — This is a highly customizable image saver extension that allows you to browse and download all images displayed on any web page.
9. Take screenshots!
If you use a Mac, you can just take screenshots with a keyboard shortcut Cmd+Shift+4 – another keyboard shortcut, and how most of these images on this blog were generated!
But for Windows users, who can only take a ‘full screen’ screenshot using the prt sc button, screenshot add-ons come in very handy when you need to take a picture of something within a browser. Which brings us to our 4th favorite extension:
Screenshot add-on
Awesome Screenshot Plus – Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click upload to share.
The neatest feature we found useful was that you can capture an entire page with one click. So no more taking multiple screenshots and pasting them together in PhotoShop!
How it works: Once you click Capture the entire image, it goes to work and displays the image. You can then make notes, doodles and even blur sensitive information on the screenshot.
Save it to your computer, by right clicking or, connect your Google account and store screenshots there. Easy-peasy!
(We did find it wasn’t the greatest quality for presentations, but definitely a good tool to keep around. You can see the second row of staff is where the cutoff point was.)
Well there you have it! Our best web editing tips revealed. Whether you are one of our clients who manage your website or just land on this page from a search, we hope you found some of them useful.
Need additional help with your website? Contact HS today!
