The debate about Sketch vs Photoshop keeps on raging. There is no denying that, to this day, Photoshop is still the most commonly used tool for making mockups both for mobile and web designs. While it is true that Adobe Photoshop was primarily meant as a tool for photographers to edit their captured images, its compelling features empower web designers to come up with striking and useful websites, too.
However, it seems that gone are the days when Photoshop dominated the market and the industry. With the arrival of Sketch, it won’t really be surprising if the people behind Photoshop are already panicking. Finally, a real competition and threat to Photoshop has arrived.
Table of Contents:
- Photoshop: A Designer’s Hammer
- The Rise of Sketch
- Sketch VS Photoshop: What’s Best for You?
- Useful Cheats Sheets For Designers
- 9 Creative Web Applications for Creative People
Photoshop: A Designer’s Hammer
For the longest time, Photoshop has been a canonical tool for designers. In fact, many designers still consider this tool as their “hammer”. Many clients of web designers are aware of what PSD is. These native files made in Photoshop are composed of layers that can be unraveled and manipulated. Clients usually request for them to be used for references, while front-end developers know how to apply them. They’re very easy to share and update with other members of a design team. However, since the arrival of Photoshop CC 2014, Photoshop, since then, has proven that it is more than just a photo-editing tool as it can be a friendly tool for web designers, too, who work on digital designs.
The following are some of the features of Adobe Photoshop that make it a useful tool for web designing:
- Libraries. The assets are synced to a Creative Cloud account that can be used again in other Adobe software, files, and future projects.
- Smart objects. Just like its libraries, the smart objects can be reused in several situations, whether in a single file or with other files.
- Extract assets. These days, Photoshop has made it possible for web designers to extract objects, elements, and images for web and mobile elements after integrating more comprehensive features. With the help of plugins such as Cut&Slice and DevRocket, exporting these assets is way easy.
- Layer comps. Layer comps enable a designer to make variations of a design by tweaking attributes, positioning, and the visibility of elements without the hassle of making multiple files.
The Rise of Sketch
“I love Sketch. I made the switch some time ago and I haven’t looked back. I was a Photoshop advocate for my entire working life until Sketch came along, and within a week, I was a total convert. No regrets whatsoever. I know lots of designers who’ve made the switch, but actually a lot of the designers I speak at conferences with, are still 50% Photoshop and 50% Sketch – that’ll change, they’ll see the light soon!”—Sarah Parmenter
After reigning supreme for more than two decades, Photoshop’s supremacy is finally challenged with the arrival of Sketch. Sketch has become one of the favorite topics for discussion by those who belong to the web and UI design community. But, what has made Sketch keep the web design industry abuzz lately?
You Have All You Need
Compared to Photoshop, organizing all the documents that you have and making revisions on Sketch is a great deal easier, thanks to Sketch’s clean and simple interface. Nonetheless, this app only comes with tools that can be tweaked using CSS3 and HTML. Unlike Photoshop, it doesn’t have 3D tools, irrelevant photo filters, and other features that can affect your designing speed. In short, Sketch only offers the things that are vital for your web and UI project, enabling you to finish your work at a much faster pace.
Of course, not all web designers like this. To compensate for its lack of tools, Sketch has a lot of plugins which are comparable to that of Photoshop’s tools, and they have everything covered: from a simple plugin that enables you to swap the border color and fill color to a wide range of content generators.
Making multiple artboards is a piece of cake with Sketch. Simply press A and voila, you have an artboard! Then, Sketch will show a list of the 28 most common screen icon sizes that you can choose from. This is downright helpful when creating a responsive design because getting the right dimensions when creating a mockup is a breeze.
Sketch also makes mood boards simpler to create and a better project resource. First up, note that all of your files can live in one document. Sketch contains a page drawer in the artboard sidebar that allows you to quickly scroll between files. For large projects like this one, it was particularly nice to be able to quickly jump back and forth between the site tree, your mood board, and your mockups as you design or make changes.
Before using Sketch, it is highly recommended that you download the Sketch Toolbox first. This is a plugin manager that enables you to browse directly and install the plugins you want. Toolbox is also a great help for you to properly monitor what other plugins you are using.
We are now in an era of responsive design, and the key to achieving this is to use vectors in creating one. Designers need to consider high-definition versus normal definition displays, narrow screen versus wide screens, and many other things when coming up with a design.
Obviously, working on a design that rescales all of the formats is of utmost importance. However, coming with a separate mockup for each set of dimensions is a meticulous process, demanding much time. With Sketch, though, this is not a problem because of features which enable you to freely resize objects. Imagine the time and energy that you can save just with this feature alone.
In contrast to other vector-based programs, Sketch is also pixel-aware. Since the shapes that you create always come to the nearest pixel, there is no need for you to worry about blurry lines and images. With the Sketch Mirror plugin, you can easily open your documents and see how your design would appear on an iPad or an iPhone. The plugin also allows you to immediately preview the changes you’ve made, helping you make final tweaks based on what your client wants, especially if you are face to face with each other.
AEFlowchart plugin is what you need to create sites for the websites that you are working on. It can help you monitor a website’s new organization. This provides a great deal of ease for reference in the design that you are working on, without having to create another program that will consume much of your time.
Text Styles in Sketch App
One interesting thing about Sketch is that you can easily make typographic elements. For example, you can come up with text styles that you can use in inline styles, such as heading blocks and headings. Later, you can apply what you have created in other documents.
If your client does not like the font you have made, all you need to do is to update it once, and the style in all your project will be automatically updated. What is more impressive is Sketch’s use of native text rendering. This means that the text you used in the design file is exactly the same in the browser.
Ease of Color Management
Managing the colors of the project you are working on is also a walk in the park with Sketch as you can simply make a color palette on the mood board. The most common colors you use will be pulled out above your references so that you can easily use them in the future when you work on another project.
Furthermore, since Sketch allows you to access all your files in a single document, it is a lot easier for you to copy and paste objects and object styles, including color gradients and color fills, from all your files. This is something that Photoshop is clearly missing, probably not realizing the ease this feature provides.
Built-In Layout Grid
Another standout feature of Sketch is its built-in layout grid. Unlike Photoshop, you don’t need to rely on a plugin or a series of guidelines or separate layers that have a makeshift grid, which is not really easy to edit. With Sketch, pinning a transparent layout guide and changing the column and gutter sizes is a piece of cake.
If you want to tweak the layout grid, you simply need to go to “View”, then go to “Layout Settings”. If you want to turn off the grid, what you need to do is hit Control +L.
Unlimited CSS Possibilities
“I also really like how Sketch has incorporated CSS logic into the app. This makes converting your designs into CSS much easier, as you have to use CSS logic when applying styles. Another feature which is really handy for speeding up the design/development crossover is Automatic Slicing.”— Dan Edwards
As mentioned in the earlier section of the article, you can do almost anything in CSS using Sketch. If you click the object and adjust the radius in the sidebar, you can easily come up with rounded corners on the action button. If you want gradient overlays on images, it just takes one click to add. While it is true that stylish CSS3 tools are not exclusive to Sketch, this app raised the bars higher by empowering the designers to accurately copy CSS styles for various elements. It only takes a right-click of any object for you to copy the styles and the layer’s name as a comment above the specific code.
This establishes a seamless connection between designing and developing. Additionally, Sketch enables you to convert a group of objects into a symbol that can be copied, repeated, and synced to all situations the changes made to the object. Certainly, making and duplicating CSS styles and designing replicated content is stress-free with Sketch.
It is a lot easier to play and experiment with the size of the images, text, and colors at the same time with the use of symbols. They simply make life a lot easier. Even between templates, symbols work better. Hence, if you want to use the same layout on a blog’s page listing post, for instance, all you have to do is to replicate the instance of the symbol there, and the changes you make will be automatically synced in all of them. If you want to add real content, such as a headline or an image, what you need to do is right click and remove the object from its first symbol. Cool, isn’t it? Surely, Sketch’s symbols can ease your workflow by cutting your work time short.
Sketch’s Dynamic Buttons
Although it is true that symbols are great for product listings and blog posts, the Dynamic Button plugins are great for the buttons on the page. This plugin is primarily meant for creating a symbol for the button. However, the padding of the sides are also adjusted automatically based on how long the text is. This will save you a lot of time working on your design, especially if you are working on pages that have multiple buttons.
What you need to do is just create a text layer bearing the initial button text, choose the plugin, and enter Command +J. The result? A dynamic button that you can use over and over again throughout the design if you edit the text of the button.
Day Player Plugin
Filling in the placeholders from different image services is without sweat if you use the Day Player plugin. Doing so will even be a lot easier if you use Lorem Pixel to get the specific images that you want. Pick the plugin and the image service that you are considering, edit the options for the placeholder, and insert it in the object group of the product. Imagine how easy carrying on a task is with this plugin compared to searching images on the web for placeholders!
Content Generator Plugin
The Content Generator Plugin is what you need if you want to add more filler content. With this plugin, all you need to do is to select the image placeholder boxes of for every team member and select a male or female avatar in the plugin options.
Built-In Generation of Bulleted Lists
Another impressive feature is the built-in generation of bulleted and numbered lists. This is one important feature not found in many design programs, including in the widely-used Photoshop. With this feature, there is no need for you to subject yourself to a time-consuming and tedious process of creating a well-formatted text that appears great in a browser.
Support for Multiple Artboards on One Canvas
With Photoshop, you need to make numerous PSD files and switch between windows as you work on many mockups. Luckily, Sketch has a feature that supports several artboards on one canvas. You can see your desktop, tablet, and mobile mockups in just one view. This allows you to work on all your mockups simultaneously. If you are editing the symbols, colors, or text styles, you can be aware of the effect of the changes that you make in all mockups. With this, you can easily become mindful of the content flow and the connections happening between the different devices.
“Exporting is a common task, but Sketch 3 improves the process by allowing you to specify various resolution levels for your sliced components. That means you can save the same slice into several files that support different screen resolutions in one stroke.”— Geoff Graham
One of the most interesting things about Sketch is that it makes exporting of all the files a great deal easier. For instance, if you want to export the icon buttons used in mobile navigations, all you have to do is click a group of layers and click the “Export” button located at the bottom-right corner. You can then save these icons for web either in SVG or PNG format. This includes everything in relation to displaying the assets on different devices.
Sketch Style Inventory Plugin
With the Sketch Style Inventory plugin, creating an inventory of all the HEX codes of colors and swatches used on the page is a breeze. However, this is not only limited to colors; you can use it on text styles, too.
Sketch VS Photoshop: What’s Best for You?
So, what should you go for: the ever-familiar Adobe Photoshop or the unstoppable Sketch?
Here is the list of the basic difference between these two:
- Rendering. In terms of rendering, Sketch has one that is close to web. Unfortunately, the same thing cannot be said about Photoshop.
- Shortcuts. Photoshop wins this round as it has a lot of shortcuts. Sketch clearly lacks shortcuts that can contribute to the further ease of work.
- Documents. Sketch has tiny documents whereas Photoshop has large ones. This tiny document file size is what you can expect from a vector app. Since most files created using Sketch is lower than 4mb, they are not only easy on your hard drive but they are quick to load up and work on.
- Library. Photoshop has one library, Sketch has none.
- Grids. Sketch has built-in grids, while, with Photoshop, you have to make your own grids.
- Color Management. Adobe Photoshop has an excellent color management. This is in contrast to that of Sketch.
- Application. Sketch wins this round again because it enables faster application as compared to Photoshop, which is slow.
- Symbols and Objects. Symbols are to Sketch, objects are to Photoshop. Looks like it’s a tie, huh! However, Sketch symbols come in the same size whereas the objects of Photoshop come in different sizes.
- Artboards. Sketch has a clear advantage as it comes with multiple artboards. This is in contrast to the single artboard of Photoshop.
- Measuring. Clearly, Sketch wins this one. With a marquee tool, you open the info palette, draw the distance between 2 objects, and you can already check the results. This is, indeed, an advanced measurement that only Sketch can provide. Clearly, Sketch’s approach is not only more direct but easier, too. If you use Photoshop, this is just not possible as the ruler that it provides is cumbersome.
- Zoom views. This round goes to Photoshop as it has multiple levels of zoom. Sketch has only one.
- Tweaking. With its nondestructive tweaking, Sketch has the upper-hand. You simply have to type a number into the radius, and you’re good. In the case of Photoshop you need to plug in a new radius and redraw your shape, and you need make sure that you copy the exact dimensions
- Weight. Sketch is lightweight while Photoshop weighs a lot heavier.
- Photo editing capabilities. Well, this round goes to Photoshop as it was primarily created for this purpose. However, Sketch makes up for this with specific features that can deliver digital designs that are well-designed.
- Usability. Sketch is an app that is only exclusive for Mac. However, Adobe’s Photoshop Creative Cloud can be used by both Mac and PC users.
Sketch: A Real Threat to Photoshop
“I’m convinced that Sketch, at the moment, is the best tool for designing websites, user interfaces, and apps.”— Brian Hoff
Clearly, with the many advantages of Sketch, it has upstaged Adobe Photoshop. Does this mean, then, that you should go for it, especially if you are just a beginner in terms of web designing? Well, that’s going to be a pretty tough question to answer. It is true that many designers are already making the switch to Sketch because, for one thing, it only costs $99. On the other hand, Adobe Photoshop’s Creative Cloud can make you spend $49. 99 for a monthly subscription.
Sketch is Great, But Many Are Still Loyal to Photoshop
“I can see problems swapping files with other designers if one or more of them haven’t yet switched to Sketch. However, the beauty of the web stack is you can generate the assets however you like, so from that perspective Sketch can output your PNGs or whatever just like Photoshop can.”—Khoi Vin
At this point, however, it seems that a complete exodus to Sketch is unlikely. For one thing, people, on the whole, are resistant to change, no matter how great and promising that change may be. Unfortunately, many companies aren’t ready to get rid of the comfort of using Photoshop for UI design projects. Switching to Sketch will demand time for everybody on a team to understand how this app works until they can finally become comfortable using it.
With this, it can be said that it is still safe to stay with Photoshop. Once you have mastered using the “reigning king”, Photoshop, then you can start learning Sketch. After all, it is your responsibility to continuously learn new tools and adapt to their use whenever it is necessary.
We really hope you got a better idea of both great tools, now we want to share some awesome cheat sheets.
Is there a time that you really don’t know the easiest way to create your design applications? Then there are things that could help you, these are cheat sheets. Cheat sheets give you a good refresher on the topic you want to learn. Just google on your keywords and surely you will find a bunch of cheat sheets that will help you. You’ll find cheat sheets on graphic design applications such as Photoshop, Illustrator, and Fireworks. In this section, I’ll be featuring 40 useful collections of cheat sheets for designers.
So grab some of these, you’ll never know when will you need them. Make it handy and usable for your graphics design. The next section will be featuring some alternatives for upper two amazing tools and some other really creative web apps.
9 Creative Web Applications for Creative People
Photoshop is still one of the most complex photo editing tools out there. Though the web is loaded with Photoshop tutorials and people have become accustomed to using Photoshop, there is this section of digital art lovers that are afraid of Photoshop. Somehow it seems over stuffed with options. It was to win over this genre of end-user that various web-based applications popped up and slowly became famous. We have already covered plenty of such tools but somehow the list seems to be growing exponentially. This article will list some of the new (and some that were missed earlier) tools that make our lives exciting. I will start with web-based tools for designers and then include few A.V. based tools to keep you intrigued.
Flame is for true artists. It is an experimental project of Peter Blaskovic who was born in 1975. His application, Flame, is one web-based application that can be used by designers to create wonderful results. Flame gives you the room to do whatever you want with a design and expand its horizons. It’s backed by a very easy to use GUI which makes your life a lot more easier. Dive into the world of Flame and be amazed by its capabilities. Let us know what you did with Flame.
I haven’t seen a tool like Viscosity before. This tool lets you start with a simple set of colors which can later on be distorted to create effects that are simply jaw dropping. The end result generated by this tool is worth admiring. If you are a believer of abstract art then Viscosity is just the best tool for you to use. Viscosity gives the end user the opportunity to move each pixel on the screen in order to fine tune the end result and also to give new meaning to a design.
PhotoCopa is one application that will help you extract color information from any image super quick. The tool gives you the option to upload your own image or use Flickr to opt for the image that you need to analyze. PhotoCopa have their own online community of Color Lovers where one can showcase their choice of pallettes for display and appreciation. Remember, we also want to see your experiment so if you have anything interesting then the comment section below is all yours.
FotoFlexer is one of the advanced web-based applications that expands the horizons of an end-user. This online digital photo editor comes loaded with advanced effects that were previously available only if you bought costly software. FotoFlexer runs on flash so you might be disappointed if you do not have flash on your machine. One can upload an image of any size in FotoFlexer and start editing it. FotoFlexer is designed to add multiple layers of an image with grace. The advanced features of FotoFlexer are all available for free which exponentially increases the value of this tool.
Picture2Life is another online photo editing tool that provides multiple features to keep you intrigued. Picture2Life smartly promotes some of the basic features that are part of this tool like creating collages, animating the uploaded photographs and performing basic edits. This tool is free and that makes it worth at least a shot. One has the opportunity to add various effects to their images like Fading Edges and various other effects to bring their images to life. Try the tool and let us know how effective it was in your quest for the ultimate photo editing tool.
LunaPic is one of the very few HTML based image editing tools. Henceforth, don’t be surprised if you find the tool serving only a few very basic purposes. LunaPic will not be able to distinguish various layers in your image which is quite sad. It has a 4 MB restriction and the only reason it’s really on this list is because it can be run without flash, which is not the case with most of the web-based image editing tools that I am aware of. LunaPic can be used for some of its unique effects like the Fire effect and reflective water effect. Have fun using LunaPic.
Pixenate is another old school HTML based photo editor that comes loaded with basic photo editing features. As Pixenate uses basic HTML so any browser will run Pixenate without any issues. You will not require flash to run Pixenate! This is one tool that can be used for quick photo editing and printing of the results. The maximum size of an image that can be uploaded to Pixenate is 10 MB which can be restrictive at times. Also, as expected, Pixenate does not support layers.
Now, let us get a bit off track and discuss web-based tools that aren’t really for web designers but very important for us all, as music is the best medicine.
8. Skale Tracker
Skale (not “Scale”) is one music based web application that will keep your engrossed for a long time. In this tool music is created by things called as trackers. The tracker is programmed to read data from input tables and then output music as per that data. Skale Tracker is one of the very few online trackers that will keep you busy. I had to close my browser window quickly because I did not want to get addicted. See if you are able do the same.
9. YouTube Editor
How do you expect me to make a list of creative web-based applications and not include a YouTube video editing tool. It is customary just because of the popularity that YouTube has achieved. The online YouTube Editor can be used to add YouTube videos and add various soundtracks to your videos. YouTube editor comes loaded with plenty of transitions that can be used in your own videos. The app is pretty easy to use as most of the features in YouTube Editor are drag and drop.
I agree that we have already covered many of the web based applications but as you can see, this list contained some of the applications that we had missed out before. Some of these applications might be old while few are new and very exciting. Share your experiences with these apps and let us know if you have any other tools that we can cover.
So what do you think about Adobe Photoshop and Sketch, which one are you using and what is your experience with them? Did you try any of the web apps? Tell us in the comment section.