Archive for Graphics

Apr
1

Photoshop Button With Tinted Gradient Effect (psd included!)

by Contributing Author: Judy Rose, Graphics and Flash Expert

Hi,

I want to show you another cool and simple Photoshop effect I like to use for buttons or logos or whatever your creative imagination can find a use for:

Here are the steps I used to create this:

Start with an image or create one with background color you want and make the canvas size bigger so you have some room to work with…I hate the feeling of being closed in when I’m creating, so give it as much room as you want. You can crop it later.
Then add the following layer styles

Inner Glow (my settings are blend mode: Screen, Technique: Precise, Source: Edge, Choke: 0 Size: 4
Gradient Overlay I used a simple black and gray linear at 90 degrees
Stroke (mine is a black at 2, inside, normal & 100% opacity)

Create your type in white (I used Broadway font)
With your Type Layer selected (I have my JR in a separate layer and that is what I selected in this step) and your image background selected, make it a smart object
Rastersize that to convert the type to pixels.
Use the Rectangular Marquee Tool over the part you want to tint giving it some space like this:
Go to Image, Adjustments, Gradient Map
Select a gradient you want to use. Important! Adjust the last color to white so that you don’t get this funky tinted “J” or lose the letter altogether. Here’s what I mean:

Tip: I find Photoshop gradients all over the web that you can pick up for free…just remember to be respectful of their terms of use. A favorite of mine is Brusheezy.com (they add new stuff all the time), but you can find them everywhere along with Photoshop styles, actions, brushes, textures, etc.
Now use that same gradient for any text you want to highlight

And that’s it! Very easy, very classy and very cool! The possibilities are endless!

More samples:

And here’s the link to the zip file to download the PSD

JRcontrastButt on

Have fun!

Categories : Fun Stuff, Graphics, Media

Mar
21

26 Free Tip Sheets and Cheat Sheets for Your Computer Environment

by Janet L. Hall, Web Trainer/Developer

If you’ll like me you probably use a variety of tools in your computer environment: Google, Firefox, iTunes, Outlook, YouTube, Skype, and the list goes on and on.

Well I have found this really cool web site makeuseof.com that I’d like to share with you that offers (to date) 26 free tip sheets and cheat sheets for your computer environment.

Did you know that you can use Google’s search field as a calculator? I didn’t until I downloaded makeuseof.com’s Google Search Commands and Shortcuts. In this cheat sheet you will learn how to Restrict Search to Google Groups, Restrict Search, Specialized Information Queries, Alternative Query Types, Restrict Search to Sites where Query Words Appear, Basic Examples, and Calculator. All on one sheet – very cool and important information!

Have fun downloading!

26 Free Tip Sheets and Cheat Sheets for Your Computer Environment (Windows and Mac)

Dropbox Tips
YouTube Tips
Outlook Shortcuts
Skype Shortcuts
Opera Shortcuts
iPhone Cheat Sheet
Useful Gmail Shortcuts
Twitter Cheat Sheet
Photoshop CS5 Cheat Sheet
iTunes Cheat Sheet (Mac)
iTunes Cheat Sheet (Windows)
Windows CMD Commands
GIMP Shortcuts
30 Codes for Chat Smileys
Facebook Shortcuts
VLC Player Shortcuts (BTW – I love this player! If you make video for your clients and they can’t play it have them download the FREE VLC Player and I bet you your video will play!)
Google Reader Shortcuts
Mozilla Thunderbird Cheat Sheet
Internet Explorer Shortcuts
Google Chrome Shortcuts
Firefox Shortcuts (Mac OSX)
Firefox Shortcuts (Windows)
Best Google Search Tips
Linux Commands Reference
Mac OSX Shortcuts
Windows Shortcuts

If you have any tips or shortcuts you’d like to share please leave a comment below.

And while you’re visiting here Sign up for my U Gotta Look At This blog posts at the top right – so you won’t miss any posts – and every time I post it will be delivered to your inbox (and when you sign up don’t forget to verify that you did – you’ll get an email to do that – just click on the link).

Oh I almost forgot, while you’re visiting makeuseof.com check out their Best of Apps – you’ll be glad you did.

Categories : Code, Email, Facebook, Fun Stuff, Graphics, Media, Social Media, Twitter, Videos, YouTube

Mar
11

PhotoShop Content-Aware Quick Trick

by Contributing Author: Judy Rose, Graphics and Flash Expert

I just love Photoshop CS5.5! There are so many things about it that are awesome, but I want to talk about one feature I use all the time… Content Aware Fill.

I don’t know about you, but I consistently get images from clients they would like to put on their website that include the nasty yellow printed dates! And sometimes it was taken 4-5 or more years ago. Not a good way to market your business or product because chances are, it’s evolved in one way or another since then, at least we hope so. With PS CS5.5 there is a really much simpler way to do this than using the clone stamp and the image is nearly perfect without needing any adjustments.

This is what I’m talking about:

So with about 10 minutes of your time, at most, let’s get rid of it!

Step 1:

I always make a duplicate layer of the image and lock and turn off the original image layer so that I do not mess with it. You will want to zoom in on the area that you are going to work with. Then grab the magic wand tool, hold down the shift key and start selecting all of the yellow (or whatever color your s may be) numbers. Now it is important that you not grab any other area except exactly what you want to remove.

Step 2:

Now you want to expand your selection 1 pixel to be sure you don’t leave any shadows of yellow! To do that go to the Select>Modify>Expand and select 1 pixel. Remember that you do not want to grab too much more than what you need.

Step 3:

Once you have it selected and expanded, go to Edit>Fill to open the fill window. Select Content-Aware from the dropdown and leave the rest of the settings to the default and click OK

Step 4:

You may need some touch up but it should be minimal. And depending on how big your photo is, you can do one or two characters at a time which will minimize the need for touch-up at all. Just play around with it because it’s a great tool! You might want to go to Adobe TV to see what else Content-Aware can do. It’s really magical! And then there’s Puppet Warp! Can’t wait to tell you about it!

After:

Note: I hear a rumor that the next version of Creative Design Suite Premium with Photoshop CS6 is coming out this spring sometime so hold off!

Until next time…make it a great day!

Find vectors, graphics, web elements, seamless backgrounds, buttons, icons, photos & more at 123RF.com. They are very reasonable…a lot less than most royalty-free stock photo sites…even free! Search for “more” in the footer and then find free stock photos for hundreds of free graphic and more are added every day as others expire….be prepared to spend some time there! Here are some samples, but hurry they expire in 36 hours.

***************************************************

Judy Rose – Graphic and PhotoShop Expert, Dreamweaver, SwishMax4, Flash, jquery, HTML and CSS extraordinaire since 2002! If you need help or assist please email us at info@kickstartwebsites.com or visit Judy’s site at http://josedesigns.com/

Categories : Graphics, Media

Jan
22

How to Create a Favicon With Photoshop and Without

by Contributing Author: Judy Rose, Graphics and Flash Expert

Two Methods to Make Those Cute Little Icons

You See in Browser Tabs, aka Favicons

Ok, so what is a favicon?

Have you ever noticed the cute teeny-tiny graphic on the tabs of the websites you are looking at? Have you wondered why it’s there? Have you ever wondered how it got there? And have you noticed that when you have several tabs open at the same time in IE, Firefox, Chrome, Safari and more, you can readily tell which site is the one you were just looking at because of that cute little icon? Well that’s exactly why it’s done! A lot of sites have them, but I still see a lot that don’t have a favicon. It’s a branding procedure and it’s there so that you can identify it at a glance.
A favicon is described in Wikipedia this way…

“A favicon (short for favorites icon), also known as a shortcut icon, Web site icon, URL icon, or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. A web designer can create such an icon and install it into a Web site (or Web page) by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as desktop icon.”

Well put Wikipedia!

I know, I hear you…you want to create a favicon on your own website or for your clients’ sites but haven’t quite yet got around to figuring out that little, but ever-so-important detail. Well, it’s very simple and I’m going to show you how.

Method 1 – Favicons With Photoshop:

Requirements for this method are:

Photoshop (I’m using CS5.5 in this tutorial)
logo or image
ftp program like Filezilla
a free plug-in for Photoshop you can download at Telegraphics.
45 minutes (give or take) of your time

Steps to create favicon with Photoshop:

The first step is to find a clear image or create your own. It should be at least 64×64 pixels and it should represent what you want people to see a to make that connection to your site. If you have a logo or branding, use that definitely if it can be reduced down, even if only part of it. I chose a nice clean time appropriate Valentine heart time that I purchased from my favorite royalty-free stock image site, 123rf Stock Photos. (IMPORTANT NOTE: Remember to always purchase your images and read the copyright usages, so there is never any chance of copyright infringement! Believe me. I know someone that used an image she found in Google for an online newsletter and got caught to the tune of a $1200 fine about 3 months after her newsletter went out and from what I hear, she got a bargain!)

The next step is to reduce the image size in Photoshop. You will want to crop it down to eliminate all empty space to get the best image. Now there is one more thing that works well when reducing the size of images. That’s the Resample option of Bicubic Sharper (best for reduction) option in the image size dialog box as shown in this image:

This is 64x64px image reduced from its original size of 388x388px.
And this cute little guy is the final 16×16 px suitable for .ico.

Once reduced to 16x16px, you can save as an .ico file, if you have this free plugin for Photoshop that you can download at Telegraphics. It reads and writes .ico files. You simply go to File | Save As “favicon.ico”:

Using your FTP Client, I use Filezilla, upload the file to your root folder like this:

Now add this line of code to the head of your html file (anywhere between the <head> tags): <link rel=”Shortcut Icon” href=”favicon.ico”>

Then preview in browsers and see that now, you too, have a cute little icon next to your url! See how at a glance, among all the others on the tabs I have open, I know exactly which site is mine because of the cute red heart! And at a glance I know all the other sites I have open also. If it wasn’t for favicons, they would all have the browsers’ logo like the one on the end and you would have to scroll through each open site to know what is what.

It’s tested and works in Internet Explorer, Firefox, Safari, Google Chrome (showing above) and Opera.

Method 2 – Without Photoshop

I don’t have Photoshop…can I still have a favicon?

Requirements:

an image ready to use – typical supported file formats: gif, jpg, png, and bmp.I recommend you use a gif or png with transparency with a maximum file size of around 150kb.
ftp program like Filezilla
15 minutes of your time

Of course you can. And it’s an even simpler way! Let’s do it…

Steps:

Open a favicon generator like this one or search for others:
- This one has been around for a very long time and is simple to use. I use it often. Just follow their instructions. The cool thing about their is that it also creates a 32x32px desktop icon so if you save it to your desktop, you can see the same cute little icon just a bit bigger!
Be sure to add the code <link rel=”Shortcut Icon” href=”favicon.ico”> between your head tags and upload the favicon to your root directory.

That’s it! Thanks for reading and I’ll be looking for your cute little icon otherwise known as a favicon on your site!

How do you create your favicons? Please leave a comment below and let us know how this helped you or what you use to create your favicon.

What else would you like to learn or what graphic challenges are you having? Let us know by leaving a comment below!

And be sure to sign up for our blog posts to be delivered to your inbox so you’ll always know when we post!

***************************************************

Categories : Graphics, Media

Archive for Graphics

Photoshop Button With Tinted Gradient Effect (psd included!)

PhotoShop Content-Aware Quick Trick

Step 1:

Step 2:

Step 3:

Step 4:

How to Create a Favicon With Photoshop and Without

Two Methods to Make Those Cute Little Icons

You See in Browser Tabs, aka Favicons

Ok, so what is a favicon?

Method 1 – Favicons With Photoshop:

Steps to create favicon with Photoshop:

Method 2 – Without Photoshop

I don’t have Photoshop…can I still have a favicon?

Steps:

Get my Blog Posts via Email!

Read What Clients are Saying!

Client’s Sites

Need Training?

Need a Vitual Web Master?

Need a Web Site Developed?

Look at This!

Web Site Training

WordPress Themes

Must Have Plugins!

Resources

Step 1: Get Domain

Step 2: Get Hosting

Step 3: Get a Theme

Step 4: Get Images

Step 5: Get Backedup

Say YES to Life!

Live Events and Training

My Other Sites

FREE Click Home the Bacon E-Zine	Enter Name		Email

Archive for Graphics

Photoshop Button With Tinted Gradient Effect (psd included!)

Graphic Designers Who Can Help You With Facebook Timeline Cover Images

26 Free Tip Sheets and Cheat Sheets for Your Computer Environment

26 Free Tip Sheets and Cheat Sheets for Your Computer Environment (Windows and Mac)

PhotoShop Content-Aware Quick Trick

Step 1:

Step 2:

Step 3:

Step 4:

How to Create a Favicon With Photoshop and Without

Two Methods to Make Those Cute Little Icons

You See in Browser Tabs, aka Favicons

Ok, so what is a favicon?

Method 1 – Favicons With Photoshop:

Steps to create favicon with Photoshop:

Method 2 – Without Photoshop

I don’t have Photoshop…can I still have a favicon?

Steps:

Get my Blog Posts via Email!

Read What Clients are Saying!

Client’s Sites

Need Training?

Need a Vitual Web Master?

Need a Web Site Developed?

Look at This!

Web Site Training

WordPress Themes

Must Have Plugins!

Resources

Step 1: Get Domain

Step 2: Get Hosting

Step 3: Get a Theme

Step 4: Get Images

Step 5: Get Backedup

Say YES to Life!

Live Events and Training

My Other Sites