Preview a Browser Tile in Photoshop

When you create your own background tiles in Photoshop, it's nice to be able to preview how they'll display when tiled by the browser in a web page. Luckily, you can do so by saving it as a pattern in Photoshop.

TRY IT To preview a browser tile in Photoshop, follow these steps:

1. Launch Photoshop and use the File | Open command to open your background tile if it isn't already open.

2. Choose Edit | Define Pattern and give your pattern a name before clicking OK.

3. Switch over to your web page mockup file, or choose File | New to create one. (If you create a new file, remember to use the available screen size of your target audience, or if you're using the file purely for testing purposes, try making a file 750x500 pixels in size.)

4. In the mockup file, choose Edit I Fill. Select Pattern from the pop-up menu next to Use and choose the pattern you just defined by clicking in the box next to Custom Pattern, as shown here:

Understanding Adobe Photoshop Features You Will Use

Understanding Adobe Photoshop Features You Will Use

Adobe Photoshop can be a complex tool only because you can do so much with it, however for in this video series, we're going to keep it as simple as possible. In fact, in this video you'll see an overview of the few tools and Adobe Photoshop features we will use. When you see this video, you'll see how you can do so much with so few features, but you'll learn how to use them in depth in the future videos.

Get My Free Video

Post a comment