English


No doubt you’ve heard about image slicing, but do you know what it is and how it works? Image slicing is a technique for creating a web page (or a component of a web page, like a header or navigation menu) visually in Photoshop (Fireworks and Illustrator also allow you to slice images, too). But how does it work?

Well, you’d first design a page in Photoshop exactly as you want it to look when it goes live on the web. Then you cut out all the page components – title bars, buttons, navigation menus, and so on – using Photoshop’s Slice tool. Then, when you save everything out, Photoshop saves each slice as an individual graphic, and (and this is the icing on the cake for the code-leary) all the necessary code will automatically be written as well. Sounds awesome, huh?

Finally, once everything’s saved out, you can pull everything into Dreamweaver and finish off your layouts with any necessary tweaks. It’s a very cool process, and one of the most popular methods for building web pages.

The following sections describe how to take a created layout, slice it up in Photoshop, save it out, and then pull the whole thing into Dreamweaver to finish it off. Ready? Lets get started!

Part 1: Designing Your Page & Slicin’ it Up

So obviously, the first thing you’ll need to do is create a layout in Photoshop. In my example, I’m building an entire page, and because I don’t want any horizontal scrolling in my layout, I build for the most common monitor resolution, 1024×768. There’s quite a bit of debate as to how wide one can design inside a width of 1024 pixels, but I personally go with 990 pixels as my maximum width. This means that starting off in Photoshop, I create a new file with a canvas size of 990 pixels wide. As for the height, that’s usually determined by content, so you might want to give yourself lots of space to work inside.

Now in the case of creating a page object like a menu or header, you’d have to know the dimensions of the object before creating it in Photoshop.

Once your dimensions are set, it’s simply a matter of building your design. Design and lay out all your buttons, background graphics, logos, and so on, building up your page’s design. Use whatever tools, commands, and options you’d like. Often times, I’ll even cook things up in Illustrator, then drop them into my layered Photoshop layout as Smart Objects, just to make the process go faster.

If you’re building a page as I am here, don’t worry about actual page content – the text and other objects that would appear on the individual pages of your site. Imagine instead that you’re building a template. What you’re after is the overall look of all the pages in your site. Later on in Dreamweaver, you can drop in the content. Once your page design is complete, you’re ready to begin slicing it apart.

Image Slicing in Photoshop CS3 image 1

Slicing up your design is the fun part. What you’re doing is taking your overall layout and cutting it into smaller pieces. This means you’ll be isolating buttons, logos, and background areas on your page by slicing them away from the rest of the layout. There are a few different ways to slice apart layouts and page components, but I’ll show you my technique.

Here’s how to get started:
1. From Photoshop’s Toolbox, select the Slice tool.
2. With the Slice tool, click and drag a box all the way around your entire design.

This creates a single, large slice that encompasses your entire layout. I think you’ll find this to be the easiest and most accurate way to slice images.

Image Slicing in Photoshop CS3 image 2

3. Right-click (or Ctrl+click on the Mac) anywhere inside your design, and choose Divide Slice.

4. In the Divide Slice dialog that appears, decide how you’d like to break that single slice that you just drew. Turn on either Divide Horizontally Into or Divide Vertically Into (or both); then enter in the number of slices you’d like to create. Click OK when you’re ready.

This is where the craft of image slicing comes in. Look for natural breaks in your image. Remember, each slice will wind up being saved out as an individual graphic, so you may want to create slices for each button in a menu, for example. In my layout, I’ve divided the image into three slices horizontally: one for the header area, one for the main area, and a third for the lower, footer area.

If Preview is turned on in the Divide Slice dialog, you’ll be able to see where your slice lines will appear in the image. Don’t worry if they’re not exact, we’ll adjust them in the next step.

5. Next, if needed, adjust the slice lines that appear on your image simply by dragging on them. You may want to zoom in for a little more precision.

You’re now ready to continue slicing apart your layout. I find it easiest to work from the general to the specific – in other words, look for main areas to slice away; then start getting more refined as you go. Once you have the general areas of your layout sliced, you’re ready for the more detailed areas.

6. To continue slicing apart your image, single-click inside a “general area” slice; then right-click (or Ctrl+click on the Mac), and choose Divide Slice once again.

Notice that when you single-clicked inside the slice, all the other slices in the image deselected? Now this time, you’ll only be dividing up the currently selected slice.

7. In the Divide Slice dialog, set the number of slices you’d like to create horizontally and vertically, just you did earlier.

As before, look for natural breaks in your layout. Remember, each slice is saved as a separate graphic, so you might want to isolate buttons, logos, and so on. Don’t get frustrated if you have to start over a few times. Image slicing does takes a bit of patience. Knowing where and what to slice is just a matter of practice.

8. Continue slicing apart your layout using the techniques described until you’re happy with how things are looking.

Image Slicing in Photoshop CS3 image 3

Things lookin’ good? Great, now you’re ready for the fun part!

Part 2: Savin’ Er Out

Once you’ve sliced up your layout, you’re ready to save everything out of Photoshop. And remember, not only will Photoshop save all your sliced images in one shot (meaning that you don’t have to save each of them individually), but it’s also going to build your page’s underlying code structure for you. So when you save your slices, Photoshop will also save an additional HTML file. That’s the file that you’ll want to open in Dreamweaver. Awesome is an understatement here, folks – it doesn’t get much sweeter than this!

Here’s how to save it all out:
1. Choose File > Save For Web & Devices.
2. In the Save For Web & Devices dialog, set optimization settings for your slices.

If you’ve never used this dialog before, I’ll give you a quick run-through on how it works. Holding down Shift, you can select the slices that you’d like to set certain optimization settings for – that is, compression options when you’re saving an image (or in this case, a group of images) for use on the web. Next, on the right side of the panel, you can set your optimization settings.

Depending on the file format that you choose, different options will appear. For example, in the case of JPG, you’ll see options for compression, quality, blur, matte, and a few others. Unfortunately, we don’t have the space to go through all the options, so you may want to read up on a few of these.

Image Slicing in Photoshop CS3 image 4

3. Once you’ve optimized your slices, click Save.

4. In the Save Optimized As dialog, name your file in the Save As field; then navigate to the folder where you’d like to save your slices. Don’t click Save just yet.

The location where you save your work will most likely be your site’s local root folder, as you’ve defined it in Dreamweaver (You may need to read up on defining a site in Dreamweaver if you’re not sure what I’m referring to).

5. From the Format menu at the bottom of the dialog, choose HTML And Images.

This ensures that Photoshop will not only save out your slices, but also all the background code needed to render your layout.
If you’d like to explore some of the other options available, choose Other from the Settings menu. You may want to experiment with a few of the commands found here.

6. When you’re ready, click OK.

Photoshop saves out all your slices, and the HTML needed for your layout. Pretty easy stuff. Now lets go take a look at what happened.

7. Minimize Photoshop; then navigate to the folder where you saved your work.

Notice that Photoshop created an HTML file, as well as an images subfolder. Inside the subfolder, you’ll find all the individual slices from your layout.

8. To see your completed layout, open the HTML file in your web browser.

Your layout looks exactly as it did back in Photoshop. Cool!

Part 3: Throwin’ In Some Dreamweaver

Now that everything is saved out of Photoshop, Dreamweaver takes over the formatting duties. In Dreamweaver, try opening the HTML file that Photoshop created, and you’ll see right away that everything’s been created with tables. In Photoshop’s Save Settings (Step 5 in the previous section), you can set whether to use tables or div tags.

Notice too that all the slices sit within the table’s cells. You can drop additional page content on top of your images using a clever technique: Remove the slice from the table cell; then set the cell to the slice’s original dimensions; drop the slice into the cell’s background; and finally insert new text or image content into the cell. This creates the illusion of the content floating above the graphic, as you can see in the screen shot.

Image Slicing in Photoshop CS3 image 5

Now you can begin making any adjustments you’d like. For example, you could center the layout, add in a background color, create any necessary CSS rules, begin dropping in your content, and set your hyperlinks.

From here, it’s all tweaking – adjusting CSS styles, text, and other page elements within your design. If you want a graphic to appear behind the text in a table cell (which you can see was done in the sample page design, which uses a crater background behind the text), remove a graphic from its table cell and set it as the cell’s background image, just as you did earlier in this chapter. Then insert your text in the cell as you normally would.

As you work, don’t forget to preview your page to see how your design is looking. And here’s one more trick: With your page working well in Dreamweaver and previewing nicely in those target browsers, use it as the basis for the other pages in your site by resaving it under a different file name for each page. Even better, you can use your page as a Dreamweaver template.

So there it is, a quick guide to getting started with image slicing in Photoshop. Experiment and try out some of the different options, and most importantly, have lots of fun!

Advertisements

spam seo no follow nofollow

spam seo no follow nofollow

Discourage spammers by putting NoFollow attribute on links. Good reading. Good info on SEO

January 18, 2005

In the first cooperative move for nearly ten years, the major search engines have unveiled a new indexing command for web authors that they all recognize, one that they hope will help reduce the link and comment spam that plagues many web sites, especially those run by bloggers.

The new “nofollow” attribute that can be associated with links was originated as an idea by Google several weeks ago and pitched past MSN and Yahoo, as well as major blogging vendors, gaining support.

The Nofollow Attribute

The new attribute is called “nofollow” with rel=”nofollow” being the format inserted within an anchor tag. When added to any link, it will serve as a flag that the link has not been explicitly approved by the site owner.

For example, this is how the HTML markup for an ordinary link might look:

Visit My Page

This is how the link would look after the nofollow attribute has been added, with the attribute portion shown in bold

Visit My Page

This would also be acceptable, as order of elements within the anchor tag makes no difference:

Visit My Page

Once added, the search engines supporting the attribute will understand that the link has not been vetted in some way by the site owner. Think of it as a way to flag to them, “I didn’t post this link — someone else did.”

By the way, should you be one of the few using other types of rel attributes within your links (a way to show the relationship between your page and the page you’re linking to), Google advises that you should separate them with spaces.

For example, Google cited this page, which provides one example of multiple rel attributes in action, like this:

Jane

If you wanted to add nofollow to the existing one, you’d just put a space between it and the other attributes of sweetheart, date and met, like this:

Jane

Google also said upper or lower case is usage of the attribute is fine and that the creation of this new attribute is believed to meet W3C standards on markup, as they allow for anyone to create new attributes.

Causes Of Link Spam

Why would you want to use the attribute? Blog publishers, forum operators, sites with guest books and others who allow anyone to contribute in some way to their web sites have suffered when people have used these systems to spam them with links.

For search engine purposes, getting a link to your site from someone else’s site can serve as a “vote” that your site is seen as good. In Googlespeak, getting a link increases the PageRank value of your page — sometimes a tiny bit, sometimes much more.

In addition, getting a link may help better ensure that your page is indexed by the major search engines. Finally, getting a link with words you want to be found for embedded in the anchor text can help you not just be seen as popular but also help you rank better for particular words.

Here’s an example of comment spam in action. I did a Google search for texas holdem comment to find some candidates and focused on this page as an illustration. From PoliPundit.com, it’s a blog post from Nov. 2002 about a political development.

Below the post is the comment area. The area has been link spammed heavily — 30 entries containing links to web sites promoting casinos, poker, dating and other topics, like this (I’ve removed the links):

http://www.-texas-holdem-poker.us holdem poker texas holdem poker
Comment by texas holdem poker | Email | Homepage | 12/26/2004 – 12:31 pm

Your blogg is smashing! Payday Loans http://www.payday-express.com
Comment by Payday Loans | Email | Homepage | 1/15/2005 – 4:04 am

Your blogg is full o information. HGH http://www.hgh-express.com
Comment by HGH | Email | Homepage | 1/15/2005 – 12:40 pm

Great article and great website. I wish you could update if more frequently.
You?re also welcome to visit my websites: Checks, Cigarette, Dating, Honda,
Insurance, Las Vegas, Lawyers, Lexus, Online Poker, PDA, Toyota.

It’s not just a Google problem. Do a Yahoo search, an Ask Jeeves search, or a search at MSN Search. All bring up examples of pages that contain link spam, which have been indexed by these search engines. As a result, they also might find their ranking systems impacted by the activity.

Google, nevertheless, often gets the blame — which is why it was under the most pressure for coming up with something for the problem. The hope is that by allowing web authors to flag links in this manner, it will make blogs, forums, guest books and other places accepting contributions less attractive to spamming.

What Nofollow Means

Below I’ll cover what Google says it does, if it sees a link with the nofollow attributed associated with it. Yahoo and MSN are likely to react in a similar fashion, though I haven’t yet spoken with them to get exact details since news of their support only just emerged.

If Google sees nofollow as part of a link, it will:

1. NOT follow through to that page.
2. NOT count the link in calculating PageRank link popularity scores.
3. NOT count the anchor text in determining what terms the page being linked to is relevant for.

That’s the situation at the moment. Google is going to evaluate how the attribute works, and it could decide to make other changes down the line, it says.

Now let’s look at the impact of each action:

1) Not following the link to the page it points at means that potentially, Google might not index the page at all. As said, the more links that point at a particular page, the more likely it is that Google (and generally the other major search engines) will include that page within its index.

The nofollow attribute DOES NOT mean that someone will prevent a page they do not actually control from being indexed, however. If Google finds even one ordinary link pointing at a page, it may then index that page.

In addition, people can submit their pages directly to Google (and most major search engines). So it’s crucial to understand that just because someone might place nofollow in a link pointing at your site, this WILL NOT prevent your page from getting indexed.

2) As for PageRank calculations, it’s important to remember that PageRank is a pure popularity score (other search engines have similar scoring mechanisms, just not catchy names other than Yahoo’s Web Rank). The nofollow attribute means that a link will not be counted as a “vote” in this popularity contest. That can have an impact on ranking, in cases where the impact of other factors beyond pure popularity come into play.

Huh? Say there are two pages, one with a PR score of 6, the other a PR of 7. Even though the PR7 page is more popular from a link counting point of view, it could still get outranked by the PR6 page if other factors such as the words on the page, or the anchor text pointing at the PR6 page, make it more relevant for a particular search.

It’s also important to note that nofollow DOES NOT mean you are flagging a link as being bad in some way. Google isn’t going to say, “Aha — nofollow is on this link — that’s a bad link.” Or as Matt Cutts, a Google software engineer who helped develop the attribute, said:

“It doesn’t mean that it is a bad link, or that you that you hate it, just that this link doesn’t belong to me.”

Instead, nofollow effectively will cause Google to ignore the link, to pretend it doesn’t exist. This also means you shouldn’t worry that people will link to you and use nofollow as a way to hurt you — Google says that won’t happen.

3) This leads to anchor text. Generally much more important in ranking well for a particular term is to get the words you want to rank well for put into a link that points at you. With nofollow added to a link, Google won’t associate the anchor text in the link with the page the link is pointed at. This, more than anything else, will sour things for link spammers.

Stop Spam? No. A Start, Yes!

The new attribute won’t stop link spamming. Many people may still spam simply because they hope human beings will see the links, click through and perhaps convert. As with email spam, maybe only an incredibly tiny number will do so. But since there’s no heavy cost to the spamming, that might still be enough.

In particular, much blog spamming is done through automation. So even with the new system in place, some of that automation will keep rolling along. It will no doubt even evolve to spot blogs and other areas that aren’t making use of the nofollow attributes, just as smart spammers currently focus on blogs that have been abandoned, rather than irritating active bloggers.

This means other types of systems of blocking spam will likely still have to be used, such as forcing people to input characters from graphics (captchas), registration and so on (The Solution To Blog Spamming at ThreadWatch has a nice rundown on these, and also see Six Apart’s Guide to Comment Spam).

While link or comment spamming isn’t going away, it’s still heartening that it will be less attractive. Site owners have been given an important new tool that lets them control indexing — something they’ve not had offered for years. Perfect or not, I’m glad it’s emerged.

Vendor Support

Google started developing the idea of a nofollow attribute several weeks ago and quietly shared it with a number of the major blogging vendors. Many of them have now signed on, pledging to support and implement the tag in the future, if they’ve not already done so now.

As a result, those using systems provided by one of the major vendors such as Blogger or Movable Type (see here for support news) should find that implementing the tags to be associated in links in comments is a matter of flipping a switch. OK, maybe clicking a radio button or drop-down box! Google provides a list of those supporting it here.

Google said it will soon begin talking with other companies, such as those that making forum software. But makers of these packages or any packages could implement support when they are ready.

Uses For The Attribute

The tag can be used by anyone anywhere, of course. It’s not just for use with blog comment areas or forum posts. For example, Cutts said people might use it if they publish dynamically generated referrer stats and visitor information.

“Wherever it means that another person placed a link on your site, that would be appropriate,” Cutts said.

Because of this, some page authoring tools will likely add support in the future, if it is widely adopted as will likely be the case. Some tools may allow adding it right now — and those who know HTML code can do an easy insertion.

That might be handy if you need to link to a site but are worried that a search engine might consider it a “bad neighborhood,” as they’ve often described them. In reality, the chances are very small that the typical person might link to a site that would actually hurt them with a search engine. But if in double, nofollow could offer peace of mind.

Of course, those who are swapping links with other sites now have a whole new thing to look out for. If someone offers to link to you, you’ll want to make sure they don’t make use of the nofollow tag — at least if you were hoping for some search engine gain. Otherwise, the link’s not going to count.

Don’t forget — there are other good reasons to still get links even beyond search engines, of course. My Golden Rules Of Link Building article covers this more.

You definitely DO NOT want to use the attribute on links to your own pages. Do that, and you’ll deprive your own pages from the chance of influencing how your other pages rank.

Having said this, I’ve no doubt some people will try playing with the new tag as a means to “hoard” PageRank that’s passed on to only a few pages in your site. For example, your home page might link to 25 of your internal pages. Using the new attribute, you could exclude all but five of these pages. Do that, and you might possibly cause Google to give those five pages more credit (see the Link Building & Link Analysis article for Search Engine Watch members for more about this).

Maybe. Perhaps. And perhaps the search engines may make other changes down the line. Rather than get tricky with this tag, I’d recommend using it as intended for now — as a means to flag that there are certain links on your web site that you didn’t place there.

Support From Other Search Engines

How about the other search engines? MSN and Yahoo are onboard. In fact, Yahoo beat Google out of the gate in blogging its support of the new tag first. A Defense Against Comment Spam offers a few details, an example and news that the change will be implemented in the coming weeks.

As for MSN, Working Together Against Blog Spam explains how the company made a snap decision today to support the tag, though the idea was something it had considered during its Search Champs meetings with bloggers and search marketers several months ago. It promises that its crawler will begin respecting the attribute in the coming weeks.

Google, of course, has been onboard from the start. It provides more details on its blog in Preventing comment spam.

So how about Ask Jeeves, the remaining major crawler? They’re still looking at the new option and weighing it up.

“We’ll consider it for the future, but because we use local [link] popularity and not global popularity, we are not going to rush into anything today. It has more impact for Google and Yahoo because of their similar methodologies. The upside for us is much more modest,” Lanzone said.

By local popularity, Ask Jeeves is referring to how its Teoma search engine will calculate the popularity of pages and do ranking only after culling a subset of pages deemed relevant, rather than looking at all links from across the entire web. My Make Room For Teoma article explains this more.

More Info

Google To Add “Nofollow” Tagging Of Links To Fight Spam? is where I explain more about how the news of the new attribute emerged, plus provides some background on the difference between it and the nofollow attribute of the meta robots tag.

Comment Spam? How About An Ignore Tag? How About An Indexing Summit! is my post wishing for an “ignore” tag similar to what’s emerged here and how others have been wishing for this even longer.

It also looks at how it has been literally years since we’ve had an advancement in the type of indexing control given to site owners. This new attribute — whether you love the idea or hate it — is welcome move for at least giving site owners themselves some choice in the matter.

The New Nofollow Link Attribute is a thread in our forums where you can discuss the new attribute.

Source: blog.searchenginewatch.com
Source of image: 2.bp.blogspot.com