Tutorial on making a thought bubble, new card design & and a puppy

Posted by on Feb 6, 2015 in All, cards, Design Tips, photo, Photography | 3 comments

pupI recently took pictures of an adorable Rhodesian Ridgeback puppy and some of the photos have been accepted at Shutterstock.

This one of of the sad puppy pose in particular I am making into a greeting card for when you are missing someone.

The front of the card shows her as a sad little puppy with a thought bubble above her head saying “When you’re not here…” and in the inside it says, “I feel a little sad.”

I thought I would also take the time to do a quick tutorial on how to use Adobe Illustrator to make a thought bubble. There are a bazillion ways to do this but this is a nice quick and easy way I thought I would share.

Read More

Highlight link to current page with javascript

Posted by on Feb 4, 2015 in Design Tips, Web Tips | 0 comments

If you have a menu on your website and you would like to provide some visual feedback with that one of the links in the menu bar is the page you are on it’s pretty easy with some HTML and CSS.

All you have to do is add a class name to the HTML for that link and then style that class name with CSS.

For example just style the class of “current”:

<code><span class="tag">&amp;lt;li</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"<span style="color: #ff0000;">current</span>"</span><span class="tag">&amp;gt;&amp;lt;a</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">"http://www.somepage.com"</span><span class="tag">&amp;gt;</span><span class="pln">some page</span><span class="tag">&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;</span> </code>

Unfortunately if you are using a common navigation system where you have one file that has all the navigation elements linked to hundreds of pages it’s not possible to change the link style for every link. It defeats the purpose of a common shared file.

Thankfully I found an old blog post by Jonathan Snook that had a script that worked perfectly to strip the link from the current page button. See how “Drama Club” in this screen shot is now light gray and slightly out-dented? It is now an inactive link so if you hover your mouse over it the cursor will not change.

Screen Shot 2015-02-04 at 4.11.16 PM

All you need to make this work is a link to your JS file in your HTML document in the head section like this

<script type=”text/javascriptsrc=”clearlink.js“></script>

Then in the JS file this is the below content is all you need. After that the rest is styling with CSS!

/*
CLCP v2.1 Clear Links to Current Page
Jonathan Snook
This code is offered unto the public domain
http://www.snook.ca/jonathan/
*/

window.onload = clearCurrentLink;

function clearCurrentLink(){
    var a = document.getElementsByTagName("A");
    for(var i=0;i&lt;a.length;i++)
        if(a[i].href == window.location.href.split("#")[0])
            removeNode(a[i]);
}

function removeNode(n){
    if(n.hasChildNodes())
        for(var i=0;i&lt;n.childNodes.length;i++)
            n.parentNode.insertBefore(n.childNodes[i].cloneNode(true),n);
    n.parentNode.removeChild(n);
}
Read More

You think poodles are sissy??

Posted by on Jan 4, 2015 in photo, Photography | 3 comments

My poodle doesn’t do a foo foo clip :)

ELC_3963burt

Read More

My catmas christmas card to you

Posted by on Dec 21, 2014 in Design Tips, photo, Photography | 1 comment

I recently took this shot of our cat and felt I needed to do something with it! Here is a little Catmas Christmas card! If you interested in purchasing this image it was recently accepted to shutterstock.

catmas

Read More

Window washer?

Posted by on Dec 13, 2014 in photo, Photography | 2 comments

At least a window washer is what I think of when I look at this image. How about you?

ELC_3580-2-small

Read More

Animated graphic for a newsletter created in photoshop

Posted by on Dec 12, 2014 in Design Tips | 0 comments

Tis the season to make little holiday graphics so I thought I would share how to make a little animated graphic you might embed in an email to encourage someone to click it.

Below is several I put together along with how to create one in photoshop. These were to encourage viewers to click through to view a video. Videos are harder to actually get to play in an email but an animated GIF usually does play. I must say the cute little  snowman below was drawn by our extremely talented intern Ali Cameron!

 

lights-V2 lights snowman

 

The first step is to design the each design that will be in sequence. The fewer the better because each frame will slow down your load time.

Using the first graphic as an example there is only two frames. One with one set of lights on and then the other with the alternating lights on.

 

1. Create the graphic along with the layers that will include the graphics for each frame.

2. Select window>timeline. If asked choose animation for graphic instead of animation for video.

3. The first frame will already be visible. Select the duplicate frame icon.
Screen Shot 2014-12-12 at 12.00.38 PM

4. Now turn on and off the visible layers to show what the next frame will look like.

5. Select how long you want each frame to display and if you want to the animation to loop forever.

6. Select file>save for web  and choose GIF as your file type!

Read More

New stock image approved

Posted by on Nov 29, 2014 in photo, Photography | 3 comments

I just love the appearance of this cat. The subtle colors in what appear to be just gray and his wonderful yellow eyes. Just submitted this to shutterstock a few days ago and now is in my gallery.

cat2

Read More