In this tutorial, I will teach you how to work digitally on an image you draw by hand. You will learn two completely different ways to approach the image: through the Live Trace Tool and the Pen Tool. Two ways, two results. Learn how to take the best from both.
Along the way, I will give you some Photoshop tips, too. The first thing you’ll need to know is how to manage your drawing in Photoshop and which are the best ways to prepare it for Illustrator. If you are not comfortable drawing in Photoshop, don’t worry! You can download my drawing in high-resolution, skip the Photoshop step and go straight to step 2 to begin with Illustrator.
Looking to improve your Photoshop skills before saying good bye to 2015? Or perhaps you are looking for Photoshop tutorials you can follow during the holiday break? Look no further because I’ve gathered 50 of the best Photoshop tutorials that will teach you how to manipulate images to create surreal images, improve portraits, or transform your photos into something peculiar! On to the list!
The celebrities you see sprawled across the pages of glamorous magazines and on tabloid papers give us unrealistic expectations of how the body of a woman or man should look like. The pictures of course have a secret ingredient: Photoshop.
The problem is sometimes Photoshop sucks the reality out of a shoot, and you get misplaced limbs, elongated necks, minute waists, and sometimes "warped space" around the subject.
Here are 72 of the worst Photoshop mistakes ever found on magazines and advertisements and posters. For more Photoshop mistakes, check out:
In this tutorial, we’ll be using Adobe Photoshop to create an abstract "Flying Car Illustation". This is what we will be creating with this Photoshop tutorial.
We’ll start with a selection exercise with the old car, then we’ll add flying rocks with tower and wires. Then, we will add in three birds, including one that is in mid-motion. We will also be utilizing some free 3D render and fractal packs to enhance the abstract aspect of the illustration. It’s going to be a fun exercise – all 75 steps of it!
Inside Photoshop, open the old car photo. Check that the Contiguous option is ticked. Click on the white background using the Magic Wand tool to select the background.
You will notice that in some areas the selection edge is leaking because of the color range’s similarity. We need to use the Quick Mask Mode to smooth out these selection edges.
Change to Quick Mask mode by clicking the button in the toolbar. The unselected areas are now shown in transparent red.
To fix this selection manually, we will draw the selection path using the Pen tool. Set Pen mode to Path, then start adding selection points covering the car’s roof.
Add another selection paths covering the car’s emblem.
Next, add selection paths covering the right headlight and its surroundings.
Right click on one of the paths and select Make Selection from the pop-up menu.
Click OK when the Make Selection dialog appears. This will convert our paths into selection marquee.
Fill selected areas with Black. Do this by going to Edit> Fill menu, select Use: Black. Click OK.
Press Ctrl+D to deselect. Go back to Standard Mode in the toolbar.
Go to Selection> Inverse menu to invert selection area or use the Shift+Ctrl+I. Now the car is selected, press Ctrl+C to copy it.
Press Ctrl+N to create new file, set the Width: 1600 pixels and Height: 1142 pixels. Click OK.
Press Ctrl+V to paste the old car we copied previously. Use the free transform command to adjust the car size and position.
Step 13: Adding the Background
Open sky photo. Copy and paste it into our document. Place sky layer below car layer.
Fill the background layer with blue(#15487d).
Add a layer mask for the sky layer. Use the linear gradient tool to draw a diagonal gradient (black to white) from bottom left to top right.
Add a new layer. Use the linear gradient tool to draw a linear gradient diagonally similar to the previous step.
Change the current layer blend mode to Soft Light. This will darken the color of the sky a bit.
Add one more new layer, fill it with a linear gradient diagonally like the previous step but this time, make the black colored portion bigger.
Set the current layer blend mode to Screen. The sky’s top right corner is now brighter.
Go back to the car layer to remove unecessary objects below the old car. First, select it using the Polygonal Lasso tool, press Delete to clear the selected area. Press Ctrl+D to deselect.
Press Ctrl+J to duplicate the car layer. Go to Filter> Other> High Pass. Set the Radius value around 1.0 Pixels. Click OK.
Change the current layer blend mode to Overlay. This will increase the car detail and make it look sharper.
Within the Layer panel, right click the current layer and select Merge Down. This will merge both car and car copy layer.
Press Ctrl+M to call the Curves command. Select Preset: Strong Contrast, click OK to apply.
Go to Image > Adjustment > Vibrance. Increase Vibrance value to +100 and Saturation: +10. Click OK to apply Vibrance command. The Car now looks more colorful and shiny.
Step 26: Adding the Flying Rocks
Open the cliff image; we’re going to use it as our flying rock island. First, select the area you want with the Polygonal Lasso tool. Press Ctrl+C to copy the selected area.
Go back to our document, press Ctrl+V to paste. Make the rock smaller, press Ctrl+T to resize, and move its position to the car’s left side. Hit Enter.
Make the bottom side of the rock smaller. Do this by drawing a selection with the Polygonal Lasso tool, then press Delete to erase. Deselect with Ctrl+D.
Create a new selection on the bottom left area with the Polygonal Lasso tool. Simply drag the selected area with the Move tool to move it.
Next, we want to make the rock look 3D. Use the Burn tool to darken the rock’s edge.
Then, use the Dodge tool to brighten the rock’s top edge.
Grab the Sponge tool, set the mode to Saturate. Use the sponge tool to saturate the rock’s color.
Go back to the Burn tool, but this time turn off the Protect Tones option. Use the Burn tool to darken the rock’s edges once more until they turn black.
Step 34: Adding the Tower
Open the tower picture. Go to Select> Color Range menu. Click on any part of the tower to sample its color. Increase the Fuzziness value until the overall tower shape is selected. Click OK to apply selection. Copy selected tower with Ctrl+C.
Paste the tower by pressing Ctrl+V. Place the tower layer behind the flying rock layer. Press Ctrl+T for free transform and make the tower smaller, so it can ‘stand’ on top of the flying rock.
Delete the unecessary tower cable wires using the hard round Eraser tool. Change tower layer blend mode to Multiply. We have ourselves our first flying rock.
Now we need another flying rock with its own tower on the bright side (right side) of the car. You can repeat steps 26 to 36 to add the second flying rock and tower to the right side of the document or you can duplicate both the flying rock and tower layers by selecting the layers and pressing Ctrl+J.
Make the second rock-tower smaller, and move it to the right.
Step 38: Drawing the Cables
Add a new layer, name it ‘cables’. Set the foreground color to Black, and then press F5 to show the Brush Panel. Set the brush Size: 1 px, Hardness 100% and Spacing: 1%. We will use this brush to draw new cable wires between the two towers.
Shift to the Pen tool, set the Pen mode to path, then draw a curve path connecting both left and right towers.
Right click the path using the Pen tool, select Stroke Path menu. Inside Stroke Path dialog, select Tool: Brush and click OK. This step will let Photoshop draw a curve line with the brush tool automatically, following the path we have created.
Deselect the path, open the Paths panel and click on the panel’s blank area or simply hit Esc on the keyboard.
Repeat steps 39 to 41 to add more wires (see below).
Step 43: Adding the birds
Within the layer panel, rearrange the car layer to the top.
Go to File> Place menu, search and import the grunge texture. Adjust its size to cover the background, and then move its layer below the car layer.
Set the grunge layer blend mode to Soft Light. Right click on the grunge layer, select Rasterize menu to change it from smart object into regular image layer. Now we can go to Image> Adjustment> Desaturate menu or simply press Shift+Ctrl+U.
Open the eagle image. Select the background with the Magic Wand tool.
Invert selection by using Select> Inverse. Decrease selection areas by using Select> Modify> Contract. Within the Contract Selection dialog, set Contract By: 2 pixels and click OK to apply.
Copy and Paste the selected eagle, adjust its size and place it under the car.
Open the dove image. Repeat the same process to select the dove. Place the bird on the car’s right side.
Open the second dove image. Repeat the same process and insert it to the left side of the car.
Go to Filter> Blur> Motion Blur. Set the Angle: 10 and Distance: 10 pixels. Click OK to apply.
Step 52: Creating Movement
We’re going to add an illusion to this fast-flying dove. Add a new layer above the second dove layer. With the Polygonal Lasso tool, draw the selection as you see in the image below. Fill the selection areas with white. Press Ctrl+D to deselect.
On the same layer, go to Filter> Liquify menu, use sky layer as the backdrop and use the Forward Warp tool to warp and liquify the abstract shape. Click OK to apply.
Repeat Steps 52 and Step 53 to add more abstract shapes around the second dove. Here’s a sample.
Change the current layer blend mode to Soft Light, reduce Opacity: 80%. This will make the abstract shape become transparent.
Press Ctrl+J to duplicate current layer. Go to Filter> Blur> Motion Blur, set Angle: 10 and Distance: 40 pixels. Click OK to apply.
Lastly, go to Filter> Blur> Gaussian Blur menu. Set Radius: 3 pixels. Click OK.
Step 58: Adding Special Effects to the Car
Download and extract SciFi Render Pack. Go to File> Place menu, find and select render pack image number "15.png". Place it on the car’s left door like so.
Press Ctrl+J to duplicate layer ’15’. Go to Edit> Transform> Flip Vertical. Next, distort its shape by using Edit> Transform> Warp like the image below. Hit Enter.
Readjust its size using the free transform command.
Download and extract fractal pack image. Go to File> Place menu, search then insert fractal pack number "4-1.png". Place it above the current layer, covering the car.
Change the blend mode to Screen. This will hide all black colors within layer 4-1.
Insert "8.png" from the SciFi render pack. Adjust its size, covering the previous fractal pack.
Right click the current layer, select Rasterize menu. Next, go to Image> Adjustment> Hue/Saturation. Within the Hue/Saturation dialog, increase Hue: +153 and Saturation: +73 to change the 3D render color to magenta/purple.
Go to Edit > Transform > Distort menu to apply more distortion effect to the scifi render layer.
Click the layer car copy then press Ctrl+J to duplicate it. Drag the car copy layer on top of layer 8 (from the SciFi render pack).
Still in the car copy layer, load selection by Ctrl + clicking the layer 15 thumbnail. Erase selected areas by pressing Delete. Don’t forget to deselect with Ctrl+D.
Right click car copy layer, select Convert to Smart Object menu. Now go to Filter > Blur > Motion Blur, set the Angle: 0, Distance: 20 Pixels. Click OK to Apply motion blur filter.
In case you didn’t know, applying filters to a smart object will convert them into Smart Filters. Click the smart filters thumbnail to select it, then use the Gradient tool to draw a linear gradient diagonally from the bottom left to top right corner.
Insert another fractal image: 4-10.png. Place it above all layers. Move the fractal image below the car, and tilt it a bit to the right.
Change the blend mode to Screen, this will hide all black colors within the fractal image layer.
Add a layer mask to the current fractal image layer. Set the foreground color to Black. Use soft round Brush tool to hide unwanted fractal areas that are covering the bird’s head. See image below for reference.
Create a new layer on top. Use the soft round Brush tool to draw a flipped rainbow arc, but with a color combination of only red, orange and yellow.
Change the blend mode to Overlay, to create a subtle red highlight around the car, bird and clouds behind it.
Lastly, we will create ray of white light effect. Set the foreground color to White. Increase the Brush tool size to 1000 pixels. Add a new layer on top, then click once on the top right corner using the Brush tool. See image below for reference.
Congrats! You have reached the end of this tutorial. Check out what you’ve made!
Editor’s Note: This is written for Hongkiat.com by Jayan Saputra. Jayan is a graphic designer and book author from Indonesia. He loves design and you can find his more recent work on Deviantart.
If you want to download the PSD click on the button below to grab the files.
While animation in Photoshop is not a new concept, it definitely has come a long way in the last few years: The Timeline panel has been overhauled, video layers have been introduced, as has the ability to create keyframe animation. These additions have really upped Photoshop’s game.
Even though Photoshop is still a long way off from being able to create the high-end and cinematic animations of such programs as After Effects, it still has enough power to create complex animation — which is especially useful if you don’t want to spend time learning a new application.
In this article, I will share several advanced techniques to help you create complex animations. We’ll look at the Timeline panel and the different properties that can be animated. We’ll also explore the roles that adjustment layers, filters and smart objects can have in animation (and how to combine all three for some amazing effects). Because the topics and techniques in this article are advanced, a moderate level of Photoshop knowledge is expected.
Overview Of Timeline Panel
Opening the Timeline panel (“Window” → “Timeline”) allows you to select between two types of timelines: video and frame. The frame timeline is for frame-by-frame animation and can be very limiting. It generally works by converting the layers in your Layers panel to individual frames. I won’t go into any more detail on this timeline; I want to focus on the video timeline.
The video timeline allows for keyframe animation — which is an animation process in which you define key points of animation along a timeline and Photoshop will interpret the in-between frames to create a cohesive animation. Let’s go ahead and create a very simple animation to see how this works.
As you probably noticed from the image above, the video timeline shows a representation of layers in the Layers panel. Each layer in the timeline has a dropdown panel that exposes the layer properties (these are the properties that can be animated). To animate a layer property, simply click the stopwatch icon, which enables keyframe animation. Notice that a keyframe is automatically placed at the current time indicator.
Move the current time indicator to another point in the timeline and reposition the layer. Again, another keyframe will automatically be added to the timeline.
Playing back the animation shows how the object on the canvas moves from one position to the next.
Photoshop automatically creates the animation in between the keyframes.
Now that we have a good idea of how the animation process works in Photoshop, let’s take a closer look at the common layer types that can be animated. Because different layer types have different properties to animate, pay attention to which layer types are being used.
The standard (pixel) layer is a layer that contains pixel information. This is the most common (and most basic) layer in Photoshop. Layer properties include:
Adding a layer mask or vector mask to any layer will introduce additional properties specific to that mask. Layer properties that are added to the layer’s existing properties include:
layer or vector mask position
layer or vector mask enabling
A shape layer contains a shape (whether from one of the shape tools or the Pen tool) or a line segment. Because shapes and line segments are built with vector mask information, those mask properties will appear in addition to the other layer properties. Layer properties include:
vector mask position,
vector mask enabling.
A text layer contains editable text. If text has been rasterized, then the layer will no longer be a text layer, but rather will be a standard layer with pixel information. Layer properties include:
A smart object can contain any one or combination of the above layer types. A smart object acts like a wrapper for any layer, preserving the original layer while using a new set of properties. These properties include:
A word of warning when using smart objects. Because a smart object preserves the original quality of the layer or the set of layers it contains, it can be scaled and rescaled without losing quality. However, it cannot be scaled any larger than the size of the original layer it contains. Doing so would cause the smart object to lose quality.
At this point, I want to mention two other layer types — a video layer and a 3D layer. Both of these layers are completely unique from the other layer types mentioned. The video layer is actually a layer group that contains its own set of properties, while the 3D layer — besides containing a unique set of properties — is manipulated in an environment entirely separate from the other layers, adding to the level of complexity. Due to the uniqueness of these two layer types, I will not go into detail here. You can see how both layers are represented in the timeline below:
I encourage you to explore these two layer types on your own. For the rest of this article, I will be focusing only on the traditional layer types, excluding video and 3D.
Now that we have a grasp of the different layer types, let’s examine the different properties that we are able to animate. Knowing how each property works is important to understanding their limitations and how to get around them. Let’s look at the common animation properties.
The Position property allows for movement along the X- and Y-axis. Manipulate the position of an object by using the Move Tool.
The object’s Position property was keyframed to move the ball back and forth along the x axis.
Opacity allows you to keyframe the opacity of a layer. The Opacity control can be found in the Layers panel.
The object’s opacity was keyframed at 100% and 0% to create a fading animation.
The Style property allows you to keyframe the layer styles of a layer. Access the layer styles by double-clicking a layer in the Layers panel.
The object’s layer styles (Bevel & Emboss, Color Overlay, and Drop Shadow) were all keyframed to create a pulsing animation.
The layer mask or vector mask position keyframes the x and y positions of each mask. It works best when the mask is not linked to the layer.
The mask’s position is keyframed to scrub across the layer, revealing the background layer.
Enabling or disabling a layer or vector mask is also possible. To enable or disable a layer mask, go to “Layer” → “Layer Mask” and select either “Enable” or “Disable.” For vector masks, go to “Layer” → “Vector Mask.” Alternatively, you can “Shift + Click” the mask in the Layers panel to toggle on or off.
The mask is keyframed to be enabled, then disabled after a short time, causing a reveal.
Specific to text layers, the Text Warp property allows you to keyframe any text warp applied to a text layer. You can access a list of text warp effects by going to “Type” → “Warp Text.”
A Flag warp was applied to the text and keyframed to create a warping animation.
The Transform property allows you to keyframe transformation to a layer. Various transformations (such as Rotate and Scale) can be accessed by going to “Edit” → “Transform,” or by pressing Control + T to enter Free Transform mode.
The object’s Scale and Rotation are keyframed to create a spinning star that grows and shrinks.
Recently, I had a project in which I needed to produce high-fidelity screens for a tablet. I was to present these screens on the device and also produce a clickable prototype. They needed to be pixel-perfect. The timeline was tight (as always), so I went with my go-to tool, Photoshop. I’ve been using it for over ten years, and it gives me the fastest high-quality output.
Are you designing at “Retina” resolution in Photoshop? If the answer is yes, then this article is for you. I will walk you through the problems I faced in creating Retina mockups to be displayed on a tablet device. I will then explain a way to work that is easier and gives you better performance. This is about my experience with Photoshop, but it could be applied to Illustrator and other software.
Throughout this article, I will use the @2x and @3x notation. These represent the Retina buckets for iOS. A great example is the app’s icons. For the original iPhone, it would be 60 × 60 pixels (@1x). For the iPhone 4, it would be exactly double, 120 × 120 pixels (@2x). Now, the latest devices are dipping into triple territory. For the iPhone 6 Plus, the icon would be 180 × 180 (@3x). When talking about @2x or @3x, I am referring to using double or triple the pixel dimensions. All should become clear as you read on.
Now, let’s get into the design of this tablet application. Like many other designers, I had been told that one must design at Retina resolution. The general consensus is @2x or @3x. So, I set out on my merry way, designing @2x. The design would be presented on a Nexus 9 with a 4:3 ratio, so my Photoshop canvas was set up to 2048 × 1536 pixels. After creating a few screens, I realized in practice this doesn’t work well at all. Let’s work through the issues I found.
At first, this is no big deal. Zoom out to 50% or 33% to see your design at roughly 1:1. But at the same time, it’s a bit ridiculous, right?
Why should you have to zoom in and out constantly to see what’s going on? It also completely ruins pixel-snapping1, which works best at 100%. It’s almost impossible to know whether a pixel is aligned when you are zoomed at 33% or 50%! Suffice it to say, I got pretty fed up zooming in and out like a maniac to get things aligned pixel-perfectly.
This is a big one. Let’s use a tablet with a 4:3 ratio as an example. I set up a blank PSD @1x (which is 1024 × 768 pixels) and another @2x (2048 × 1536) and a third @3x (3072 × 2304). I then did some comparisons.
First, I looked at the number of pixels in the PSDs. The @2x PSD has four times as many pixels. The @3x has nine times as many. This directly affects memory usage, which itself goes up by four times and nine times! For our blank PSD, this went from 2.25M to 9M @2x, and then 20M for @3x.
Last but not least, it also needs to store all of these extra pixels. So, your file size increases as well. The size on disk went up by 280% for the @2x, and up by 590% for the @3x. Now, in our blank PSD this is only an increase from 60 to 358 KB. But once you’ve got some serious smart objects and layers going on, watch out! Let’s take the example of a PSD that is 100 MB. The @3x could be 590 MB. Then, multiply this by the 20 to 30 documents in your project!
From a performance standpoint, it’s very clear that working at Retina is going to cost you some serious RAM, CPU and disk usage.
This issue becomes obvious pretty quickly when you’re working @2x or @3x. Suppose you’ve set out to make a text box with the font set to 16 pixels. But @2x this is 32 pixels, and @3x it’s 48 pixels! Not ideal, is it, having to constantly multiply by two or three? I don’t know about you, but I could do without the constant math. When I design, I want to know that 16 pixels is 16 pixels!
Here’s another gotcha. What happens when you use 1px at @2x Retina? You guessed it, it becomes 0.5 pixels! And @3x it would be even worse, 0.33 pixels! So, you also have to constantly be aware that your sizes must be divisible by 2 or 3 when working in Retina. Another consideration comes into play if you ever use @2x with an odd pixel value. Let’s say you have a box that is 33 pixels wide; when converted back to @1x for build, this becomes 16.5 pixels! Yet another brain drain from working with Retina.
This is another issue I’ve seen in the workplace: designers who have been working @2x or @3x and then begin to spec their design for developers. This usually involves documenting padding, widths, heights, font sizes and so on to ensure that the design is built well. But they forget they are at double or triple the resolution. So, the poor old developers get a complete spec in which they need to divide everything by 2 or 3! Not great, is it? Why make their life harder?
The other option is that the designer could save a new PSD at 50% or 33%, and then spec from that. But Retina-land looks like a one-way street. It’s hard to see through those blinkers.
Basically a DP is the @1x pixel dimension or, in Android terms, the baseline density that is medium (MDPI). A density-independent pixel is the same as 1 physical pixel on a 160 DPI screen. The conversion is DP = pixel ÷ (DPI ÷ 160).
Let’s use our tablet example with a display of 2048 × 1536 pixels and 320 DPI. Running through the equation above, for the width we get 1024 DP, and for the height, 768 DP. This becomes our baseline resolution. And we also need to know the scale factor for image assets. That equation is: scale factor = DP × (DPI ÷ 160).
Using the width of 1024 DP and the device’s 320 DPI, if we run through this equation, we’d get a scale factor of 2. This means we’d need to output @2x assets for display on this device. It’s also pretty straightforward to see that 2048 ÷ 1024 = 2. So, don’t stress about the equations!
As another quick example, let’s take the Nexus 5. With its resolution of 1920 × 1080 pixels and 480 DPI, the DP units work out to be 640 × 360. Then, the scale factor comes out as @3x. So, now you know your DP dimensions and scale factor for assets.
Once you have the DP dimensions, those become your PSD canvas size at 72 DPI. So, the answer to this mystery is to design @1x or in DP.
Some other devices don’t fit quite as nicely in these buckets, but you get the idea. The point here is that you are reducing to the baseline DP units and that you know the scale for exporting images.
“But I’m Stuck With @1x Images!”
Correct. And a @1x PNG would look horrible on a Retina device. What I needed was a way to work at @1x and with DP units, but export to @2x or @3x to preview on a device. My clients would accept nothing less. So, using my knowledge of exporting icons to various DPIs for Android, which I’ve covered elsewhere4, I applied the same technique to Photoshop.
The solution to my problem was a Photoshop script that exports any canvas to a @2x or @3x PNG for previewing on a device. Thus, one can keep working @1x and in DP and get all of the performance benefits and still get good-quality screens. Have your cake and eat it too, if you will.
Here’s a quick rundown on how the script works:
Your Photoshop canvas is resized to 200% or 300%.
It creates a new folder named retina, where you PSD is saved.
Then, it saves a PNG as <documentname>_2x.png or <documentname>_3x.png.
It also clears and purges the history (“Undo”).
Then, it saves the document exactly how it was before the script ran.
The scripts are very easy to modify. If you want to rename the folder or file name, you would just change the variables shown below:
var scale = "200%";
var folderName = "retina";
var extensionName = "_2x.png";
Once they’re downloaded and unzipped, copy the scripts and paste them into Photoshop’s Scripts folder: on Windows, Program FilesAdobeAdobe Photoshop CC 2014PresetsScripts, and on Mac, ApplicationsAdobePhotoshop CCPresetsScripts.
Please be aware this will vary according to your Photoshop version and operating system.
You’re almost done. Restart Photoshop, and the scripts will be ready to go. Now, anytime you want to export a PNG @2x or @3x, just click “File” → “Scripts” → “ExportDocument2xPNG” or “File” → “Scripts” → “ExportDocument3xPNG”:
You are now left with Retina images @2x or @3x, ready to put on the device.
Keep in mind a few things if you go for this approach. Use shapes and vectors wherever possible. They scale up perfectly, as do layer styles. Always use smart objects for any bitmaps. Keep in mind they will still need to be @2x or @3x inside.
Using this approach with Photoshop’s generator7 also works great. Any layers or layer groups can be exported @2x and @3x. And you will know they are pixel-perfect.
After producing the designs, I needed to create a clickable prototype for the client. I found that the exported PNGs work great with Marvel8. Marvel allows you to upload your images to Dropbox or through its own system. Once they’re uploaded, you can create hotspots and link to other screens. Then, you can view on a device to see your designs in action. The other bonus was that I used up less bandwidth and Dropbox space! Retina PSDs would have been superheavy!
If you use Illustrator, you can also work @1x and in DP. Make sure your document is set up for the web at 72 DPI. Then, you can manually export @2x and @3x PNG images by clicking “File” → “Export…” and selecting “PNG.” Click “Export.” Then, use the “Resolution” dropdown menu, click “Other” and input 144 PPI for @2x or 216 PPI for @3x. As with the Photoshop scripts, this can also be configured to be just one click!
Your other option is to use the increasingly popular app Sketch9. It comes all set up and ready to go @1x with a vector-based workflow. There is built-in support for exporting @2x and @3x from layers and slices. Just note the requirement of operating system. The creator, Bohemian Coding, is proud to develop exclusively for Mac, with no plans to support Windows or Linux (according to its FAQ10). It’s a great program if your workflow and business support it.
Thanks For Reading
Well, I hope this has been of use to you. It certainly has improved my workflow. Now I get superlight and fast PSDs that can be exported to Retina scale for viewing on a device. And the best part is that I am no longer maniacally zooming in and out or multiplying and dividing my pixels!