Code Snippets

snippetsHTML

[bra_toggle collapsable="no" caption="How to Add a MAILTO Link - HTML" ]

To create a link that sends an e-mail to somebody, use the HTML mailto: tag.

Your code will look like this:

<a href="mailto:webmonkey@wired.com>Send an e-mail to Webmonkey</a>
and tell us how much you love cats.

Your result will be this below

Send an e-mail to Webmonkey
and tell us how much you love cats.

When the reader clicks on that link, their default e-mail application will launch and a blank e-mail addressed to webmonkey@wired.com (or whatever address you put in the link) will open up.

You can fill out a subject for them, too. Just throw a ?subject= into your code. Your markup will end up looking something like this:

<a href="mailto:webmonkey@wired.com?subject=I-love-cats-too!">Jon</a>,
a Webmonkey writer, adores cats.
[/bra_toggle] [bra_toggle collapsable="no" caption="HTML 5 Video and Audio embed code"]

You dont need to have a plugin to handle video and with the introduction of Apple devices that do not accept flash, we need an alternative.

Try this code when you want a compliant video audio player that will work across all platforms. (Older browsers will ignore this code.)
<video>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

You can also test this on a live environment before using it on your own site.  Just click below on the link:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_bear

[/bra_toggle] [bra_toggle collapsable="no" caption="Using the Meta Tag"]

Use META tags to get a more accurate and representative listing of your Web site in
(some) search engine indexes. By adding your own searchable keywords, you can
better communicate with the search engine robots (also referred to as spiders) that
index your site.

When you are trying to come up with a description of your site and appropriate
keywords, BE THE ONE WHO SEARCHES. If you were looking for the type of
information that your site includes, what keywords would you punch into the
search line? What descriptive sentence would lead you to one site as opposed to
another? Keep in mind that when a robot visits your site, it will follow links within
your site and index them as well. If you change your Web site or a single Web page,
the robot will update the search engine index when it returns to your site anywhere
from a couple days to several months later, depending on the search engine.

META tags are invisible; they will not display when previewing your HTML document
through a Web browser. For this reason, META tags must fall after the <title></title>
tag, between your <head></head> tag, and before the <body> tag as in the following
example:

<html>
<head>
<title>
This text would contain the title of your page</title>
<meta name="description"  content="This text would contain a
description of your page">
<meta name="keywords"  content="This text would consist of a
list of keywords, separated by commas">
</head>
<body>

There are many different META tags. You can use one, two, or all of the tags within
your Web page:

<meta name="description"  content="your text here">Depending on the
search engine, the text you include after content will be displayed along with the

title of your page in a search index. A single, brief but descriptive sentence is all
you need, but you can use up to 200 text characters (a character is a single letter,
space, or punctuation mark). Don't make thedescriptionthe same as your title.

For example, the following code...

<html>
<head>
<title>"
Early American Writers</title>
<meta name="description"  content="Early American Writers">
</head>

...would appear like this in a search engine index that recognizes META tags:

Early American Writers
Early American Writers

If you do not include META tags in your HTML, Alta Vista will index all of
the words in your document, and will use the first few words of the document
as a short abstract or description in the Alta Vista search index. Similarly,
Infoseek will derive an index description from the first 200 characters of your
HTML document if you choose not to include META tags.

<meta name="keywords"  content="your keyword here, your keyword
here">Keywords should be separated by commas (and spaces between commas
are not necessary), and you can include 1,000 characters of text (again, a
character is a single letter, space, or punctuation mark). For instance, if your
site consists of information on early American writers, include author names as
keywords:

<meta name="keywords"  content="Hawthorne, Melville, Poe">

Early on, some Web masters discovered that if you included the same keyword
repeatedly within the content attribute, you could increase your Web site's
chances of appearing at the beginning of a search index. Search engines caught on,
and now, many instruct their robots not to index Web sites with repetitive keywords.

<meta name="robots" content="noindex">Use this tag if you don't want a
specific page to be indexed by a search engine. If you don't want the robot to index
any links contained within your Web site, add nofollow to the tag:

<meta name="robots" content="noindex,nofollow">

There are several other META tags available, although in my opinion, they're rather
silly and redundant. For information on these tags, and some great insight into META
tags in general, you may want to check out some of these links:

CLIENT PULL:

META tags can also be used to control the loading of an HTML document. For
instance, you can use META tags to set up a "Client Pull"—make your page
automatically jump to and load another page without a user's prompt. Just embed
the following code in your <head></head> tag:

<meta http-equiv=refresh content="10;url=http://www.jump.com">

...where 10 is the number of seconds you want the current page to be displayed
before the jump, and http://www.jump.com is the URL of the site or specific
page that you want the user to jump to.[/bra_toggle] [bra_toggle collapsable="no" caption="Working with Sound on your webpage"]

see the EMBED command to embed a sound file and have it play in the background. Upload the sound file to your server as raw data and include the following tag in your HTML document:

<EMBED SRC="hal.wav" HIDDEN=TRUE
AUTOSTART=TRUE LOOP=TRUE>

EMBED SRC tells the browser where to find the sound file.
HIDDEN=TRUE tells the browser to load the sound file but not to display a sound control panel. If you use the attribute HIDDEN=FALSE, a sound player control panel with play, stop, pause, and volume control buttons will be displayed. Keep in mind, however, that if you choose to display this sound control panel, you must also specify a WIDTH and HEIGHT attribute for the CONSOLE (WIDTH=144 HEIGHT=74 is suggested).

Your tag would then look like the following:
<EMBED SRC="hal.wav" HIDDEN=FALSE
AUTOSTART=FALSE LOOP=FALSE WIDTH=144
HEIGHT=74 CONTROLS=CONSOLE>

 

AUTOSTART=TRUE specifies that the sound file will automatically start to play as soon as the file is loaded. If you change the attribute to AUTOSTART=FALSE, the audio will not start to play until the user instructs it to do so.
LOOP=TRUE specifies that the sound file will play an infinite number of times. With LOOP=FALSE, the sound file will play only once. LOOP=4 (or any number you choose) will cause the sound file to play 4 times.

Sound files can be uploaded and played in WAV, AIFF, AU, and MIDI format. In addition, you can use the EMBED tag to play QuickTime movies, AVI and VRML files.[/bra_toggle]

PHP_MYSQL_snippets

[bra_toggle collapsable="yes" caption="Php Shortcode in WordPress template"] Last updated on:

Shortcodes in WordPress are bits of text you can use in the content area to invoke some kind of function to accomplish certain tasks.

For example, video embedding in WP 2.9+ and higher uses the shortcode.

You can write your own shortcodes, and plugins often offer their functionality via shortcodes as well.

But what if you want to use a shortcode from within a template instead of with the content of a Post/Page?

You can invoke it with a special function:

<?php echo do_shortcode("[shortcode]"); ?>

[/bra_toggle] [bra_toggle collapsable="yes" caption="How to Create a Database in MySQL"]

Whether you want to keep a record of patients' appointments, track profits and
sales for your business, or even store parts of resumes using MySQL, creating
databases and tables are the first step. This tutorial will show you how to make
databases and tables, insert values and load data into them, update entries, and
drop databases and tables.

To start off, create a database.

mysql> CREATE DATABASE mydb;

Now you will need to select this database so that you can use it.

mysql> USE mydb;

That was easy, huh? Things get more complicated when you start making tables,
deciding on their structures and interconnections, and updating and selecting values.
We'll stick with something simple for now.

mysql > CREATE TABLE resumes (name VARCHAR(30), phone_number
VARCHAR(20), references TEXT, email VARCHAR(30), birth DATE);

This creates a table, 'resumes,' with data types VARCHAR, TEXT and
DATE. VARCHAR(number) indicates that a field will hold up to a certain number
of characters, instead of a static value. This is useful for names, phone numbers,
and anything else which may not be uniform in length. TEXT type differs from
VARCHAR because it holds larger lengths of characters. The DATE type stores a
date in the format 'YYYY-MM-DD.' If you ever forget what data types your table
stores, you can use the DESCRIBE command.

mysql> DESCRIBE resumes;

There are two ways to populate your table with values. The first is the INSERT
command, which you may already be familiar with.

mysql> INSERT INTO resumes VALUES ('John Shoe', '1-234-567-8910',
'reference 1, reference 2', 'myemail@email.com', '1993-01-17');

Of course, if you have a large data set, you will want to manually enter each entry.
Instead, create a text file with values separated by tabs in the order that you created the
table columns. New lines in the text file represent new rows in the table.
For example, in a text file called 'person.txt' you would include the following row.

John Shoe 1-234-567-8910 reference 1, reference 2 myemail@email.com 1993-01-17

Now load the data into the table.

mysql> LOAD DATA LOCAL INFILE '/mypath/person.txt' INTO
TABLE resumes;

Sometimes MySQL is picky about the line endings. If you used a text editor which
terminates lines with \r\n, which is common on Windows editors, use this
command instead.

This changes the phone number of all rows to "new phone number" that have a value
of "John Shoe" in the "name" field.

Finally, you can delete a table or database by using the DROP command. Make sure
that you want to do this before you execute the command because dropping a database
or table will delete all the other entries or tables.

mysql> DROP TABLE resumes;

mysql> DROP DATABASE mydb;

Now you can get started on creating tables and databases for your own business or personal use.

Once you master SQL select statements, you will have most of the basics
of MySQL within your reach.

[/bra_toggle] [bra_toggle collapsable="yes" caption="MySQL Query to Show Database Size and Free Space"]

Every feel like your DB is getting a bit too big, but was unsure of the size. Well, this little MySQL Query will make you smile.

To check the size of your DB, run this query within MySQL:

MySQL Query to Show Database Size

SELECT table_schema "Data Base Name",
sum( data_length + index_length ) / 1024 / 1024 "Used MB"
FROM information_schema.TABLES
GROUP BY table_schema ;

So know you know that size of the db, but how much space do I have left on the DB?  We gotcha too! =)

MySQL Query to Show Database Size
SELECT table_schema "Data Base Name",
sum( data_length + index_length ) / 1024 / 1024 "Used MB",
sum( data_free ) / 1024 / 1024 "Free MB"
FROM information_schema.TABLES
GROUP BY table_schema ;

[/bra_toggle] [bra_toggle collapsable="yes" caption="Redirect with PHP"]

You can use a simple PHP script to redirect a user from the page they entered to a different web page. One reason you may want to do this is that the page they are trying to access no longer exists. Using this method, they can be seamlessly transfered to the new page without having to click a link to continue.

  • Users are redirected quickly and seamlessly
  • When using the 'Back' button, the user is taken to the last viewed page, not the redirect page
  • Works on all browsers

Here's How:

<?php
header( 'Location: http://www.yoursite.com/new_page.html' ) ;
?>

Change the code on the redirect page to be simply this. You need to replace the URL above with the URL you wish to direct to.

Be sure that you do not have any text sent to the browser before this, or it will not work. Your safest bet is to simply remove all content from the page but the redirect code.
<html>
<?php
//this will NOT work, the browser received the HTML tag before the script
header( 'Location: http://www.yoursite.com/new_page.html' ) ;
?>

Tips:

  1. Remove all code but this
  2. Mention on the new page that user's should update their links and bookmarks
  3. You can use this code to create a drop down menu that redirects users pages.
[/bra_toggle]

snippetsCSS3

[bra_toggle collapsable="no" caption="CSS 3 Cheat Sheet (PDF)" ]This is printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.

Click here to download the CSS3 cheatsheet

[/bra_toggle] [bra_toggle collapsable="no" caption="CSS 3 Edged corners on website"]

Ever see a ribbon wrapped around a corner of a site and when you click on it, it is not an image, but code!

well, today you will be able to do the same.  It is a very nice look and a piece of eye candy that can be only acheived by CSS3.

Here is your HTML:

NEWS

That line above goes into HTML page at the top.

then here is the CSS to handle the ribbon creation:

.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}

.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}

.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}

.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}​

[/bra_toggle] [bra_toggle collapsable="no" caption="Feature table design with CSS3"]

I love shadows, rounded corners, gradients and all the CSS3 features. That’s why, there are some days when I find myself designing in CSS3 more than in Photoshop.

The idea of building a features table just by using CSS3 came to me a while ago and I decided to share it with you in this article

THE HTML MARKUP Below you can find the abbreviated HTML:

<table class="features-table">
<thead>
<tr>
<td></td>
<td>Standard</td>
<td>Professional</td>
<td>Enterprise</td>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td>$99</td>
<td>$199</td>
<td>$399</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Custom domain</td>
<td><img src="check.png" width="16" height="16" alt="check"></td>
<td><img src="check.png" width="16" height="16" alt="check"></td>
<td><img src="check.png" width="16" height="16" alt="check"></td>
</tr> <tr> <td>Advanced control</td>
<td><img src="check.png" width="16" height="16" alt="check"></td>
<td><img src="check.png" width="16" height="16" alt="check"></td>
<td><img src="check.png" width="16" height="16" alt="check"></td>
</tr> <tr> <td>Unlimited support</td>
<td><img src="cross.png" width="16" height="16" alt="cross"></td>
<td><img src="check.png" width="16" height="16" alt="check"></td>
<td><img src="check.png" width="16" height="16" alt="check"></td>
</tr> <tr> <td>User registration</td>
<td><img src="cross.png" width="16" height="16" alt="cross"></td>
<td><img src="cross.png" width="16" height="16" alt="cross"></td>
<td><img src="check.png" width="16" height="16" alt="check"></td>
</tr>
</tbody>
</table>
[/bra_toggle] [bra_toggle collapsable="no" caption="The Good,The Bad and The Ugly of CSS"]

Having recently watched a good video presentation by Mathias from Fronteers 2012 which I found both interesting and inspirational. I already had in mind some similar things, so I ended up writing this article down. It’s about some random things and facts you may (not) have known about HTML & CSS.

CSS em unit

Originally, the CSS em unit was derived from the width of the capital letter M, which is where its name came from. I remind myself I first read this in a CSS book a while ago, not sure about the book’s name but you can check the Wikipedia page for more on this topic.

HTML5 tags

The HTML5 structural elements are a practical implementation of naming searches among CSS class and id selectors found in the wild at that time. I first read about how the currently HTML5 tags were born while digging into Introducing HTML5 By Bruce Lawson and Remy Sharp.

Minimal valid web page

With the HTML5 arrival, you’d only need to define the doctype and title in order to create a new valid web page. So, theoretically, no htmlhead or body tags are needed for that. This is happening because browsers assume them anyway, just check browsers’ debuggers with the code below:

<!doctype HTML>
<title>Bazinga</title>

CSS specificity

It takes 256 chained CSS class selectors in order to beat an id specificity. When Chris Coyier made this example, there has been a lot of discussion on this topic. Ryan Seddon wrote some thoughts about this too.

Also, on topic, an interesting fact is that there is no maximum length for a class name or id in CSS.

Colors

Peru and Tomato are actually both valid CSS color names. Also, the hex #badA55 color is not so badass, it’s actually sort of lime 🙂

Also, when using the HTML bgcolor attribute (deprecated) like that:<body bgcolor="chucknorris"></body>​, a bloody red color is rendered. Mathias mentioned it in his video as being the blood of Chuck Norris’s enemies. Pure coincidence… or not 🙂

Read the Stack Overflow discussion to find out why does HTML think “chucknorris” is a color.

CSS can be #funny

Check the following CSS lines to put a smile on your face:

#universe:before { content: ""; }
.ninja { visibility: hidden; }
.kids-these-days { -webkit-perspective: none; }
.work:after{ content:"Beer!"; }

Also, you may want to check CSSHumor on Twitter for more.

CSS px != Device px

The “px” unit in CSS doesn’t really have anything to do with screen pixels, despite the poorly chosen name. You need to take deep breath and take your time to read more here and here.

No (more) CSS4

It seems that there is no such thing as CSS4 after all. Also, CSS3 is everything after CSS2.1, it’s all about modules. Tab Atkins wrote in detail about why there is no such thing as CSS4.

How to tell if a site’s using HTML5 #funny

  • Try it on Internet Explorer.
  • Did it work?
  • No?
  • It’s HTML5.

HTTP request

“The fastest HTTP request is the one not made.”

This is not HTML & CSS related but I like this line a lot. Everytime I work on a project and try to optimize the number of HTTP requests, this pops up into my mind. I guess I first saw it while reading on of Steve Souders‘ posts.

::before & ::after pseudo elements

Until a few days ago, Firefox was the only one that supported transitions and animations for CSS pseudo elements like ::before and ::after. That’s a great feature and the good news for 2013 is that WebKit now supports that too. You can now open Google Chrome Canary and see them in action.

When you drop IE6 and IE7…

IE6 does not play an important role anymore, so with that in mind, now it’s perfectly OK to use:

  • Multiple CSS class selectors (e.g. .foo.bar)
  • Attribute selectors (e.g. E[foo])
  • Fixed positioning
  • Immediate child selector (e.g. .foo > .bar)

Read more about this matter here and if IE7 isn’t on your supported browsers list as well, you may want to use the shortest clearfix ever.

Costly CSS properties

Usually, CSS properties aren’t expensive at all, but when it comes about browser painting, you should be aware that some of the following can affect the way your page renders:

  • position:fixed
  • background-position: fixed
  • border-radius
  • background-size
  • box-shadow
  • gradients
[/bra_toggle]

adobe_photoshop_tips-and_tricks

[bra_toggle collapsable="yes" caption="GIF vs. JPEG image formats"]

GIF vs. JPEG IMAGE FORMATS

The best rule of thumb is to use the GIF file format for Web graphics that are composed of few colors and contain large areas of uniform color (such as logos, cartoons, simple art work, line art, graphs, and charts). Use the JPEG file format for Web graphics that are composed of textures and gradations of many colors (such as three dimensional objects and scanned photographs).

Why? Because the GIF graphic file format only supports 256 colors whereas JPEG supports millions, but more importantly, JPEG supports millions of color gradations. A blue sky, for example, is composed of millions of gradations of the color blue. Each gradation counts as one color. If your scanned photograph of this blue sky contains more than 256 shades of blue, some of these shades of blue will have to be eliminated when you convert the graphic to GIF format. Reducing colors in this fashion causes unsightly banding.

In addition, you can greatly reduce the file size of some Web graphics by using the JPEG format. In the example below, the left graphic was saved in GIF format and the file size when loaded up to my server is 25 kilobytes. The graphic on the right was saved in JPEG format with about 40% compression and it's only 4 kilobytes:

25 Kilobyte GIF 4 Kilobyte JPEG

 

The downside, however, with using the JPEG format is that JPEGs cannot be interlaced or transparent. Also, if your Web graphic has a large area of solid color, the JPEG format may create an unsightly dither pattern. Dithering appears as a pattern of tiny dots. If your monitor is capable of displaying thousands or millions of colors, you can see evidence of dithering in the sky right around the houses in the JPEGs above, especially in the 4 kilobyte JPEG. (If your monitor can only display 256 colors, both photos will look fairly crappy anyway.)

[/bra_toggle] [bra_toggle collapsable="yes" caption="Cut an object from the background in PhotoShop CS5"]

Open your image by clicking "File" and "Open" and navigating to your image.

Open the "Layers" palette by clicking on the "Windows" drop-down menu and selecting "Layers." A thumbnail depiction of your image will appear as the locked "Background" layer in the Layers palette.

Create a duplicate layer of the "Background" layer by clicking "Ctrl" ("Cmd" for Mac users) plus "J." Click on the duplicate layer to select it, if it's not already selected.

Return to your image. Under the "Select" drop-down menu, select "Color Range." A dialogue window will open. Click on the area in your image you want to select, adding base colors to your selection.This will create a white mask in the preview window of the new dialogue window. Hold down "Shift" and continue to click on your image to add more base colors to your selection. Remember this rule, as it's easy to get confused: White areas in the preview window will show up in the finished product. Black areas will disappear.

Speed up the process of selecting your base colors by sliding the "Fuzziness" slider to a higher number. It will add colors that are close to the ones you click. Lower the fuzziness number if you're picking up too many colors. You can do this at any time. The fuzziness number doesn't have to be set at the start.

Click the check box next to "Inverse" if the area you've selected is the section you want to disappear, such as a white sky behind a subject. In this instance, it would easier to select the sky and invert the selection to grab the rest of the photo than it would be to individually select all the other colors in the part you want to keep. If your subject is a colored box with subtle shade variations that is sitting in the middle of a white background, select the white background, then click "Inverse" to get the box.

Click "OK" to close the window.

Click the "Add Mask" button at the bottom of the Layers palette. It's the gray square with the white circle in the middle. Your mask will be saved as a channel in the "Channels" palette. Click on the "Channel" tab to see your new channel. You will see a thumbnail of the black and white depiction of your selection that you saw in the preview window of the Color Range dialogue box.

Click back on the "Layers" tab. You won't see your mask on your image yet because the original background layer beneath your new layer is showing through the blocked out section. Click the eye icon next to the "Background" layer in your "Layers" palette to hide that layer and leave only the new layer showing. Your mask will now appear and the masked out area will disappear, leaving your cutout.

Save the image in the .gif format to maintain the transparent background. Saving it as a .jpg will add a white background to transparent areas.[/bra_toggle] [bra_toggle collapsable="yes" caption="How to Make a Transparent Background in Photoshop CS5"]

The default setup in Adobe Photoshop CS5 includes the creation of new images with a white background. There are many situations where a white background is ideal for your image creation, so you probably have not given much thought to adjusting that setting. But if you are planning to make a multi-layer image, or if you want to create a transparent PNG image for your website, then you have likely discovered that a white background actually has a pixel color value, and that value needs to be removed. There are a couple of different options when you want to learn how to make a transparent background in Photoshop CS5, so you can read this tutorial to determine which solution is right for your situations.

Create a New Image with a Transparent Background in Photoshop CS5

This is the simplest of the two solutions, and is certainly where you should be starting, if possible. Launch Adobe Photoshop CS5, click File at the top of the window, then click New. This will open theNew window.

Click the drop-down menu to the right of Background Contents, then click the Transparentoption.

create a new photoshop image with a transparent background

Make any other necessary changes to the size and format of your new image, then click the OK button to generate your blank image. All of the empty space on your image will be transparent, provided that it is saved in a file format that supports transparency. If you are creating an image that will be posted on a website, you should probably use the PNG file format, as JPEG does not support transparency. Anything you add to the image will have the transparency that you define. You can choose the opacity for each layer by adjusting the Opacity option at the top of the Layers panel.

Change an Existing Background to a Transparent Background in Photoshop CS5

The solution to this problem is a little more complicated than the solution to creating a transparent background from scratch.

If you are working with a multi-layer image and the existing background layer is only the default white background, then you can delete that layer. Right-click on the Background layer in the Layers panel at the right side of the window, click the Delete layer option, then confirm that you want to delete the layer. Any transparency in your image should now be in effect.

how to make a transparent background in photoshop cs5

If you have content on the Background layer that you want to save, then you will need to get a little creative to remove the unwanted background color.

You can use the Magic eraser tool (right-click the Eraser tool in the toolbox, then click the Magic Eraser Tool) to delete all contiguous regions of that color on your layer. If you are finding that this method is deleting some of the content that you want to keep, you can undo the erase, then modify theTolerance setting at the top of the window. The lower the tolerance number, the more precise the magic erase action will be.

You can also unlock the background layer, then use the regular eraser tool to manually erase unwanted elements of the background.

One final option is to use one of the lasso tools to select the content you want to keep, press Shift + Ctrl + I to invert the selection, then press Ctrl + X to delete the unwanted background.

There is no one solution that is going to work in every possible scenario, but if you become comfortable with each of these tools you should be able to make a transparent background in Photoshop CS5 for just about any image that you encounter.

[/bra_toggle] [bra_toggle collapsable="yes" caption="How to Create an Animated GIF"]

Let’s say you have a folder full of images that you want to sequence together as frames in an animated GIF. You can find special programs online to do this, but with some of the new features of Adobe Photoshop, it’s quite fast and simple.

  1. Gather the images you want to animate into one folder.
  2. Click File > Scripts > Load Files into Stack. When the “Load Layers” window pops up, click Browse to select & open your image files, and then click OK. This should import the files you selected as individual layers in your document. Rearrange the layers into the correct order, if necessary.
  3. Open the Animation palette (Window > Animation) if you have CS5. **Note! In Photoshop CS6, this is now known as the Timeline palette. So, go to (Window > Timeline) instead.**
  4. In the Animation/Timeline palette menu (found under this button at the top right corner of the palette: PsPaletteMenu), click Make Frames From Layers. You can also click Reverse Frames if needed. This will take each layer in your document and set it as an individual frame in the animation.
  5. Now we will change the duration of each frame. Make sure you are in frame view, not timeline view. If you do not see thumbnail icons of all your layers in the Animation/Timeline palette, click the icon in the lower right corner (the hover text will say “Convert to Frame Animation”). Now, back in the Animation/Timeline palette menu, click Select All Frames.
  6. Click the drop down button just underneath each frame image (circled in red in the image below). This will bring up a menu where you can set a duration. Since all frames are selected, all frames will be set to the same time. Each frame can be changed individually, if desired.
  7. The drop down button circled in black in the image above will change how many times the animation will loop; either a fixed number of times, or forever.
  8. Once the frame order and timing as been set up, it is time to save the image! Click File > Save for Web & Devices, make sure the file format is set to GIF, change any other options if needed, and save the image!

You will now have an animated GIF taken from a folder full of the individual frames. In fact, as long as each frame exists as a separate layer in Photoshop, the Animation/Timeline palette can be used to create the GIF. But, with CS5 & CS6 it is easy to make separate layers from a folder of the individual frames as described.

If you want to add a transition effect to fade one frame into the following frame, please see my other post, Fade In & Fade Out an Animated .GIF in Photoshop.

[/bra_toggle]