シェアする
Canvas Size and Image Resolution - Images: Japanese
Hey there, everyone!
Next up, let's go over 'Canvas Size' and 'Image Size'.
Let's start with Canvas Size. The 'canvas' in Photoshop refers to your working area. If you want to keep the image size the same but expand the working area around it, you'd adjust the 'Canvas Size'.
Open any image in Photoshop. Any image will do. Then go to 'Image' in the menu bar at the top and click 'Canvas Size'. A dialog like this should appear:
This is where you adjust the canvas size. Try adding 100px to both the width and height. You should see something like this:
The working area has expanded. That's canvas size adjustment in action. If the background was set to 'Transparent', the expanded area will be transparent; if a background color was specified, that color will fill the added space.
Inside the Canvas Size dialog, there's a 'Relative' checkbox. Enabling it lets you enter the amount you want to add rather than the total size. For example, if you want to add 100px to each side, just enter 100px for both width and height — Photoshop will then add 50px to each of the four sides.
Below that is the 'Anchor' setting, which lets you choose the reference point for the expansion. The previous example expanded from the center, but if you set the anchor to the top center, the expansion looks like this:
Use the 'Anchor' option whenever you want to control which direction the canvas expands. Also, when you use 'Save for Web', the entire canvas area is included in the output, so keep that in mind.
For example, if you have a 100x100px image and expand the canvas by 100px from the center, then export with 'Save for Web', the output will be a 200x200px image. Good to know.
Now let's move on to 'Image Size'. This lets you change the overall dimensions of the open image. One thing to note: changing Image Size resizes everything — both the canvas and any layers inside it.
Open any image again, then go to 'Image' in the menu bar and select 'Image Size'. This dialog will appear:
Here you can adjust the image dimensions. The options are fairly straightforward. While you can use any unit, set it to 'pixels' for web work. The 'Fit To' dropdown offers preset sizes like 'A4' or 'Letter'.
To enter custom values, just type them into the 'Width' and 'Height' fields. To resize while ignoring the original aspect ratio, click the chain icon to unlink the dimensions — then you can set each independently.
For web assets, leave the 'Resolution' value alone. In the web world, resolution is treated as a constant, so when 'Resample' is unchecked and you change the resolution with pixel-based units, the image size gets pulled along with it.
As for the 'Resample' setting — the dropdown next to it controls the resampling algorithm. The default is 'Automatic', which is generally fine to leave as-is.
When Photoshop enlarges an image, it fills in the added pixels using approximate surrounding colors — and the algorithm it uses to do this can be chosen here. In older versions, this was the 'Bicubic' method. Recent versions of Photoshop have added a newer option called 'Preserve Details (Enlargement)', which does a good job of scaling up while retaining the original texture and look. If you want to move away from 'Automatic', this is worth trying.
As for the 'Resample' checkbox itself, leave it checked. It mainly becomes relevant in print scenarios where you want to change the resolution without changing the pixel count.
To briefly explain: if you uncheck 'Resample' and double the resolution, nothing changes on screen — but when printed, the image comes out at half the size. This happens because the pixel density per inch doubles while the actual pixel count stays the same, which means the physical print size shrinks. Since resolution has no bearing on web assets, keep 'Resample' checked.
So to wrap up: 'Canvas Size' expands (or contracts) the working area without changing the size of existing layers. 'Image Size' resizes everything — canvas and layers together. Make sure you don't mix those two up.
In the next article, we'll look at zooming and scrolling the canvas. See you then!
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
