Once the seam is hidden, this will insure the graphic will tile horizontally. To test this, let’s save a web optimized version of this graphic using the Save for Web feature in Photoshop. Save the graphic to the images folder inside of the ‘web pages’ folder within the exercise files. Then, load the page named one_axis.html in a browser. As you resize the width of the browser, you’ll see the seamless tiling image in the header area of the HTML page.
- View Offline
- [Voiceover] So, once you have…your scene completely hidden,…let's make sure and save our Photoshop file.…Let's just go to the File menu.…Let's come down and choose Export…and then Save for Web.…Now, inside of this dialog box here,…let's come up and make sure the file format…is set to JPEG.…We can set the quality to 40%.…Down here in the left-hand side,…this will give us a file size of about 98K.…And then let's come over here and hit Save.…Now in the Save Optimized As dialog box,…let's come up and make sure we select the Exercise Files.…
Let's choose web pages, choose the Images directory,…and we're gonna keep the file name garden_light_tile.jpg…and then hit Save.…And now if we go back to the Exercise Files,…we'll see the garden_light_tile.jpg in the images directory…and then if we come down here and open the one_axis.html…file up in a browser,…we'll now see that that html file…was looking for this file name to put that…graphic in the header area of the html page.…And now, to see the seamless nature of this graphic,…
The exercise files included with this course are free to all members. Download them and get started building your own custom backdrops today.