Red Deer & Blackfalds Web Design Writes:
When working in the field of Web Design & Development, or even if you are just a small business owner who has taken on the task of building your own website, it is imperative that you possess basic Photoshop Skills in order to present your website in the best possible manner. This is important not only from a visual standpoint, but also understanding that you can specifically save the size of your image files to meet certain criteria and improve site-loading speed! Having strong imagery is important; however, wasting hours on Photoshop trying to make the perfect image can be time-consuming and take you away from the bigger picture (Your Business!). So! The following are a few short-keys that you can master in order to cut down on the amount of time you are spending on Photoshop and allow you to get back to business:
- Black and Grey – sometimes if you are trying to accomplish a simple layout and colour scheme for your website, it can be really distracting to have pictures in full colour. By using ALT+SHIFT+CTRL+B it will take the layer (or photo) you’re working on and put it into a black and grey format. From here a small menu will pop up and also allow you to tint the picture according to a particular colour, so long as you feel that adds to your website.
- New Layer – if you find yourself using tools to add additional brush strokes, colours, elements, etc… to your image, it is beneficial to put them on a new layer that sits just above your main image. To do this simply type in CTRL+ALT+N to quickly add a new layer.
- Image vs. Canvas Resize – when working with a picture you may need to change the overall size of the image itself (using CTRL+ALT+I), or rather you may want to increase/decrease the size of the canvas without affecting the dimensions of the image you’re working on. Perhaps you’re adding a border, or you’re looking to crop the image to a specific size (for this you would utilize the CTRL+ALT+C quick-type).
- Save for Web – this is perhaps the most important portion of this entire article! Once you have created the exact visual you are looking for when working with an image you can hit SHIFT+CTRL+ALT+S and a screen will pop up that allows you change whether the image is saved as a JPG, PNG-8, PNG-24, WBMP or GIF format and also allows you to change the size of the image without affecting the actual image you’re working on. Example: If you’re editing an image that is 3000×3000 pixels, when saving for web you can crop the saved image file to 400X400 pixels in order to capture detail and not affect the original image. Photoshop also gives you an idea of the estimated load time based on the speed of internet (which is modifiable) and the size of the image.
Please note: the above are based on Adobe Photoshop CC 2015-2016 Version and are subject to change based on Adobe’s standards and improvements