シェアする
Creating a New File - Images: Japanese
Hey everyone!
Next, let's try creating a new file.
Open Photoshop, then look for 'File' in the menu bar at the top. Click 'New' inside it — that'll bring up the new file creation screen.
If you'd rather use a keyboard shortcut: Windows users press 'Ctrl' + 'N', macOS users press 'command' + 'N' to open the new file dialog.
Let's go through the options here. There are quite a few fields with technical-sounding names, but we'll work through them together.
First, there's 'Name' — this is simply the name you want to give the new file. Feel free to name it whatever you like.
Then there's 'Document Type' and 'Size'. These let you choose a predefined size, like 'A4', and Photoshop will automatically set the image size and resolution for you.
For example, if you want to create an A4 document, set 'Document Type' to 'Japan Standard Paper Size' and 'Size' to 'A4', and Photoshop will handle the rest. For web work, the most common options you'll use are 'Custom' and 'Clipboard'. 'Custom' lets you manually set the width, height, resolution, and canvas color. 'Clipboard' automatically reads the dimensions of any image you've copied to your clipboard and sets the new file to match — incredibly handy.
Next are 'Width' and 'Height'. Set these to whatever size you need, but when creating web assets, make sure to change the unit to 'pixels' first.
After that comes 'Resolution'. What's resolution, you ask? Resolution is a number that expresses the density of pixels — typically, it means "how many pixels fit inside one inch". This gets a bit confusing because there are multiple units involved: 'dpi' is common, and 'ppi' has become more widely used in recent years. In Photoshop, the unit is displayed as 'pixels/inch'.
Since 'pixel' refers to the number of colored dots, the actual physical size of '1px' varies depending on the display. For example, a standard 27-inch Full HD PC monitor has a resolution of about '82ppi', while an iPhone 6 has a significantly higher '326ppi'. Think of it like asking "how many light bulbs fit inside one inch?" — the higher the resolution, the better the image quality.
Here's the important part: when creating web assets in Photoshop, you can just fix the resolution at '72' and not worry about it. Honestly, for web work, the resolution setting doesn't really matter much. That's because web assets are viewed through a display, so the effective resolution is determined by the display's own specifications. HTML and CSS don't use the concept of 'resolution' at all — everything is measured purely in 'pixels'.
For example, the technique used to handle high-resolution displays (like Retina or IGZO screens) is to create a larger image and then scale it down using CSS — and that scaling is done entirely in 'pixels', with no reference to 'resolution' as a concept at all. So for web assets, don't worry about resolution. When exporting JPEG, PNG, or GIF files as web assets, just focus on the pixel dimensions.
Resolution becomes relevant for print. If you go below '300dpi', the image can look a bit blurry when printed, so for print assets you'll want to set a value of '300' or higher. Modern home printers can easily handle output at 300dpi and above, so if you have one handy, it might be worth printing some test images at different resolutions to get a feel for what the numbers actually mean.
Next is 'Color Mode'. For web assets, 'RGB Color' at '8 bit' is all you need. For print assets, choose 'CMYK Color' — '8 bit' is fine there too.
'RGB' is for displays, and 'CMYK' is for print. The reason you need different modes comes down to the fundamental difference in how color is produced: displays emit light to create color, while printed materials absorb or reflect light. 'RGB' is based on the three primary colors of light — red, green, and blue — while 'CMYK' is based on the three primary pigment colors — cyan, magenta, and yellow — plus black. An important thing to note: the range of colors that 'RGB' and 'CMYK' can reproduce is quite different, and creating print assets in 'RGB' can lead to some seriously unexpected results, so make sure you get this initial setting right.
As for '8 bit' vs '16 bit' — the difference is how finely you can control colors. The human eye is generally considered unable to distinguish color differences beyond '8 bit', so you're unlikely to run into any "not enough colors" issues at 8 bit. That said, for extremely detailed retouching work, '16 bit' gives you finer color control, so it's worth knowing about for those situations.
Next is 'Canvas Color'. This sets the background color of the canvas — your working area in Photoshop. Setting it to 'White' gives you a white background to start with, while 'Transparent' starts you off with no background at all. Personally, when creating web assets, I find a background tends to get in the way, so I often start with 'Transparent'. Use whichever suits what you're making.
Next is 'Color Profile'. This lets you set the color space standard. For web assets (RGB), choosing 'sRGB IEC61966-2.1' — an internationally recognized standard set by the IEC — is generally fine.
For print work in 'CMYK', 'Japan Color 2001 Coated' is the typical choice — it should be the default when CMYK is selected. This setting is mainly something you'd change if you notice color discrepancies when printing, so you won't need to touch it often. If you're ever sending files to a print shop, just ask them "what color profile should I use in Photoshop?" and they'll point you in the right direction.
Finally, there's 'Pixel Aspect Ratio'. If you're creating web assets from scratch, 'Square Pixels' is almost always the right choice. However, if you're working with captures from video footage, watch out — video assets often use non-square pixels, and if an image looks distorted after importing, this is the setting to adjust. That should fix it.
That's the full walkthrough of all the settings. To summarize: the settings shown in the image above will cover most situations without issue. Here's that image again for reference:
In the next article, we'll try importing an image into Photoshop. See you there!
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.
