How to make jpg images 2x for “Retina” and HiDPI devices in Photoshop

Why would I make a 2x images for my responsive site?

2x images are scaled-up and optimized for Retina/HiDPI screens. They’re scaled to twice the size of 1x images, but since retina screens have twice the pixel ratio of most other screens they output the same size visually as 1x.

If the jpg image is 1x, it can look “fuzzy” or “pixelated” on higher DPI screens.
Here is an example:

Old Main at 1x and 2x

Instructions on how to “2x up” an image in Photoshop for a 250x250px jpg image:

  1. Start with original document height and width dimension then multiply by two. These are your new height and width values. In this case, the new document size will be 500x500px.
    • Original height x 2 = new height for 2x image
    • Original width x 2 = new width for 2x image
  2. Import your higher dpi image or design as usual, but use the bigger version rather than the 250px image
  3. When done, save for web at around 10 quality in Photoshop

Photoshop save for web 10 quality

Video jpg 2x image Retina tutorial

Gradient dither in Photoshop and file size comparisons

Recently we were optimizing a header graphic in Photoshop and stumbled upon a larger than expected file size.

Wayne State University HTML email header

After further investigation of why the file was larger than usual, it came down to Photoshop setting called “dither” on the gradient background

What is dither?

With or without ditherAdobe explains dithering as:
“Computers use a technique called dithering to simulate colors they can’t display. Dithering uses adjacent pixels of different colors to give the appearance of a third color. ”
More about dither

Turning off dither basically saved 60k on this particular header image.  If you closely inspect the image on the right, (click to enlarge) you can see some slight banding, but you have to look very close and zoom it up.  For all intents and purposes on the web, the difference is so slight that we could most likely turn off dither for our gradient graphics.

 

 

How to turn off dither on gradients in Photoshop

  1. Click on the gradient layer thumbnail in Photoshop, a gradient fill dialog/settings box will pop up.
  2. Unselect the “Dither” checkbox

Dither selection in Photoshop

Overall this saved us about 60kb in file size, which is amazing considering we have over 100 different HTML email template headers!

Try it out for yourself and let me know your results in the comments below!

 

Making HTML email images look sharp on “Retina” and HiDPI devices

Fuzzy LogoDo you have “fuzzy” images when you test your HTML emails on “retina” or HiDPI devices and screens?

I did some HTML email testing in various optimized image file formats like jpg, gif, and png.

I was tasked with looking at graphics like the header and footer of the HTML email template. These are different from a jpg photo image and will talk more about that later.

The header was originally saved as a jpg at 600px wide and the file size was around 17kbs.
Not bad, but when I would preview it on my retina devices, it would look fuzzy. So I used the 2x image optimization method to see if we could make it look better while keeping it relatively close to the previous file size.

How to approach the image optimization of graphics in Photoshop

  1. Take the original image size and make a new document in Photoshop that is 2 times the size. (In this case, the original graphic was 600x100px, which would be sized up to 1200x200px)
  2. The new larger document must use vector or larger dpi images that won’t be fuzzy at that new larger size.  (You can’t just resize the original image up, stretching the pixels)
  3. Once you have the new artwork or bigger image you save it for web/optimize it so the file size won’t be huge.

Here are the results and file formats:

Wayne State University HTML email header graphic

So for a graphic with vector images, the best results are to save as a png-8 or gif.  You can adjust the amount of color to save more filesize to your liking.  As you can see png-8 actually saved a couple of kbs of size and this image is double the size of the original jpg!

We also resized and optimized the footer images:

Wayne State University HTML email footer images

In this case, we tested the png’s as transparent as well which came out slightly bigger.  So again either gif or png-8 format would work.

Final results

WSU HTML Email Template 2x

Speed test

3g speed origninal images at 1x
3g speed original images at 1x

 

3g speed new images at 2x
3g speed new images at 2x

 

Looking at the test results you can see there are not much different, although we did end up saving some filesize and load time on the new 2x images.  Along with saving some kbs, the ultimate goal of making it look sharp on “Retina” and HiDPI devices was accomplished.

For jpg photo images in HTML emails, you can do something similar to the method above by following the instructions on, “How to make jpg images 2x for “Retina” and HiDPI devices in Photoshop”.

View Post

That’s it! Pretty simple solutions to make our HTML email images crisp with keeping the file size low. Let me know if you have comments or questions below!

YouTube embeds just got a little more clear

A few years ago we added the ability to embed a screenshot from a YouTube video through the CMS editor. This alleviated the need to take a screenshot, edit with software to add the play button, and then finally uploading it to the web server to embed it into a page or an email. With one click, pasting the url of the video a screenshot of the video can automatically be generated and embedded into a page.

But there was a problem

YouTube play buttonThe default YouTube play button at the time was a red rectangle which does call a lot of attention and allows users to immediately identify what will happen when they click the image. It became a problem over time as more of our videos (especially now that we can upload a custom still photo as the default screenshot) became people with a YouTube play button head:

Solution

New YouTube play buttonWe are happy to announce the play button graphic has been swapped out with a more transparent version that equally emphasizes the screenshot and the fact that the image will link to a YouTube video.

Now at a glance you can see the details in screenshot while still still understanding the link will bring the you to a YouTube video.

How to use the YouTube screenshot button in the CMS:

YouTube Preview

How To Create a Seamless Image Suitable for a Repeating Background

First, I think I broke the record on having the longest title thus far on our blog! YAY!

Secondly, when I read the write up on the Planetarium launch in January, I was slightly disappointed that there was no mention of the beautiful background image in the post. I think one of the awesome things about the site was the background and how it seamlessly repeated itself beautifully. I swore then on to dedicate a post solely on the background image.

Here’s the Planetarium site. Drag your browser window to extend the width and take in the beauty of the background. Now we’re ready to dive in the tutorial! Open up Photoshop and let’s start!

STEP 1

Pick your image for the background and put it in the mock, sizing it accordingly. In this case, we have a starry background.

 

STEP 2

Establish the height of the background you want to work with. Our height for this one is 400 pixels. The bottom (silhouette of the mountain) happens to be black so we can use a solid black color for the background that we can repeat using HTML.

 

STEP 3

Create a new document with the same height as your working background image. Your width should be three times the width of the sized-down background image. For our example, our canvas size is 400 x 3200. Manually size down the original background image ’til it replicates the background in the mock.

 

STEP 4

Duplicate the image.

 

STEP 5

Overlap the two images to create one image. Lower the opacity of one image to see where to sew/merge the image.

 

STEP 6

Use the Eraser Tool with a soft edge to clean the background and erase any visible seam lines. When done, you will have one seamless image.

 

STEP 7

Pick two identical points on your image. Use the margin to mark the beginning and end.

 

STEP 9

Use your marquee tool and select the area. SHIFT + COMMAND + C to copy the selected image and click “OK”. This image is what we will be repeating.

 

STEP 10

To make sure that the image is truly seamless, go back to your canvas with the really long width. Hide the two layers which housed the two sized-down original images. Drag or paste the base image from Step 9 into the artboard area. Duplicate and put them next to each other and you should have a seamless image.

 

To be extra sure, you can test the image in a browser. Copy the HTML below and save it as test.html and open it in a browser. Make sure that you change the file name to the file name of your image and the path of the image to the correct path according to where you saved the .jpg of the background that you will be using.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Repeating Background</title>
	<style type="text/css">
		body {
			background: url('starry-bg.jpg') top left repeat-x;
			height: 100%;
			width: 100%;
		}
	</style>
</head>
<body>
</body>
</html>

Hope this tutorial helps with your future seamless repeating background endeavors. 🙂 If you end up using this tutorial, post a link here because I’d love to see your work! Peace and carrots!

Ordinary Joe to Semi-Pro Photos

Before and After
Before and After

Turn your everyday photos into something that looks like it was taken by a semi-pro. This four-step tutorial is fun because it doesn’t require hard work and the final outcome never disappoint! Lets start!

STEP 1

Once you’ve picked your photo, Duplicate the layer.

khoa-step1

STEP 2

With the duplicated layer selected, go to Image > Adjustments > Desaturate. This will turn your photo black and white.

khoa-step2a

STEP 3

With the duplicated layer still selected, apply Gaussian Blur. Filter > Blur > Gaussian Blur (about 3.5 Radius). Play around with the amount after you’ve finish the tutorial completely. The higher radius will add more diffuse glow to the image.

khoa-step3akhoa-step3b

STEP 4

After the layer has been desaturated and blurred, using your Layers Palette, in the blend mode, select Overlay. Ta-dddaaa! Ooh soo DRAMATIC and fun!

khoa-step4

RECAP

Before and After
Before and After

OTHER SAMPLE

Before and After Photo

Bridge BeforeBridge After

Create a quick html form connected to a database

Having a small staff and enormous amounts of work everything we can do to speed up tasks we take advantage of. We are asked all the time to create html forms for sites, its the only way to get users information, from RSVP’s to request information. Recreating forms is time consuming especially since most feed into a database plus usually email someone also.

I created a screencast to show how we in the Web Communications department of Wayne State University create forms quickly, consistently and accessible using an open source framework I created and that we maintain. The framework is PHPSimpl and is hosted on Google Code, it is not meant to be a full blown MVC framework but more or less a helper for common tasks.

[flashvideo filename=”wp-content/uploads/2008/10/screencast-form.flv” height=”406″ width=”650″ image=”wp-content/uploads/2008/10/screencast-form.jpg” /]

This is the first screencast I have ever created so bear with me as I adjust to talking to a computer instead of a room full of people. Also ignore any technical issues which I am still trying to work through. I created it with just a Mac Book Pro, Snapz Pro and the internal mic, so the sound might not be the best.

The video is best viewed at full screen to see the detail in the text. I am playing with the flash video encoder options to find the optimal compression for quality and size. If anyone has any suggestions on the settings or screencast recorder feel free to comment.

In case you are wondering the form is being created on an Apache server running PHP5 and MySQL.

Hope you enjoy it and it helps you out.

Using JavaScript to find links within plain text

Today I was working on adding the Wayne State University Twitter feed to our website. It’s not a terribly difficult task since Twitter has some auto-generated code (javascript and HTML) for adding your public time line to a website. We, however, wanted more. Twitter’s auto-generated code offers a pretty basic setup, no frills at all. Our issue with the Twitter code is that the links within tweets lack markup and are non-functioning within a web browser.

The Solution

The solution is pretty simple, but not easily found online so I wrote my own. Twitter provides you with links to two JavaScript files within their auto-generated code. The first included javascript file provides you with two functions. One is the callback function that is used to display the json feed using HTML. The second function is used to convert the time stamp to relative time to keep with Twitter look. Rather than continuing to use the include from twitter.com I localized the two functions so I could edit the callback function and get some markup around those links.

My changes are fairly simplistic and make use of regular expressions to replace obvious plain text links with a marked up version of the links so the end users will be able to click the links.

The code to replace plain text URLs with their marked up version:

var tweet = "Some tweek with a link to a site: http://wcs.wayne.edu/";
var pattern = /(HTTP:\/\/|HTTPS:\/\/)([a-zA-Z0-9.\/&?_=!*,\(\)+-]+)/i;
var replace = "<a href=\"$1$2\">$1$2</a>";
tweet = tweet.replace(pattern , replace);

Now my regular expression skills are far from great, so it’s likely this can be optimized. It’s also possible I forgot some URL safe characters within the pattern. This code basically searches the tweet for anything that looks like http://i-am-a.link/cool/link.ext?okay=yes&fine or whatever the link might look like. I think it could be expanded to search for links that do not include the http:// as well, but I didn’t have a need to do that at this time. Here is the full modified twitter JavaScript code incase you want it.

The result is tweets with working links on http://wayne.edu/current/.

Javascript on window close event

It’s been pretty busy around here lately so I haven’t had much of a chance to write a blog post. Among other things, I’ve been working with Help Center Live, a live chat web application. The live chat application will hopefully find its way onto the Registrar’s site which is getting a new look and a better feel in the coming months. We needed to modify the application so it would work with our University login both on the user end and the management end. The code was fairly easy to work with and adding the code for the University’s system to authenticate users was a relatively straightforward change.

The problem was in the logout

When logged in we wanted to be sure that the user was actually the same person who originally logged in. This level of authentication guarantees the user already has access to the account with the given accessid. However, since we can’t guarantee that a user will properly log out and we can’t make sessions expire too quickly, we had to figure out a way to log the user out even if they just closed the window.

And so I found the DOM event “beforeunload”

Also known as onbeforeunload and mistakenly thought to be IE only; when attached to the window, the beforeunload event is triggered when the page is unloaded. This, however, includes a link being clicked, a form being submitted, and any other event that will cause the page to go away, including closing the browser window. Without further ado, here’s some code (using some jQuery to make things simple):

First, we bind the startup routine to the load event on window:

$(window).bind('load', function(e){
  close_window = true;
  logged_out = false;
  $("a").bind('click', function(e){
    if(!$(this).hasClass('clickable'))
      close_window = false;
    });
  $("form").bind('submit', function(e){
    close_window = false;
  });
  if (window.addEventListener) {
    window.addEventListener('beforeunload', message, false);
  } else {
    window.attachEvent('onbeforeunload', message);
  }
});

The load routine binds submit and click events to anchor tags and forms so we can ignore those exit cases. Then the beforeunload event is attached to the window in 2 different ways to account for the differences in the big 3 browsers.

Here is the message function triggered by the beforeunload event:

function message(ev) {
  if(close_window){
    if (ev.stopPropagation) {
      ev.stopPropagation();
    } else {
      ev.cancelBubble = true;
    }
    if (ev.preventDefault) {
      logout();
    } else {
      logout();
      ev.returnValue = "Leaving?";
    }
  }
}

And finally the logout function which makes an ajax call to a php script that cleans up any sessions, database info, and cookies:

function logout(){
  if(!logged_out){
    $.ajax({
      type: "GET",
      url: '/chat/inc/logout_connector.php',
      data: "logout=true",
      async: false,
      cache: false,
      success: function(msg){
        console.log("Ajax Repsonse: "+msg);
        logged_out = true;
      }
    });
  }
}

Here’s a quick summary of what is going on, if you need it

When the page is loaded, the close_window variable is set to true. The message method requires the close_window flag to be true, otherwise its routine isn’t run. We’re binding the submit event and click events to forms and anchors respectively then setting close_window to false when those events are triggered. This way the beforeunload event’s code will be skipped when the user leaves the page with those events. When the window is closed, the beforeunload code is run and makes an ajax call to a php script that will clean up the session, cookies, database, etc to assure a clean logout.

This code is currently supported by Firefox 2, IE 6, IE 7, and Safari 3. Opera is the only browser I tested that doesn’t support it.

It’s possible that a jQuery plugin is in the works to do this more easily in the future. If I get the chance to write it, and get it done and working, I’ll make another post about it then.

Refresh Detroit LISP Web site presentation

Yesterday I was asked to give a presentation at Refresh Detroit, a group of web developers/designers/usability professionals from the Detroit area. Below is the presentation.

Outline

We were tasked with the redesign of the Library and Information Science Program Web site. I started out with a general overview of our department then moved into showing the old LISP web site. It was not an in depth examination of all of our methods but a glance at our process

The Old Site & New Goals

Some of the issues with the old web site were

  • Need for more university branding
  • New online masters of library science degree that needed promotion
  • Need for a news/events static area
  • Use of a pixel pattern they use on all their direct mail pieces
  • A place to promote their faculty.

We didn’t have access to their old web server or site statistics so we could only base student needs from emails and phone calls. We also used other university library science web sites as benchmarks. 

We determined the primary audience to be prospective graduate students since they only offer graduate degrees. Current Students and Faculty/Staff will have a presence but they will not be the primary focus for the homepage.

Organizing Information

Initially we pull down the site with WinHTTrack to get an idea of the size and folder structure. We then take their primary goals of the site and figure out the paths a user currently has to take to get to them. We then take those paths and chunk them together to shorten the time and organization of them for the new site.

We broke their navigation down by audience and since each section has quite a bit of links underneath it we decided alphabetical would work better than having to prioritize menu items, we did not want to make any assumptions.

Site Design

The main goal of the homepage was to create an impact, appear organized and up to date. Our mockup process is to create three designs, present them and they can either choose one or pick bits and pieces and we work back and forth with we have a design we are both happy with.

I presented the three mockups we created for the site. Each mockup has a homepage and two child pages. Child pages are pages with basic content on them, basically anything that is not the homepage. We create a two column and a full width child page to show how content will flow.

Technical Implementation

The html of the site is implemented in XHTML 1.0 Transitional because we have a CMS with a WYSIWYG editor inside which stumbles if the strict mode is enabled. It is built into a template and placed in the web content management system we created for the university. 

They ended up choosing Mockup #3. It offered enough flexibility to promote news, events, promotions and the pixel pattern did not distract from the content on the page.

Did we accomplish our goals?

Since we did not have any historical site statistics we could only rely on the new site statistics. The last slide shows the Google Analytics for the site since it launched. As you can see the top four hit pages are the goals we set out to promote with the new site. Homepage is number one of course but the online program is number two, followed by the admissions page, followed by the faculty profiles page.

See the design for yourself: http://lisp.wayne.edu/