Web store sneak peak

Posted by on Mar 7, 2015 in All, Design Tips, photo, Photography, Web Tips | 2 comments

I don’t usually show a website until it’s mostly finished but I am excited about my new pet photo stock store I am setting up. As of this post I have only formatted 6 photos for sale because I wanted to focus on getting all the details right before adding more. I am using gumroad for the store engine and I coded the page to be responsive so hopefully when you view this on any device you can see the thumbnails fairly large in either 3, 2 or one column. Be sure to sign up for my mailing list to be alerted when I add new photos at the bottom of the page!

store

Read More

Stained Glass Illustration

Posted by on Feb 27, 2015 in All, Design Tips | 2 comments

glass4blog

I was asked to take this pencil illustration (see art here) and create a graphic for a poster that will advertise a newly written opera. I’m not much of an illustrator myself but I at least had the pencil sketch from the client to work off of. I used Adobe Illustrator to outline and ink in the illustration and then photoshop to apply textures.

The name of the opera is the Voyage of Mary Magdalene. You can view the hatchfund project and see a video about the opera here. It will be opening March 21st at the Clayton Valley Presbyterian Church.

Since the play was biblical in nature I thought stained glass would be appropriate and also would explain the blocky chunks of color. I chose to follow this tutorial which was a perfect choice!!

 

 

Read More

2015 Lunar Year of the Ram Graphic Freebie

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

I was asked to make a little web graphic for a Chinese New Year festival. It’s the year of the ram or goat or sheep – that seems to be up for debate.

I am really fond of sheep when I witnessed two sheep in a herd on either side of another sheep being its support. That sheep in the middle appeared to be blind and the other two sheep helped guide it to where it could eat. Witnessing that entirely changed my opinion of these animals and I hope that anyone born in this year learns the value of that kind of support we can give to one another.

The stylized flowers are the lucky primrose and the lucky color red in basic astrology. Feel free to download and do with it what you wish!

ram

Read More

Happy Valentine’s Day!

Posted by on Feb 14, 2015 in Design Tips, photo, Photography | 5 comments

valentines-ELC_5765-2

I just had to make a greeting card design for Valentine’s day when I remembered you could change the bokeh shapes in the background by putting a piece of on the front of your lens with a cutout of a certain shape. Enjoy!

Read More

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