Images

How to Make Awesome-Looking Images for Your Website

22 January 2018 / Leave a Comment

Great images make a huge difference to the look and feel of your website. Whether it’s product photos, a headshot of your gorgeous self for your About page, or some inspirational images for your blog posts, eye-grabbing imagery will help your customers trust you and your business.

But we’re not all professional photographers, right? So how do you go about making these amazing pics? There are many fantastic stock photo libraries, of course, which are a great place to start. But sometimes you need to take your own photos. Even a stock photo might need some tweaking to work well on your site.

That’s why I wrote this guide to creating great images for your site! In it, you’ll learn:

How to choose an image-editing app that meets your needs
The best way to crop your images for maximum effect
Ways to tweak an image’s brightness, contrast, and colours to make it pop
A clever trick to make the subject of your photo stand out
How to reduce pesky noise in a photo to make it look cleaner and load faster, and
How to improve soft images with sharpening so that they look more pro.

Ready to get started? Let’s begin by choosing the perfect image editor for you!

Adobe Spark Lets You Create Stunning Business Visuals in Minutes

25 November 2016 / 4 Comments

Gorgeous-looking social media posts. Super-slick webpages. Professional promo videos. They’re all essential for promoting your business these days.

But how can you produce all this great stuff? You can pay a creative pro to make them, of course. If you’re on a budget, though, the chances are you’ll be making them yourself!

However, if you’re not that creative, or you’re super-busy (and let’s be honest, have you ever met a small business owner that isn’t super-busy?), then it’s hard work to produce all this amazing content to promote your products and services.

That’s where Adobe Spark comes in! Spark is a set of free apps that make it ridiculously quick and easy to create awesome-looking content.

Want to know more about Spark? Keep reading! By the time you’ve finished this article, you’ll know exactly what Spark is, how it works, and how it can help you to promote your business.

How to Make Gorgeous Social Media Images (Even If You’re Not a Photoshop Guru)

3 March 2016 / 5 Comments

You see them everywhere!

Posts on Facebook with lovely images and quotes that inspire you. Tweets with gorgeous photos that make you itching to share them. Wouldn’t it be wonderful if you could easily create those images for your own social media posts?

Even better: What if you could create them for free, in just a couple of minutes?

Maybe you’re currently making your social media images using an image editor, such as Photoshop. If so, you’ve probably found the process to be fiddly and slow — and the learning curve to be steep.

If that’s the case, I’ve some great news for you. Using some fantastic, free tools — along with the tips and tricks you’ll discover in this article — you can effortlessly turn out social media posts with beautiful, captivating images that your audience will love to share.

The result? More fans, more audience engagement, and more traffic for you!

In this article you’ll discover inspiring ways to write quotes for your images. You’ll learn which image sizes each social network loves to use, and you’ll find out how to create a shareable image with text in just 30 seconds!

You’ll also learn how to use a free online tool to create amazing images that used to only be possible with Photoshop; and you’ll discover how to find fantastic free images online that are perfect for social media.

By the time you’ve finished reading, you’ll be a confident expert at making great-looking social media images!

How to Make an Elegant Sliding Image Gallery with jQuery

16 March 2011 / 66 Comments

View Demo »

Download Code

There are a lot of jQuery image galleries out there, some of which are quite lovely (Galleria springs to mind). However, I’ve yet to discover a really nice-looking, full-window sliding image gallery that is simple and elegant, and that also shows off the photos to good effect. So I decided to write one!

To see what it looks like, click the View Demo button above. It looks best on WebKit browsers such as Safari and Chrome, but other modern browsers should work well too.

For best results, make your browser full-screen. Google Chrome gives the most immersive experience here — view the demo, then choose View > Enter Full Screen.

The gallery is simple to use. Click the left or right edge of the window to move around the pictures (or use the left and right arrow keys on your keyboard). Hover over the main image to view its caption.

I’ve also made the gallery work reasonably well on touch devices such as iPhones and iPads by adding touch and swipe events. (I haven’t yet tested these on the Android browser so your mileage may vary there. Watch this space!)

So how do you make this gallery? In this tutorial I’ll walk you through the process step-by-step, from creating the markup and CSS through to writing the JavaScript code to make the gallery function. If you’d rather just grab the code and get going, click the Download Code button above.

If you like this gallery, please feel free to use the code in your own websites and projects. It’s Creative Commons licensed.

Ready? Let’s get started!

Hold That Website! 12 Things to Check Before Launch

27 January 2011 / 6 Comments

After weeks of hard work, your new website’s ready to launch! It’s uploaded, you’ve set up the domain, and you’re ready to take the wrapping off and reveal it to the general public.

Before you hit the proverbial switch, however, it’s important to check that your site is functioning correctly — especially if you’re launching it with an expensive marketing campaign.

Here’s a list of some important things to look for when giving your site its pre-launch testing.

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

11 June 2010 / 14 Comments

View Demo »
Download Code

In this tutorial you’re going to learn how to create a virtual light table using jQuery and CSS3. A traditional light table is a flat illuminated panel that you can place transparent slides on for viewing. Our “light table” is going to be an image of a wooden kitchen table, and the photos will be prints rather than transparencies, but the basic idea is the same!

The aim is to make our table and photos look as realistic as possible. Here’s our desired feature list:

A wooden table background image for the photos to sit on
Each photo “floats” onto the table as it loads
Each photo is given a random position and orientation to create a “scattered” effect
The photos have a white border and drop shadow to add a 3D effect, and are ever-so-slightly transparent
Once on the table, a photo can be dragged around by using the mouse

Ready? Let’s go!

The HTML Alt and Title Attributes

17 March 2008 / 7 Comments

HTML provides two main ways to add descriptive text to page elements: the alt attribute, and the title attribute. While these two attributes may appear to work in a similar way, they have quite different purposes. This article takes a look at these two attributes, explores their similarities and differences, and shows how to use both attributes correctly.

Images

Footer

Contact Matt

Follow Matt