Nerd diy // how to make text cutouts

sole society cute red shoes

This is the video I watched to learn how to make text cut-outs in Photoshop Elements – if you’re happy to watch a video then please do, Melissa Shanhun from DigiScrapHQ is great – and she has an Aussie (I think) accent! I’m also going to give step by step instructions below.

So, in a couple of my last posts I used this effect, you can also see it on some other popular blogs like Jess Lively, which is the site that inspired me to do it.

I used Photoshop Elements to do this, but since Elements is the baby of the Photoshop family probably all other versions this will work as well.

Step 1: Start with your background image.

Step 2: Add a shape layer, any shape, color or size you want on top of your background image.

Step 3: Simplify the shape layer by right clicking on the layer and selecting Simplify.

Step 4: Add a new text layer on top of your shape layer.

Step 5: Move the text layer to the spot over your simplified shape layer in which you want the cutout to appear. Holding the CTRL button + click on the T in the text layer – this will select the text.

Step 6: In your Layers panel select your simplified shape layer & click delete – this will delete the shape of the text from the shape layer.

Step 7: Make your text layer invisible (deselecting the eye) and voila you now have a text cutout! I also like changing the opacity of this layer.

Image via Sole Society.

Font Awesome Icons for WordPress

With the internet being so vast you’re bound to run in to bad folks every once in a while. Luckily my bad experiences are far outweighed by my good experiences. I believe in karma, in what you put out there will eventually come back to you. With that in mind, I answer questions about blogging freely, share code and design tips when I get a request, and I think my pre-made Blogger templates, while not free, are very reasonably priced.

carrieloves13So a few weeks ago I was shocked to find out that a previous customer had my custom-made, just-for-my-blog, gold glitter icons in her sidebar. She even had my gold glitter heart with the black Wayfarer sunglasses that I used for my design site as her favorites link or some other stupid thing. Seriously, I know I shouldn’t have been so upset, but I was. Maybe I shouldn’t have made something so custom for myself and expected it to remain just mine. Maybe that was selfish, who knows.

But, when I confronted her (replied to her email asking me for a header change) she didn’t see anything wrong with my icons being on her blog & never once apologized.

She actually blamed it on another designer she hired (and conveniently forgot the name of) saying that she referenced my icons as an example of what she wanted… and how was she to know he would not only steal them?!

And, wait for it, said-designer even used my image links – he didn’t even bother uploading them to have his/her server.

I asked her to remove them, and after 24 hours she hadn’t, I ended up deleting them from my media file myself. Which meant she didn’t have them, and I didn’t have them either… oh I could have uploaded them again, but I just wasn’t in the mindset to get taken advantage of again. I mean come on I have free social media icons available for download – 19 different icons + 30 colors. What exactly was her deal?!

During that fiasco I stumbled upon Font Awesome Icons by Dave Gandy and fell truly madly deeply in love. I then found Rachel Baker who understands geek code and made a Font Awesome Icons WordPress plugin, and now I have these super awesome icons in my sidebar and footer.

font awesome icons

Click image & scroll down to see all 249 icons.

Nerd DIY // How to add cool hover effect with social media icons

nerd diy hover effects for social media icons

One of my more recent projects – Oddness/Weirdness, and a couple before that, involved using a hover effect with the social media icons. And, even more recently one of the bloggers who downloaded my free social media icons and shared with me her blog & her hover effect, as well. So I thought I’d share with you how to do this yourself, because it is pretty awesome.

  • Use any social media icons you have on hand, or you can download a couple sets of mine. Make sure you have 2 sets of icons, one for standard viewing and one for the hover.
  • Upload the buttons to a hosting site, such as Photobucket. This will give you the image link to then use in your HTML code.
  • Place them in your sidebar
    • For Blogger go to Layout > Add a Gadget > HTML/JavaScript
    • For WordPress go to Appearance > Widgets > drag a Text widget to your Sidebar
    • Here is the ‘bones’ of  HTML code you’ll need for your gadget/widget:

<a title=”Follow on Twitter” href=”https://twitter.com/Insert Profile Link Here“><img onmouseout=”this.src=’Insert URL of Original Image Here‘” onmouseover=”this.src=’Insert URL of Hover Image Here‘ ” src=”Insert URL of Original Image Here” alt=”Follow on Twitter” /></a>

This is what your icons will behave like (go ahead and give them a hover or two, they like it!):

Follow Carrie Loves on Twitter

and

Follow Carrie Loves on Twitter
Here’s my finished code for the Twitter icon:

<a title=”Follow Carrie Loves on Twitter” href=”https://twitter.com/carrieloves”><img onmouseover=”this.src=’http://photobucket.com/…/twitter-2.png’ ” onmouseout=”this.src=’http://photobucket.com/…/twitter.png’” alt=”Follow Carrie Loves on Twitter” src=”http://photobucket.com/…/twitter.png” /></a>

Killer Tips:

  • The original image (or mouse out) is twitter.png and the hover image (or mouse over) is twitter-2.png, your images can have a different naming convention, but name the two images differently to avoid confusion.
  • The original image will be listed twice and the hover image once.
  • To center align your icons in your widget/gadget add <center> before the code and </center> after the code.
  • Need some icons, get them here.

Adiós Google Reader

home office

This morning I woke to an email from my mom:

Hi, Honey.
I was just notified that google reader will be discontinued 7/1.  I’m disappointed.  What do you think a good alternative will be?
Be well and do good,
Mom

And it’s true! Google Reader is checking out of the Internet July 1st, 2013. Google is venturing to streamline its product offerings (and push us towards Google+). I’ve read my lovely blogs through Google Reader for years and that just sucks. But, there are alternatives.

You could always go with Google+, Bloglovin, Facebook, Email Subscriptions for your favorite blogs. But, if you are a Reader fan the three alternatives that match the look, feel and functionality of Google Reader are Feedly, NewsBlur and The Old Reader.

And, my favorite by far (as of this morning – I know a lot of research went in to that!) is Feedly. Feedly easily transferred over all of my feeds from Google Reader in a hot second. Then I was off discovering the functionality … and of course the aesthetics.

If you are/were using Google Reader, what are you going to use going forward?

Image via Lilly’s Style.

Sparkle

dont let anyone ever dull your sparkleI created a Society6 account about 5 months ago and kind of forgot about it. Until they sent me a much larger than normal deposit from recent orders.

Hello!

It’s not a huge amount of monies, we’re talking under $150, but when you consider I only make about $3 on each sale… that’s a whole lotta business! I dusted off the cobwebs of my account – I had to reset the password because after exhausting all the usual suspects, I just gave up.

I have a few graphics in my shop, mainly for iPhone cases, but the best seller (ahem, only seller) is the “Don’t let anyone EVER dull your Sparkle” and it’s sold both iPhone cases and art prints!

I’m just wowing myself over here.

Oh, another random thing that makes me happy, visiting new to me blogs and seeing a set of my free social media icons in their sidebar… it gives me a warm happy feeling that just can’t be beat.

Have you had any pleasant surprises lately? Please share the love!