This is important to keep an eye on because larger file sizes will make your web page load more slowly. On the left-hand side of the image you'll see the file size predicted for your PNG file. Do not check Smaller File (8-bit) - this converts the file to a PNG-8 In the dialog box that appears, under File Settings on the right-hand side of the box, set the Format to PNG, and make sure the Transparency box is checked. option, you can choose Save for Web and select PNG-24 from the Preset dropdown menu on the right-hand side of the dialog box. Note: If you're using an older version of Photoshop, and you don't see the Export As. To save your file as a PNG-24 in Photoshop CC, type SHIFT+ALT+CTRL+W (SHIFT+OPTION+COMMAND+W on a Mac) or choose File > Export > Export As… from the dropdown menu at the top of the application window. Older transparent file formats such as PNG-8 and GIF can create this undesirable halo effect, so whenever possible, use a PNG-24. This format allows for multiple layers of transparency, meaning your image will never have a pixelated "halo" when placed on a different color background. The best format to save your image in is as a PNG-24. Step 4: Save your image in the proper web-ready formatĬreating a transparent background in Photoshop is just the first step you need to make sure you save your product image in the correct format in order for it to display with a transparent background on your ecommerce website. Type CTRL+D (COMMAND+D on a Mac) to deselect your selection. In Photoshop, a transparent background is represented with a gray and white checkerboard pattern. With your inverse (background) selected, type BACKSPACE (DELETE on a Mac). Once you have just your product selected, select the inverse by typing SHIFT+CTRL+I (SHIFT+COMMAND+I on a Mac), or by choosing Select > Inverse from the dropdown menu at the top of the application window. When you create your selection, make sure you also select any areas where there are "holes" in your product image, as in the area where the watch face meets the wristband in the example image. In this example, Photoshop didn't completely remove the watch's shadow from the selection, so we'll choose the Subtract from selection icon in the Options bar, and then click on portions of the shadow with the Magic Wand tool until the selection only contains the watch. If the selection isn't perfect, you can use the Magic Wand tool to remove more of the background from the selection, or add more of the product to the selection, depending on how the selection. You will see the selection as "marching ants" surrounding the selection. Photoshop will attempt to select the object from your photograph, regardless of the background. Then, click on Select Subject from the Options bar at the top of the screen. Select the Magic Wand tool from the Toolbar on the left-hand side of the application window. You've now unlocked your background layer, and anything you delete from it will be transparent. You can leave this as the default Layer 0, and click OK. A New Layer dialog box asking you to rename the layer will appear. In the Layers panel, double-click on the Background layer.
By default, this panel rests to the right of your image window, but if you don't see it you can access it by clicking on Window > Layers from the dropdown menu at the top of the application window. For this example, we'll use an image of a wristwatch taken against a white background. Step 1: Make your image into a layered file Save your image in the proper web-ready format.
#HOW TO MAKE A GIF BACKGROUND FOR STREAM WITHOUT PHOTOSHOP HOW TO#
How to create a transparent background for a product image in Photoshop We'll walk you through this simple process in the tutorial below. Using Photoshop to create a transparent background, and then saving the file in the appropriate web-ready format, is remarkably easy once you know what you're doing. Your website's logo files should also be created with transparent backgrounds so that you can place the logo anywhere on your site, regardless of the page's background color. On responsively designed sites, a featured product with a transparent background can interact differently with its background depending on the user's screen size. For example, a transparent background gives you the ability to place your product against a background that dynamically changes colors.
Creating a transparent background for your product image in Photoshop opens up a wide range of eye-catching display options for your featured products.
0 kommentar(er)
