Posts Tagged ‘images’

02
Oct
2009

Photoshop tutorials

6 Comments

One of my dirty little secrets is that I’m a photo junkie. I absolutely love reading magazines like Layers (which btw, you can win a copy of here) which are jammed packed with Photoshop tutorials that make it so even the untrained can learn to be a master of Photoshop.  There are even some great Photoshop video tutorial sites out there, so instead of just reading about the methods you can actually watch people put them together.

2176767604 509c68680f Photoshop tutorials image

One of my favorite techniques at the moment is called HDR (How to add impact with HDR) or high dynamic range imaging. This is a process in which images dynamic lighting is adjusted to make blacks appear much darker while also pushing the lights to an extreme. We see it often in movies such as 300, but more commonly in magazine ads these days.

Now the question really is, how do you do it? That’s what I love about the Internet. If you go to Google and ask how to do HDR in Photoshop, it’ll tell you … which means that any young photographer out there (or Photoshop junkie) is able to do just about anything as long as they have access to Google and Photoshop!

I’d love to see some examples of your own HDR work, so if you’ve got any links please feel free to share.

Tags: , , , , , , , , , , , , ,
Posted in Design

read more
06
Jun
2009

Great Chefs Great Restaurant Web Theme

3 Comments

great chefs great restaurants wordpress theme Great Chefs Great Restaurant Web Theme image

Building a great website for your restaurant used to be really hard but one of the wonderful things about working with the great people at Great Chefs Television is that they want to make running your restaurant easier by helping to improve your image with this free website theme for WordPress.

How to use it

Step one download the free template and install it on your WordPress website, it’s really that easy! The theme features a rich, savory graphic from one of the hit TV show’s episodes but you can easily change it to anything you’d like by replacing the photo stored at /images/header.jpg.

Cool Footer

great chefs great restaurant footer Great Chefs Great Restaurant Web Theme image

Along the bottom of this theme, I’ve coded a special loop which checks for the most recent five posts which feature a photo and it displays that photo as a link to your article or menu item.

Please feel free to download this theme for free or preview it here on thisismyurl.com.

Tags: , , , , , , , , , , , , , ,
Posted in Free Downloads, Web Design, WordPress Themes

read more
31
Mar
2009

What image format should you use on your website?

16 Comments

There is nothing more complex about publishing on the web than the concept of images, they’re quite possibly the hardest part of HTML for the general public to get their minds around so let’s take a quic look at what makes an image complicated and how we as web designers and publishers can approach them in a simpler way.

Image Format

The first step to web graphics is to appreciate that images come in dozens (or hundreds) of file formats from BMP’s to TIFF’s and everything in between but when it comes to the web, there are really only three formats for you to think about:
  • The CompuServe Graphics Interchange Format (GIF) format (pronounced giff)
  • The Joint Photographic Experts Group format, JPG (pronounced jaypeg)
  • the Portable Network Graphic file format, PNG (pronounced ping)
Close up of the GIF file format

Close up of the GIF file format

These three file formats encompass the entire spectrum of Internet based graphics. The first format, GIF was introduced way back in the very first days of computer graphics (1987) and allowed people to exchange graphic files via an online community similar to America Online (AOL). The GIF format was limited to 8 bits of color (255) with some reserved for core data. It was a loss-less graphic format ideal for the graphics of 1987 but could hardly produce quality photos.
The GIF format stores each pixel of an image as one of 255 possible colors resulting in a crisp image. The GIF format however also had a number of unique benefits such as the ability to have invisible (alpha) transparent  pixels which when place overtop of other colors would allow the backgrounds to remain visible and the capacity to store multiple GIF images in a single file as pages. When displayed in a web browser or other image viewing tool these pages would appear as animations similar to old ‘flip book’ style animations.
In 1992 the  Joint Photographic Experts Group created and issued the JPEG standard to the world. These days we tend to call the file format JPG since old Microsoft based computers could only hand three characters as a file extension but the format is also known as .jpg, .jpeg, .jpe, .jif, .jfif  and .jfi. The .jpg format was an instant success, it quickly addressed the primary failings of the GIF format by allowing 24 bit graphics (16.7 million colors) and smooth transitions between the these colors using a lossy compression method … which is a fancy way of saying the graphics blended together.
Lossy file saved as both 20% and 80%

Lossy file saved as both 20% and 80%

In effect, how the JPG standard worked was to rapidly reduce file sizes by averaging the color values of a pixel with those around it. This caused massive reductions in file sizes allowing photographers to post 500kb images in extremely small (20-100kb) files while controlling the loss of quality. To the right you’ll see an image saved at 20% quality to the left and 80% to the right, both the difference in quality and the method JPG uses to reach the results should be evident.

Before I go on, I want to pause and take note of a statement I made in the above description because I’m sure most people missed it or brushed past without much thought … the JPG file format was introduced to the world in 1992. This phrase is critical because it reinforces how much the world has changed in just 17 years. For those of you who are under 20 years old, you’ll most likely have never known a world without Facebook or YouTube but for the rest of us, we sometimes forget the Internet is for all purposes a fairly recent addition to the world. I’m 35 years old and I remember the first JPG photo that I saw, the introduction of this format changed the way we shared images over computers.  Notice that I said it changed the way we shared images over computers? There was no Internet, or at least not what you see today.

In 1996, Unisys became uppity and started threatening to sue over the LZW compression found in the GIF format so the world invented the Portable Network Graphic format (PNG), along the way the format improved upon most of the qualities of the GIF and lost the capacity for animation. The PNG format has 8 bit graphics similar to the GIF but also has 24 bit like the JPG and introduced a new level with 32 bit graphics. While it lacks support for animation, it includes transparant pixels like a GIF. Unlike a GIF, where those pixels can be on or off the PNG allows for alpha transparency making the format extremely flexible and also capable of compressing images. The problem with the PNG format, is that it produces large files.

export dialog What image format should you use on your website? image

So which is best? Actually that depends entirely on what you want to accomplish with the graphics. As you’ll see from the image above the file size of the graphic can range from ~25k to ~430k depending on the quality you’d like to achieve.  Photographers for example should use the JPG compression most often to ensure their images are strong, crisp and colorful while illustrators and others who work with line art will benefit from the GIF format. In the end, practicing and experimenting are the best ways to determine what you should be using.

A quick thank you to the Old Shoe Woman for posting the a wonderful photo Sunlight Under a Live Oak Tree on Flickr for me to use as part of this tutorial. 

Tags: , , , , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
20
Mar
2009

How to center an image with CSS

12 Comments

I had a funny problem the other day when I was rebuilding my portfolio, I’d completely forgotten how to center an image using CSS. What I wanted to do was align my portfolio piece images to the center of the screen but regardless of how hard I tried they kept ending up on the left.

girls are evil left How to center an image with CSS image

This is the default position for an image of course, so I wasn’t too concerned about it. If I wanted to ensure that it was always on the left I could of course always add the following code to my CSS file:

[source lang='css']img {
float: left;}[/source]

This would ensure that my image not only aligned to the left but also allowed text to wrap around it’s right hand side. If I wanted to only align the image to the left, without allowing wrapping text I would add:

[source lang='css']img {
float: left;
clear: both;}[/source]

Or if I wanted to do exactly the same thing to the right, I would use the following CSS code:

[source lang='css']img {
float: right;
clear: both;}[/source]

girls are evil right How to center an image with CSS image

Right and left alignments in CSS are really easy, but what about centering the content? If I was a lazy web designer, I could always use HTML to center the image but that’s a bad practice to get into. HTML is designed to publish content, not format it. 

[source lang='html']

How to center an image with CSS image
[/source]

Since the center tag is used to format the appearance of HTML I try to avoid it, which turns me back to CSS (Cascading Style Sheets) to center my content.

girls are evil center How to center an image with CSS image

Generally in CSS if you want to center something you simply set the left and right margins, if you don’t know the width of your object you can specify it in the CSS but in my case each portfolio piece width is different so I needed to be more generic.

[source lang='css']img {
margin-left: auto;
margin-right: auto;
display:block;}[/source]

The trick (if it really is a trick) is to include the display:block line. As we all know (cough), HTML elements are made up of two types of objects. The block objects such as <p>, <h1>…<h6>, <div>,<ul> ect. and inline objects such as <strong>, <b>, <em>, <i> etc., the <img> tag is by default an inline object which means that web browsers do not automatically attempt to associate a buffer for the object.

Since the <img> tag does not have a pre-existing space or area, it can not be centered in an area until you instruct the web browser to assign it an area. For example if you wrapped the image in a <div> or <p> tag, you could text-align the <p> or <div> tag as such:

[source lang='html']

How to center an image with CSS image

[/source]

[source lang='css']#centerme {
text-align: center;}[/source]

This example works because the <div> tag is a block and therefore the web browser already knows it has a space it can occupy but if you don’t want to clutter your HTML with unnecessary <div> tags, you can simply use the CSS display:block; property to instruct web browsers to treat the <img> tag as a block and accomplish much the same trick.

Happy coding!

Tags: , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
03
Feb
2009

Mark Reese Photography

4 Comments

Since the new year I’ve been working with Mark Reese, a photographer based in Florida to build a new website portfolio for his work. Mark wanted his photo gallery to be easy to manage, fast for visitors and he wanted it to be something that he could maintain and manage himself.

mark reese photographyI choose to use a very easy to use tool called WordPress as the content manager for his new website, it’s fast and easy to learn with a lot of great online documentation and a wonderfully supportive community. It also happens to be a tool that I know very well, so I felt comfortable offering it to Mark.

His photography website is designed to be used by photographers interested in displaying images, as opposed to running a photo business.

It’s an original, custom WordPress theme which doesn’t use any of the available gallery plugins to ensure compatibility. The website has a rich SEO base for organic online marketing, easy to use navigation and a very clean design used to highlight his pieces. As with most of my sites, it’s hosted with BlueHost.

What do you think? Do you know any photographers that you’d recommend me to? Are there other great photography websites built in WordPress you’d like to share?

Tags: , , , , , , , , , , , , , , , , , , , , , ,
Posted in Web Design

read more
14
Jan
2009

Top 10 Web Site Mistakes That Businesses Make

4 Comments

Many small businesses fail to take advantage of the great, low cost marketing opportunities found on the web and make costly mistakes which can be easily avoided.

Where are you?

I don’t get it but a lot of small businesses think hiding their contact information is a good idea. I could get into why your contact information on every page is good for localized search engines, or how it could help regional linking but you know what? It’s simply common sense for a business to want prospects to be able to find them. If you’re a public facing business (retail, restaurant etc) your address should be on every page, it’s that simple. Other companies need an easy to find link, clearly labeled to a contact page.

What do you do?

Honestly, I’m a web designer and half the time I can’t figure out what companies do based on their website. Does your website over think the process? Most do. If you’re a restaurant, post a menu. If you’re an inn, show me your rooms. Post your product or service in the easiest, clearest way possible.

No Images

The only thing worse than a website without contact details? A boring, stale, dull one with lots of text. Pictures say a thousand words right? Well, stop typing so much and buy a $100 camera. Take pictures of your products and people, let me see your lobby, reception area, board room and then I’ll feel better about spending money with you.

Your Company is Run By Robots

Web site are not about technology, stop worrying about fonts and colors. Let me see your people, this goes back to the picture issue above but honestly, it’s worth a second point. Who’s won awards this month? New hires? Experienced professional? Let me know! By the way, having a video on your website is brilliant, people love videos.

Fire and Forget Web Sites

Nothing ticks me off faster than a business who launches a website and ignores it. The Internet is the first place your prospects are going to go to, and they’ll simply move on if ignore them. Answer every email, provide updated content, add a blog to keep content fresh and follow up on every comment on your site. Prompt service wins business.

Outdated Content

If your business wants to succeed, respect your website is an extension of your physical business. Look at it all the time, assign it to somebody in your office or if you can’t afford the time, assign it to me but for the love of all that is digital … Christmas is over in December, make sure your website isn’t promoting St. Nick by News Years. The same goes for the big trade show, holidays, news events and staffing requests.

Butchering the Brand

If your website doesn’t look like your brochure, fire your web designer. Honestly, there’s no reason for your logo to be different on a website. There’s no reason you don’t look as good no, scratch that. There’s no reason you don’t look BETTER on the web than you do in print or in person. Think about it, full color printing costs money but on the web, it’s free.

Broken Down Sites

A 404 Error is the technical term for a website page that no longer exists. 500 is the error code for sites which failed to execute a PHP script from your site … if your clients ever see this, you have no business running a website.

Web Sites Designed by Friends and Family

If your cousin is an award winning designer, hire her but if she’s a database administrator or makes a living putting monitors on desks for a living … walk away. Your website is an extension of your brand, it’s about marketing not technology so hire a designer with a proven track record building quality sites.

Typo’s and Mistakes

Broken images, grammatical errors, poor spelling … these are signs of a business owner who doesn’t care about the company and that tells me that they’re not going to care about the product they sell. Before a website goes live, make sure it’s done.

Effective online marketing is easy, it’s cost effective and it’s a key element of the marketing program of a modern, success business.

If you’re already running a website, take a few moments and ask yourself:

  • Does my website look better than my business card?
  • Does my website tell my clients what I do?
  • Does my website tell prospects how to reach me?
  • Is my website easy to use?
  • Is my website’s content fresh?

Once you’ve asked yourself those questions, ask 20 other people those five simple questions about your website and really listen.

Tags: , , , , , , , , , , , , , , , , , ,
Posted in Marketing Advice

read more
16
Oct
2008

Finding Free Photos for Your Blog

3 Comments

Finding free photos to spruce up your blog can be one of the most time consuming parts of publishing an online magazine but with Photo Dropper you can let it do a lot of the heavy lifting while you focus on what’s important, the content. Photo Dropper is a WordPress plugin designed to help you find images available through the Creative Commons license.

It’s surprisingly easy to use. Once installed it appears in your WordPress editor right along side the usual Add Media options. Simply activate it using the same process as all other WordPress plugins and then click the PD icon to start. Finding content is surprisingly easy, just type a keyword and watch a series of images appear. Select the size you need it your post and presto! You’re done.

http://www.photodropper.com/

Do you know of another great plugin for finding great photos for your blog? Let me know.

Tags: , , , , , , , , , ,
Posted in WordPress Help

read more
09
Oct
2008

Free WordPress Theme – A Night in Paris

6 Comments

wordpress themes 20081009 233x300 Free WordPress Theme A Night in Paris imageMy partner in crime, Chris Bavota has added a free custom theme for WordPress on Tinker Priest Media.

A Night in Paris is a two-column WordPress theme with a three-column lower section. It features large images with overlying text for the latest three posts. In order to make this feature work properly three custom fields must be created on each post.

For the larger image, create a custom field key called “bigimage” and place the url location of the image in the value. The image should have a width of 550px and a height of 269px.

For the two smaller images, create a custom field key called “smallimage” and place the url location of the image in the value

  • Download the Theme
  • Preview the Theme

    • Tags: , , , , , , , , , , , , , ,
    Posted in WordPress Themes

    read more
    07
    Oct
    2008

    Do web graphics increase sales?

    No Comments

    How important are graphics to the success of a website? There are a couple of schools of thought on this subject, the first is that content is what matters on a website. After all, Google (and other search engines) can’t see what’s in a graphic so it mustn’t matter. Second, there’s the thought that graphics make the difference between successful sales or a reluctant visitor. Most of the evidence is anecdotal at best but it’s a very big question facing web designers these days.

    There’s no real way to answer this for certain without conducting extensive marketing research based on the pluses and minuses of a sales cycle but with enough experience, I think there’s a fine line between the two arguments.

    Frankly, Google can not see graphics therefore it can not index what’s on them. This is true, so if you’re going to build an entire website as a graphic file (JPG for example) or even use heavy Flash throughout it, there is no way for Google to understand what you’re site is about. Without knowing what content is there, it can’t index you properly and therefore can’t send traffic to you.

    Does it matter that Google can’t read your site? Not really, Google is only one of a million ways people find your website and if you have a proper budget for a website, you can overcome this through clever marketing and links with other websites.

    On the other hand, quality graphics do impact the interest level of the consumer or site visitor so it’s important to really stop and think about exactly what your website is saying both in words and in the images you’ve selected to present to your audience. I like to ask my clients a fairly simple question, would they be willing to print the website and hand it out (on paper) at a trade show or conference? If so, then the site’s graphics are doing what they’re meant to do which is to reinforce the branding and build an online extension of the business. If on the other hand, the website isn’t worth wasting paper on, it’s time to do something else.

    The problem of course is that most people think of websites as an after thought and trust the IT department to come up with the artwork and implement a solution. Frankly I’m always disturbed when I learn the same person who changes printer toner is in charge of building a part of the company which will be viewed by millions.

    So, back to the original question. Do web graphics increase sales? The answer simply put is yes, but only if those graphics are designed to improve the usability of the website, shape the activities of your users and improve the general functionality of the site.

    Tags: , , , , , , , , , , , , , , , , , , , , , ,
    Posted in Web Site Advice

    read more
    25
    Sep
    2008

    Rodonic Corporation Website

    No Comments

    Rodonic Web Site

    rodonic a 300x300 Rodonic Corporation Website imageRodonic Corporation was my first shot at running something more than just a design studio, it was a full time technology studio offering business and government clients throughout the Ottawa region programming and web services.

    The website design for Rodonic was one of my favorites.  It’s actually funny to see that my creative style hasn’t changed a lot since this was first created in 2002. I’ve refined my style but still aim for muted hues, gentle grays and faded images.

    The website is long gone now, but I still have a couple of images of the original artwork.

    Tags: , , , , , , , , , , , , , , ,
    Posted in Web Design

    read more
    17
    Jan
    2008

    Adobe Dreamweaver Tip – Cleaning Up Unused Files

    3 Comments

    Here’s a great tip for Dreamweaver users, ever finish a website design and then not know which files are active and which are not? It happens to me all the time, lots of spare graphics, even some HTML or PHP files that are simply not in use anymore. So how do I clean them out?

    Step One – Backup

    It may sound silly but the first thing I do is click on the file folder icon under Files and select Reveal in Finder which opens the folder on my hard drive. I back this folder up completely but copy and pasting it to my desktop.

    Step Two – Recache

    Under the Site menu I select Advanced > Recreate Site Cache to make sure I have the most up-to-date data about my site.

    Step Three – Web Documents

    Now here’s where Dreamweaver gets sexy. In your File list, simple start selecting files that you think are suspect and hit the delete key. If they’re linked anywhere in the site, Dreamweaver will warn you that the file is links … and you don’t want to delete it. I do this with whole groups of files to save time, if it doesn’t let me delete them then I know at least one file is still live.

    Step Four – Graphics

    Once I’ve cleared out the Files list, I move onto images and start doing the same things. If the image is found in a web document, it will warn you before deleting this but an even better way to do it is to use the Copy dependent files option on the original files. This option is seriously cool … set your Remote folder to a new folder on your desktop and then back in the file list, select all your files but not the images folder. Now, upload your website to the remote folder. Dreamweaver will ask you if you want to include dependent files which includes any CSS, JavaScript, rich media or images that are included on the pages. The resulting folder will contain everything you need to upload to a website but none of the junk.

    Tags: , , , , , , , , , , , , , , , , , , , ,
    Posted in Learning

    read more
    05
    Oct
    2007

    Ben’s First Flash Movie

    No Comments

    Last summer my ten year old son went away to camp for a week and learnt how to do Flash animations. This is a project he worked on himself, I suppose I’m uploading it so that in a few years we can all look back and laugh a little.

    The video is created as using key frame animation, simply put he moved the objects one frame at a time and the end result is a series of images which create an animated effect. Flash allows for a lot more advanced animations … so next week I’ll be teaching it to him.

    Tags: , , , , , , , ,
    Posted in Blog Posts

    read more