Select clone stamp tool. Press Alt and click on white area to define the source pixels. Now click on edge of bread and start cloning the area as shown using soft brush settings.
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. But how does it work? Well, that's what this video series is all about!
Site contents � Ten Ton Books. A Holowan Intergalaktik company. All rights reserved. No portion of this site or its contents may be reproduced without permission. Having trouble? Report a site problem Contact Ten Ton Books
The back panel could use a little quick love, let's inset some other materials there just behind the gear. Start by selecting our "background" layer. Get the Rounded Rectangle Tool, set the radius to about 12px. The color I'm using is a yucky-green #847842 with a Fill opacity of 40% (we'll actually want a bit of the underlying color/texture to seep through).
1. Open up your content box or layout that you will be slicing for this tutorial in Adobe Image Ready. For people taking this tutorial who have not made a content box to slice yet, try out our rounded content box tutorial here.
Now go to the ImageReady toolbox and click the 'Slice Tool' (See Figure Right). Now make a selection on each part that you want to have a link to. I made a total of 7 slices (1 for each navigation options and 1 for the banner). When slicing, make sure each selection is a not touching another, because that can cause bad linking. Once you're done slicing you should have something looking this my image (See Figure Below).
1. Ok, often a problem when designing a layout for beginners is deciding how big they want the site to be. One of the main objectives when designing a site is to build it for a targeted group of people. For example, if you are targeting an older group of people, or lots of different types of people, you want to think about how large their resolution is. Assuming that some keep their resolution at 800x600, others at 1024x768, and a smaller amount at 1280x1024, you would want the site to be able to fit all of those resolutions, so you would go for the smallest one. Sometimes, you may be designing a site for a group of people like graphic designers, who tend to keep their resolutions anywhere from 1024x768 and up, in this case you may want to build the site to these standards so you have more room, and higher quality graphics. You get the picture... In this tutorial, we are going to make a site that will work with any of the usual resolutions (so that means that we will make a site that easily fits 800x600 resolutions and up). So let's begin! Make a new document in Photoshop 700x600. Fill it with a light grey background:
1. First of all, you will need to find the image or layout that you would like to slice. I'm going to use one from the Professional Web Host Layout tutorial.
First, we know, that we want to keep "Menu" text Anti Aliased. That means, that the text will be a graphic. Top rounded corner will stay too. We take first separator line too. That will be our first slice (1).
Once you've done this, click save and it will ask you to chose a folder, name the file index.html and save it. That's all for slicing, it's pretty easy really. Now all we need to do is actually code the layout. If you click on your index.html it should load your sliced images up. Those who already know how to code layouts can now go on and make their website. Those who don't know how to code their websites should read my next tutorial, coding your website.
Now go to File -> Save For Web... First, we can click right mouse button and select "Hide Auto Slices" ... this will make our image easier to "read". Now we can name our slices and select format/compression. First Top part (1 on last picture). Click on it Twice and name it as You want.I will name it menu_1. Next from right menu select GIF, because it seems that this format is best (less size). Next body strip (2). Zoom on it using Zoom Tool (Z), click twice, give a name (for me menu_2), and select format. Again GIF will be the best one. Now the separator 1 px x 2px rectangle (3). Zoom on it , click twice, give a name (menu_3) and select format. This time GIF wins too. Zoom out if You want and click twice on bottom part (4). Give a name (menu_4), and select format... again GIF is the smallest one. The last thing is hoover gradient strip (5). Zoom in, click twice, name it (menu_5), and select format. This time JPG seems to be a better choice (Quality around 60). Now hit Save. Than from settings set Slices: to All user slices, and Images Only. Now You have 5 images
Select clone stamp tool. Press Alt and click on white area to define the source pixels. Now click on edge of bread and start cloning the area as shown using soft brush settings.
On the slice panel window, name your images for what they represent. The Banner should have the name banner, home should be named home, etc. On the slice panel window, set the URL for any images you will want linked. Make all the following slices and links
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!
1. I have already covered how to create rollovers in ImageReady 7, however creating rollovers in ImageReady CS is a bit different. To begin, start by opening up any image that you would like to apply a rollover state to. I'm using a photograph I took while on vacation this past summer in the Bahamas.
Photoshop will save each of the slices in this image as a separate GIF or JPEG, along with an HTML file containing a table to reassemble all the individual images as your navigation bar. Choose HTML and Images from the Save as Type menu to generate the HTML file. (If you choose Images, Photoshop will save only individual GIFs and JPEGs, which you could take into a site-building program for assembly there.) Leave the Slices menu set to its default-All Slices, choose a destination, and click Save. On your hard drive, there will now be an HTML file and an Images folder containing all your GIFs and JPEGs. Don't separate the HTML file and the Images folder or the links to the images will break. Open the HTML file in a Web browser to see the results of your hard work. Each slice has become a separate image in a cell of an HTML table that holds all the images in place.
Copyright � 1999-2009 CBT Cafe, All rights reserved Flash�, Fireworks�, and Dreamweaver� are registered trademarks of Macromedia, Inc. in the United States and/or other countries Photoshop�, Photoshop Elements� and Illustrator� are registered trademarks of Adobe Systems, Inc. QuickTime� is a registered trademark of Apple Computer, Inc. Ebay� is a registered trademark
Google recently released a great new tool for webmasters. Google Ad Manager is a hosted ad management solution that can help you sell, schedule, deliver, and measure all of your directly-sold and network-based inventory. Learn more - Devember 31, 2008
Now that I have my design ready it's time to slice it up. Open Image Ready. Because I have set up my guidelines exactly the way I want to slice the design I can go to the menu option "Slices" and choose "Create Slices From Guides". I deleted a few slices that were not needed and I'm left with the following:
1. First of all, you will need to find the image or layout that you would like to slice. I'm going to use one from the Professional Web Host Layout tutorial.
Select clone stamp tool. Press Alt and click on white area to define the source pixels. Now click on edge of bread and start cloning the area as shown using soft brush settings.
The back panel could use a little quick love, let's inset some other materials there just behind the gear. Start by selecting our "background" layer. Get the Rounded Rectangle Tool, set the radius to about 12px. The color I'm using is a yucky-green #847842 with a Fill opacity of 40% (we'll actually want a bit of the underlying color/texture to seep through).
On the slice panel window, name your images for what they represent. The Banner should have the name banner, home should be named home, etc. On the slice panel window, set the URL for any images you will want linked. Make all the following slices and links
Photoshop will save each of the slices in this image as a separate GIF or JPEG, along with an HTML file containing a table to reassemble all the individual images as your navigation bar. Choose HTML and Images from the Save as Type menu to generate the HTML file. (If you choose Images, Photoshop will save only individual GIFs and JPEGs, which you could take into a site-building program for assembly there.) Leave the Slices menu set to its default-All Slices, choose a destination, and click Save. On your hard drive, there will now be an HTML file and an Images folder containing all your GIFs and JPEGs. Don't separate the HTML file and the Images folder or the links to the images will break. Open the HTML file in a Web browser to see the results of your hard work. Each slice has become a separate image in a cell of an HTML table that holds all the images in place.
Copyright � 1999-2009 CBT Cafe, All rights reserved Flash�, Fireworks�, and Dreamweaver� are registered trademarks of Macromedia, Inc. in the United States and/or other countries Photoshop�, Photoshop Elements� and Illustrator� are registered trademarks of Adobe Systems, Inc. QuickTime� is a registered trademark of Apple Computer, Inc. Ebay� is a registered trademark
Google recently released a great new tool for webmasters. Google Ad Manager is a hosted ad management solution that can help you sell, schedule, deliver, and measure all of your directly-sold and network-based inventory. Learn more - Devember 31, 2008
Now that I have my design ready it's time to slice it up. Open Image Ready. Because I have set up my guidelines exactly the way I want to slice the design I can go to the menu option "Slices" and choose "Create Slices From Guides". I deleted a few slices that were not needed and I'm left with the following:
Copyright DesignTutorials.info 2005 | Contact | Privacy Policy
1. First of all, you will need to find the image or layout that you would like to slice. I'm going to use one from the Professional Web Host Layout tutorial.