Learning as a designer can mean a variety of things: from strengthening technical skills, to trading workflow tips from fellow designers, to staying up to date on industry direction and topics on the mind of the design community from online communities.
It is crucial to continue learning, even beyond the traditional structure of a classroom, and develop a habit of lifelong learning. The natural inertia of change in a workplace, and isolation from the larger landscape of the design industry can force a designer to gradually learn toward developing expertise in one area.
IDEO, or more specifically Tim Brown, formulated the concept of a “T-shaped” designer: mastery of a few design skill sets and a breadth of general skills, which “provided empathy for other disciplines and, in turn, fostered greater collaboration.”
It is worthwhile and ultimately increases empathy when a designer develops a breadth of skills, as this can offer more perspective throughout the process of problem solving.
For example, development experience can help a designer become more empathetic to technical constraints and implementation realities that they otherwise would be less receptive to without that background.
While it may seem that taking time away from specialization would be the trade off for developing a breadth of skills, the reality of design in the workplace is one that involves collaboration among many different stakeholders and people from various specialties.
Having skills that increase understanding are particularly useful in a team environment–and any team that operates in a silo will end up having more issues with miscommunication and misunderstanding.
Ultimately, its beneficial having periodic refreshers throughout your working life as a designer. Try attending design conferences, engaging in the online or in-person communities for design (AIGA, IXDA as a few examples) in order to understand how the design industry is changing and where it may be moving next.
Prototyping should be a fast and easy way to gain confidence in your designs. No longer regarded purely as a way to sprinkle motion magic or over-polish designs, prototyping is a communication tool. Whether communicating with stakeholders, design managers or users, a good prototype helps to communicate design decisions and test ideas.
In this tutorial we’ll be creating a basic “boarding pass” prototype in Atomic, which you can preview here. The prototype begins with a loading state before enabling you to browse your upcoming flights and preview your boarding QR code. To create this prototype we’ll be using interactive components, data, variables and page transitions. Not to worry! I’ll be helping you through each step.
Here’s a demo of what we’ll create:
There are a few things you’ll need in order to follow along:
Design Assets: This is the file in which you’ll find the design assets and create your prototype.
Data Source: A Google Sheet file with the data we’ll be using in our prototype.
Atomic iOS App: Download the app from the App Store to test your prototype on your phone.
If at any time throughout the tutorial you have a question, feel free to reach out to me (@femkesvs), or the Atomic support team (@we_are_atomic) on Twitter.
1. Copy the Assets to Your Account
I’ve created a sample file with the assets you’ll be needing to create your prototype. This sample file is complete with the assets we’ll be using, as well as pre-built components.
You can access the assets here. To use the assets you’ll need to copy the prototype into your account. You can do this by clicking Copy & Edit in the bottom right and then select a project you’d like to copy it into. I suggest creating a new project for this tutorial.
2. Upload the Data to Atomic
Before we get started creating our prototype we’ll need to first add the data source to Atomic. I’ve put together a Google Sheet with some basic data that we’ll be using in our prototype.
You can access the data here. With the data source open, head to File > Add to My Drive (you’ll need a Google Account for this).
Next, with your project open in Atomic, select the Data tab. From here click Import Data, and locate the data source via search. Once located select the data source. You’ll see Atomic load the data into your project. This data source can now be accessed and used in any prototype within the project.
3. Creating the Loading State
Let’s begin assembling our prototype by creating the loading state. We’ll do this by creating both a custom transition and timed-based page action.
First, select the loading component from the Assets page to copy (CMD-C and paste (CMD-V) it to the page 1. It will be large, and rather than resizing it, position it into its starting position.
Then copy the loading element you just placed on page 1, this time pasting it on on page 2. Reposition it into its final state (rotated clockwise 75° so the plane is positioned off the right side of the canvas).
To create our transition, hop back to page 1. In the right hand properties panel you’ll see a section named Page Actions. Click the plus button and then set the following:
Make something happen: After a set time
Go to: Page 2
Motion: Custom transition
Easing: Ease in-out
Let’s preview and see our transition in action–you should see the plane glide from left to right over the course of two seconds. Neat!
To take it further you can also copy and paste the Fly logo to both page 1 and page 2 (beneath the loading component in the pages panel and placed behind). Make sure you follow the same technique of placing it in its start and ending position on each page. You probably have to adjust the order of your layers to make it appear from behind.
Lastly we’ll need to create an action that takes the user automatically to page 3 from page 2. On page 2 add another timed page action. This time we’ll use the following settings:
Make something happen: After a set time
Go to: Home
Motion: Slide up
Easing: Ease in-out
Tip: if you’d like to stagger the timing of the two elements animating you can do this using the Advanced Motion Timeline.
4. Understanding Components
Next, copy the elements needed for page 3 and paste them onto page 3. You’ll need to do a bit of rearranging and adjustments to fit the elements on the page as needed.
Almost all of the elements needed for this page are components.
A Word About Components
Components in Atomic are like symbols. Any component can be edited and reused throughout a project. Any edits made to a component will be updated in each instance. Components can also be interactive and contain multiple states of a symbol. This makes it really easy to structure your prototype.
Let’s add some interactivity to the boardingPasses component. To open the component, double-click on the component icon in the layers panel next to the layer name. Once open, you’ll see three pages; one representing each flight. For now these passes are identical, soon we’ll change this.
We know that the user has three flights and we’d like them to be able to swipe through each one. There’s also a QR code icon that, when interacted with, should bring up their boarding pass code.
If you look in the layers panel you’ll notice each page is an instance of a component called “boardingCard”. Let’s open the boardingCard component now to see how the data has been applied.
5. Using the Data
The boardingCard component is a component embedded in a component. This allows us to create a boarding card symbol that can be reused while showing different data sets.
With the boardingCard component open you’ll see two pages; the front and back of the pass. This is where the data is being assigned to the individual text elements.
Select the ABC text and take a look at the Text properties. You’ll notice the following:
Content: Set from data column
Data: Inherit from parent
Subsequently if you look at the Google Sheet where this data is being pulled from, you’ll see a column titled “departure-code”. This means that the text element ABC will display whatever data is shown in the column “departure-code”.
All dynamic text in this component has been set to Inherit from parent. This allows us to link to the data sheet at a group level, and therefore display and sort through the data row by row. We’ll get to this soon.
6. Adding a Flip Interaction
Next we’ll set up a page-based transition to flip between the pass and QR code. On the front page of the boardingCard component press H to bring up the hotspot tool. Then, draw a hotspot over the QR code icon on the front page.
Hotspots allow you to define interactive areas of your prototype. With your hotspot selected, under the interactions panel set the following:
Gesture: Click or tap
Go to: > Next page
Easing: Ease in-out
Then, on the back page, create another hotspot (H) that will take us back to the front page. This time draw it over the close icon and set the following:
Gesture: Click or tap
Go to: > Previous page
Easing: Ease in-out
Time to test your interaction! In the bottom right corner, press the Preview button. Preview mode lets you test your transitions and interact with your prototype via hotspots. Try clicking on the QR card or close icon; the card should flip between the two states. You can close the preview by pressing X.
Having this boarding card as an interactive component allows us to select which data is shown dynamically, without having to create multiple states and interactions.
7. Connecting the Data to the Parent
To return, click the purple back button up at the top left. Now you should be back in the boardingPasses component. In this component we have three passes currently displaying the same data. Let’s update this now.
Remember how inside the boardingCard component, the data was set to Inherit from parent? In this case the parent is the component instance.
On the flight 1 page select the boardingCard instance. In the component properties leave State as it is. Under Data, select the data source and ensure the Row is set to row 1. The instance should now display data from the first row of the data sheet.
If you toggle the row you’ll notice that the data displayed updates. Let’s keep it on row 1 for now, however on flight 2 and flight 3 set this to show data from row 2 and row 3 respectively.
8. Adding Swipe Gestures
To enable users to swipe through their boarding passes we’ll need to set up some swipe interactions.
Create and draw a hotspot (H) on the right-hand side of the flight 1 page (make sure you leave some space at the top for the hotspot over the close icon on the back page of the boardingCard component, and that it doesn’t cover the QR code on the front page). To create the swipe gesture, use the following settings:
Gesture: Swipe left
Swipe distance: 200
Go to: > Next page
Motion: Push Left
Easing: Ease in-out
Do the same on the the flight 2 page, and add a second hotspot on the left side of the flight 2 and flight 3 pages set to Push Right and Push Left instead. Feel free to press Preview to test and interact with the component, and adjust your swipe settings accordingly.
9. Create a Variable
To finish building the prototype we’ll need to create and use a variable. This variable will enable our components to talk to one another while influencing their state.
The variable we’ll be creating will be used to update the progress dots based on which boarding pass is shown.
To create a variable, press V to open the Variables Modal. In here click Create New Variable and type “flightDisplayed” into the Name field. Leave the default value blank.
Great, you have your variable set up! Close the variables modal by pressing the X or escape on your keyboard.
10. Using Variables
Navigate back to the prototype. If we preview now from the Home page, you should be able to swipe between the cards and also interact with the QR code.
While we can now swipe through the passes, there are a couple more things to configure to influence the progress dots to update based on the progression of boarding passes.
To do this, open up the boardingPasses component. On page 1 let’s create the following page action:
After a set time
Set: flightDisplay (variable)
Repeat this on page 2 and 3, ensuring the value is set to 2 or 3 to reflect the page you’re on.
We’ve effectively told the component boardingPass to update the value of the variable flightDisplayed, depending on the flight (page) displayed. We can now use this value to influence the state of the progress dots.
Here’s how: head back to the prototype and open the progressDots component.
You’ll notice three pages (states) named 1, 2 and 3. This naming matches the values being set in the flightDisplayed variable. It’s important that these page names match the values set.
Head back to the prototype, select the progressDots component, and:
In the Component section in the properties panel, open the State dropdown.
Select the flightDisplayed variable.
We’ve now connected the progressDots component to the variable flightDisplayed. This means that when the value of the variable changes to a value, the progressDots component will display the page that matches the variable value.
Try previewing your prototype now, interacting with the boarding passes by swiping and seeing if the progress dots update.
Lastly, you can delete or move the Assets page to ensure your shared preview opens on the correct starting page. To delete the page, select the hamburger menu on the page thumbnail and click delete page.
Tip: See if you can figure out how to get the promoCard component to update its state based on the flight displayed. You’ll want to create a new variable called cardDisplayed.
There you have it! Your very own Boarding Pass app. If you downloaded the iOS App, try opening the prototype and interacting with it on your iPhone; it should feel just like the real thing.
Well done for following this tutorial through to the very end. You should now have a thorough understanding of how to create your own prototype in Atomic. If you have existing assets in Sketch you can import them using the Atomic Plugin for Sketch, or design natively in Atomic if you wish.
Questions? Comments? Leave them below or reach out to me on Twitter (@femkesvs).
Pixel art is often viewed as just a retro style of graphics made for the purpose of nostalgia; a throwback to the early days of video games. However to me, and many other lovers of pixel art, it’s the precision, intricacy and aesthetic born of meticulously placing each pixel onto a miniature stage that truly makes it a wonderful and fascinating art form–one that belongs just as much today as it did yesteryear. Outstanding pixel artists often remind me of artisans who create tiny ships in tiny bottles; achieving a lot with a little is always impressive.
Just as pixel art is an exacting art form, so too can it be helped along by equally exacting applications. Adobe Photoshop has been a common application of choice for pixel artists for a long time, but there exist today some fantastic alternatives, and those designed expressly for pixel art arguably offer the most.
In this article we’ll be looking at five alternative applications for pixel art, and the tools they include that can help pixel artists along. Some of the key types of tools we’ll be looking for are: selecting and resizing tools that don’t add anti-aliasing, access to pixel art color palettes, pixel friendly shortcut tools for things like gradient creation and dithering, help with tilemap creation and animation, easily accessible color selectors for quick changes while drawing, pixel friendly shape drawing tools, real size preview pane, among others.
As far as deciding which software and feature set is “best” for pixel art, it goes a little further than just confirming the inclusion of the most commonly sought after tools, because there are roughly three subsets of pixel art creation to consider:
Seamless tiles for games
Sprites & animation
Whether an application is suitable to you can depend on which of the above types of pixel art you do. As we go through these alternatives to Photoshop for pixel art I’ll try to fill you in on which applications have features well suited to each area.
The beauty of dedicated pixel art applications is they tend to be very
inexpensive, so you don’t even really have to choose a single application you want to use. You could get every application on this list
and still have only spent $23.99, coming in well under our series per application price cap of $100.
Let’s start taking a look at what we have to play with!
1. Pyxel Edit
First cab off the rank is Pyxel Edit. I’m talking about this program at the top of our list, despite its current beta status, because it has strong tools for all three of the pixel art areas we described in the introduction to this article–something quite rare.
It includes absolutely fantastic tile tools, (not only for
seamless tile creation but also full tilesets and even exportable tilemaps), it has animation tools that give you all the essentials, and it allows you to create complete artworks as well. This is software built from the ground up with pixel artists, and in particular game artists, in front of mind.
Pyxel Edit has a lot of great features, but to me its tile creation tools are the real standout, so if you’re involved in game development this might be of particular interest to you. You can define tiles as you go
along and place multiple instances of them anywhere in your document. Then if you paint on one instance of a tile all other instances are updated in real time. This is very helpful for creating seamless textures as you can place tile instances next to each other and paint right over the seams.
Instead of painting over the seams between tiles, you also have the option to lock your pencil to only draw within the constraints of the tile you started on. And with the offset tool you can click & drag to shift the contents of an entire tile, with the displaced pixels wrapping around to reappear on the opposite side of the tile.
A big benefit of Pyxel Edit’s excellent tile system is you can see how
your tiles will actually look together in a real level, instead of working on your game art in a vacuum. You can watch this process in action in the video below.
Pyxel Edit’s tile functionality means you can also use it as your main level design
tool if you choose. It has the ability to export
your tilemap data in JSON, XML or TXT format so, depending on the game
engine and toolset you use, you may be able to load this data directly into your game projects. For example, you can use this importer addon for Unity, Haxe has an importer, and I understand Phaser has Pyxel Edit importing baked in.
As well as the great tile editing tools, Pyxel Edit checks almost all the boxes for the most commonly required tools for pixel art. It provides a 100% scale preview in the sidebar, it has a “clean 1 pixel line” setting for drawing lines you don’t have to painstakingly tweak afterwards, it has rectangle and ellipse tools, easy color picker access with right-click or ALT+left-click, great color palette management with classic palettes preloaded, and very good selection tools. It also autosaves your work as you go along.
and movement of pixels is made very easy in Pyxel Edit with a handy set of shortcuts.
Hit S to select an area, CTRL to move a selection of pixels, or CTRL+ALT to duplicate and move those pixels. When working with tiles you can also double-click any tile with the Select tool active to select the whole tile, making it easy to duplicate frames for adjustment.
Unfortunately, however, the software doesn’t seem to have live mirroring, (though you can flip selections horizontally or vertically), or any type of dithering tools at present. Hopefully we’ll see these features added as the project moves through its beta phase.
Another really standout set of features in Pyxel Edit is its color management tools, in particular its automated suggestions of different colors, which are generated by adjusting your current color’s shading, lightness, saturation and hue:
color suggestion tools are so useful I wish they were in every
graphics application. Just by selecting a good “seed” color right at the beginning of
your project you can get a glimpse of how your entire color palette
Another great tool in Pyxel Edit is its Color Replace tool, which allows you to easily change your mind about colors after you’ve put them on the canvas. It will replace any pixels of the current secondary color, (equivalent to Photoshop’s background color), with the current primary color, (equivalent to Photoshop’s foreground color). So you just sample the color you want to change into the secondary slot, choose your new color in the primary slot, and draw over the pixels whose color you want to alter.
You also get some help with the creation of gradients: choose two colors in your palette and Pyxel Edit can generate a selection
of graduating colors in between them. With these colors you can then paint out your gradients.
I’ve focused primarily here on Pyxel Edit’s tile and drawing tools, but it also includes solid animation tools. The layout for animation is the same as for tile creation, whereby you work in a grid layout and place a frame of your animation into each one of the grid squares. You can create multiple animations within a single document, and you can control the time each frame in your animation is held. You can also turn on onion skinning, however it can only be used to show
the frame before and after any particular frame.
And finally, if you don’t want to create either a tileset or animation, rather you want to create a single artwork, you just select the “Single image document” option when creating a new file.
Pyxel Edit is a great tool, especially for people involved in game dev, and it can be picked up for $9 while it’s still in beta. It runs on Adobe Air so natively it only works on Mac and Windows, however I’ve found it runs quite well on Linux via Wine also.
Platforms: Mac, Windows, (also works via Wine on Linux)
Price: $9 (Currently in beta)
Aseprite is the favorite tool of a great many pixel artists, and with its outstanding range of pixel art specific tools, that’s for good reason. Everything about Aseprite is 100% focused on pixels–even the UI itself is done in pixel art style.
Where Aseprite shines is as a tool for sprite creation and animation. It has a powerful layer and frame based animation system with several features that are not present in many pixel art focused applications.
There are many animation features in Aseprite, too many to list here, but I’ll give you a quick rundown. You have the ability to move multiple frames in your sequence to a new spot in the timeline, copy and paste a number of frames at a time, set onion skinning to show as many of your previous and next frames as you choose, loop or reverse sections of your timeline, move and copy frames (all layers) or cells (selected layers within a frame), and control frame duration. You can read about the full list of animation functions in Aseprite’s animation docs.
As well as the animation features, all the most essential tools for pixel art are present in Aseprite. You have a 100% preview window that floats over your main window, a “pixel perfect” mode for drawing clean lines, great color palette management with the ability to drag & drop swatches to reorder them, easy color picking by holding ALT then left mouse clicking, filled and empty ellipse tools, filled and empty rectangle tools, and a series of really fantastic selection tools including rectangle and ellipse marquees, magic wand, lasso tool and polygonal lasso tool.
On top of that it has quite a long list of super useful drawing tools. For example, with the Contour Tool you can draw an arc or partial outline and it will automatically be closed and filled for you. With the Polygon Tool you can draw out shapes with as many straight sides as you want and it will be automatically filled. With the Spray Tool you can add randomized speckles.
With the Curve Tool you can draw pixel perfect curved lines with a method comparable to using bezier curves. With the Jumble Tool you can randomize the location of an area of pixels to rearrange them. And with the Blur Tool you can generate pixels around the edge of a shape that blur it with the background color.
While drawing you can activate either horizontal or vertical symmetry modes, great for things like character faces. However you’re not stuck with said symmetry being around the center of your document. With either mode activated a line appears on your canvas and you can shift it to any position and draw your symmetrical shape there.
of Aseprite’s coolest features, in my view, is the “Shading” ink mode which allows you to
select a series of colors and use them all to automatically layer
shadows and highlights onto a shape. It also has an alpha compositing ink
mode which allows you to blend colors together, and an alpha lock mode to
enable painting only inside existing shapes on a layer.
Aseprite does focus on animation, but it’s not without tile creation tools. It has an excellent tiled mode, whereby you can have an image repeat itself horizontally, vertically, or in both directions, allowing you to draw directly over seams to create seamless tiles.
Aseprite also has very useful color mode settings that allow you to choose between RGB mode for full color images, grayscale for black and white, or indexed mode where your colors will be confined to those in the currently active palette.
you draw in indexed mode any color you choose will automatically
replace itself with the closest color in your active palette. If you
draw in RGB mode then switch to indexed mode your image will be converted to
use colors from that palette only. This can be a great way to allow yourself to draw with a little more freedom, then refine your color palette down to be more crisp at the end of the process.
Aseprite has a color replacement tool, but in contrast with Pyxel Edit’s color replace tool where you draw over the pixels you want to update, in Aseprite you just provide two colors and it will auto replace all pixels of the specified color at once. I personally feel both methods have advantages.
Aseprite was originally GPL so you can still get that open source version free of charge from GitHub, but it won’t have the latest features. The most recent version is available for $14.99, and works across all three desktop operating systems.
Piskel is very straight
forward and to the point sprite and animation creation software. If you
want to get in and out fast this is a great solution. It’s so quick, in
fact, that it only takes about two and a half minutes for the essentials to be
explained in this video:
The focus of Piskel is definitely sprite creation and animation as opposed to tilesets or complete scene creation. It has a relatively limited set of tools, but it also has a direct approach that can be very efficient for sprite creation and animation. It’s made particularly convenient given it has a fully fledged online version, meaning you can access it anywhere.
After drawing your initial character sprite, animations
are created easily by just hitting the Add new frame button to the left of the canvas and
adjusting an FPS slider to control your speed. Onion skinning is
included, which is always a valuable feature in animation.
One thing to bear in mind is Piskel’s pen tool can only be set
to between 1px and 4px in size, meaning this software really is best for
focusing on sprites and not large pieces like landscapes where you
want to paint large areas such as skies quickly.
Of the common pixel art features you always like to have access to, Piskel includes a 100% preview in the right sidebar, it has rectangle, ellipse and stroke/lines tools, a vertical mirror pen for symmetrical drawing, and ellipse and shape selection tools. It also has a dithering tool, something very helpful yet surprisingly rare in pixel art applications.
Additionally it has a really great “shape selection” tool, which will identify any block of connected pixels of the
same color. It’s comparable to a magic wand tool, but is a little
simpler to use and also allows you to drag the selected shape around immediately after selection without needing to
switch to another tool.
well as a regular fill tool, Piskel also has a modified fill tool that will
alter the color of all pixels that share the same color, whether they’re
connected to one another or not. This is yet another approach to color replacement, the third we’ve seen in our article so far, and something incredibly helpful in
those moments when you’re fine tuning to get just the right color.
fantastic tool is the lighten/darken tool which semi-automates the process of creating highlights and shadows. Draw directly over existing
pixels with this tool to create highlights, or hold CTRL to instead create shadows. You can
either progressively shift the color of a pixel as you draw back and
forwards over it, or you can hold down SHIFT to ensure the color is only
tinted or shaded one step at a time.
Piskel describes itself as an online app, which can be very convenient, but if you’d rather work offline you can also get desktop versions for Linux, Mac and Windows.
GIMP is known primarily as an image manipulation program, so it’s perhaps ironic that I didn’t recommend it in our series entry on photo editing software but I am recommending it here. I personally find it to be fantastic for pixel art, with the right setup. I based my own setup on the video you see above, which is quite old now, but still an excellent starting point for pixel art in GIMP.
GIMP doesn’t have some of the pixel art specific tools that dedicated software like Pyxel Edit or Aseprite have, but it does have some general tools that I find very helpful when doing pixel art. For example, GIMP’s selection tool. Once you draw out a selection the marquee has transformation handles that make it easy to select the exact pixels you need. Its floating window mode is something many people turn off right away, but with it active you can create a second view into your document at actual size and nestle it right into your layout.
GIMP’s color indexing mode can also be very useful for pixel art. If you’re under time pressure and need to produce fast, you can draw something with a more traditional painting technique in RGB mode then convert it to indexed mode to have it translated into a restricted color palette.
I scaled it down, with no interpolation, to get it to a size where the pixels will be nice and chunky. Then in the main application menu I went to Image > Mode > Interpolated and allowed a 256 color palette to be generated for me, with no dithering. Then I scaled the image back up, again with no interpolation, to the original size. Here’s the before and after:
This could still use some cleaning up to give it the crispness expected from pixel art, but it’s certainly off to a running start. Strictly speaking this is not pixel art, but for large projects like games you might need to create such a large number of assets that some shortcuts here and there are helpful.
You can also do things like switching in between RGB mode and indexed mode while working in order to speed certain things along. For example, you can draw out a gradient while in RGB mode, which will transition smoothly between the colors. Then you can switch to Indexed mode and enforce a color palette to get a pixel art friendly gradient effect instead.
Another helpful feature for game pixel artists is GIMP’s new tiling symmetry mode. You’ll need version 2.9.5 (compiled from source via Github) to access this. What it does is allow you to repeat whatever you are drawing every certain number of pixels. So if you are drawing a 16×16 tile, set the symmetry offset to 16px on both axis then you can ensure you have seamless tiling as you work:
GIMP isn’t a dedicated pixel art application, but it has a lot to offer and even if you don’t use it as your primary design software, you still might find some of these features slot right into your workflow.
Krita might not seem like the obvious choice when it comes to pixel art but in my experience it can be fantastic. Out of the box it includes a selection of dedicated pixel art brushes, including a square brush, a round brush and a dithering brush.
A big help is the wrap around feature, making seamless tile creation a smooth experience. Just hit W on the keyboard and your canvas tiles in both directions, allowing you to paint over any seams. Another thing I find helpful in Krita is having a fully fledged set of high level color selection tools for fine tuning of color palettes.
Krita also has an excellent alpha locking system, allowing you to do things like drawing out a shape on one layer, then nesting other layers so their content is only visible through the previous layer’s shape–a sort of masking, essentially. This makes adding shadows, highlights and details a much easier process, and allows for a workflow uncommon in pixel art apps.
Part of why I find Krita enjoyable for pixel art is its excellent support for a drawing tablet, while on the other hand I’ve found some pixel art applications have lag when using a tablet, or just overall feel more mouse and keyboard oriented.
Index painting is also available in Krita as it is in GIMP, with the advantage it can be used along with non destructive filter layers. However the setup for this technique is somewhat complex, as detailed in this tutorial.
And another feature Krita has is some basic vector tools you can use to draw out irregular shapes then have them automatically stroked with your selected pixel brush, a technique you can see used in the YouTube video at the start of this section. This is functionality you won’t typically find in pixel art applications.
Krita does have basic frame by frame animation tools but they’re still very new, and probably not the number one choice for pixel animation just yet. But Krita development is always moving fast, so keep an eye out!
For the creation of complete artworks however, Krita is a real prospect.
In my personal experience, the two strongest applications on this list are Pyxel Edit and Aseprite, and I don’t feel you can really separate which of the two is “best”. This is because if you are involved in game development and the creation of tilesets you’ll find Pyxel Edit’s specialization very helpful. But if you’re a character and animation artist, you’ll find Aseprite’s specialization very helpful.
Both applications can do some of what the other specializes in, though I’d say Pyxel Edit is probably stronger in animation than Aseprite is strong in tileset creation. However Aseprite is probably stronger for self contained artwork creation than Pyxel Edit. Overall I’d suggest if you’re involved in multiple types of pixel art, using the two together might serve you well.
I would class Piskel as a great application for when you want to get something done fast, or for when you’re on the move and need to access a quality pixel art editor online.
As for GIMP and Krita, in reality they can’t offer the same set of pixel art specific features that the aforementioned applications can. However they do offer a whole gamut of other features, the kind that come with software meant for fully fledged image editing or digital art. Whether you want to use one of these programs for pixel art will likely depend on how much you enjoy each one’s overall toolset and UI.
For me I particularly enjoy that in each application I can use a pencil brush and my drawing tablet to sketch out a rough draft of what I want to create as though I were working on paper, then I can draw my pixel art over the top. And GIMP’s ability to process images into indexed mode is particularly useful. Neither Krita nor GIMP are really top tier options for tile creation or sprite
animation, but they can be great for drawing self contained artworks.
That brings us to the end of our roundup of Adobe Photoshop alternatives for pixel art. With a bit of luck you’ve found an application in this list that you’re considering taking on as your new favorite pixel art editor!
Up Next: Animation
Adobe has two animation tools in its suite at the moment: Animate (formerly Flash) which allows for skeletal and keyframe based animation, and Photoshop which also allows for keyframe animation. However, just as with all the other software specialty fields we’ve looked at so far, there are several options for you to choose from when it comes to animation.
In the next article we’ll be checking out some of the best software available for skeletal, keyframe, and frame by frame animation. Some of these programs have fantastic specialist tools that will make your life a whole lot easier while creating animations.
Our popular web design course, Practical Web Animation, gives an in-depth four-hour introduction to animating buttons, images, and other web elements. And recently we’ve updated it with three new bonus projects to help you with responsive animation, image animations, and CSS sliders.
What You’ll Learn
The days of animation-heavy websites are fading, but there is still something to be said for a site with small amounts of subtle, eye-catching motion to help users interpret interfaces.
In this course, Envato Tuts+ instructor Craig Campbell shows you practical ways to create animations for buttons, pricing tables, and other web elements, using concise CSS and jQuery to do so.
Watch the Introduction
Take the Course
You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+.
Plus you now get unlimited downloads from the huge Envato Elements library of 200,000+ photos and 26,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.
If you’re in a hurry and don’t have time to take the course, why not try one of the ready-made CSS animations on Envato Market. You can find hover effects, spinners, loaders, and much more.
So what exactly can you download? You’ll find a selection of beautiful photos, such as this stunning underwater shot:
You’ll also find striking portraits, creative close-up shots, landscape images, and work photos suitable for illustrating a report or proposal:
And it’s not just images you can download. There’s also an amazing Photoshop action that allows you simply to brush onto areas of a photo and play the action to turn those areas into a powerful sandstorm effect.
And on top of all this, you can download an elegant script font, a flyer template, and a PowerPoint presentation template.
How to Unlock Your Free Photos
To access the free photos and design assets, all you have to do is go to the launch page and enter your email address. Then you can download as many of the free files as you want.
If you like what you see, you can also explore the full range of more than 200,000 stock photos now available on Envato Elements, or browse the thousands of web templates, 3D renders, graphics and more that come with a monthly subscription. But if it’s not right for you, no worries—you can just enjoy your freebies, with no obligation to buy anything.
Let’s talk about MVPs (Minimum Viable Products) and how you, as a Product manager or User Experience professional, can work with tight deadlines and budgets whilst still delivering a great product.
What is an MVP?
You’ve probably come across the acronym MVP before–almost certainly if you work in the tech industry–and despite being a controversial three-letter word, an MVP is probably one of the most important steps on your way to building a great product. The main goal of shipping a Minimum Viable Product should always be “putting it in front of customers to start validating your assumptions”.
As a team, you need to gather your strengths and focus on creating a shared understanding of the business vision and goals. You need to identify the problem you’re trying to solve and work out how you’ll organize to, as quickly as possible, start learning about what customers really want and how they’ll help you drive those goals.
The Doughnut Analogy
When I began talking about MVPs in classes, I would use the analogy of a simple plain doughnut (that would be my MVP) and a doughnut full of chocolate, sprinkles and all the goodness possible (a later iteration of the product).
Nowadays, the more I work with teams and the concept of MVP, especially now that I have a Product role, I find myself questioning this analogy. Building MVPs to validate assumptions may in fact mean that you were wrong to start with, and the next iteration isn’t even a doughnut; perhaps it’s a plain waffle?! Granted, it would still be plain, and you’d again need to go through the process of validating it, but it would no longer be a doughnut.
So…What Isn’t an MVP?
For this I’m going to borrow an illustration from Henrik Kniberg, explaining what an MVP shouldn’t be.
Henrik describes two different approaches that share the same vision: a car. Now if the problem you’re trying to solve is transportation, would you, as a customer, go anywhere with a tire? Definitely not with a tire, but certainly with a skateboard.
Henrik defends the agile, incremental way of delivering products but states that every iteration should be a usable/testable product. Obviously, a skateboard is far from being a car, but at least you have your customers trying your product much earlier in the process and feeding back so you can start learning and thinking about the next iteration.
You shouldn’t be spending a lot of time looking at design or making it technically great – you don’t want to make it perfect to begin with, but instead you should build just enough to validate your business hypotheses.
To Sum up, an MVP Isn’t..
A product that can’t be used and tested by customers or early adopters from day one.
A product that doesn’t allow you and your team to learn and validate assumptions.
A product that isn’t solving (or trying to solve) customer problems.
In This Article
In this article, we’ll cover the following topics–they’ll give you some tools to start thinking about what your MVP should be:
Focusing on solving customer problems
Strategizing on building an MVP to start with
The importance of tagging
Learning with data and insights
Focusing on Problem Solving
Ultimately, when building products, your main goal should always be solving customers’ problems. If you’re not solving their problems, and you’re not bringing something new that fits in with their daily routine, they most likely won’t be using your product. With the surge of design techniques, UX teams are gaining tools to get to know customers and get to the bottom of what they want earlier in the process.
There are a number of techniques you and your team can use to get to know your customers, and understand how you can solve problems:
Focus groups. If you’re building a new product, invite a group of people that are using your competitors’ products and ask them about pain points, plus things that they really like, and try to get a good understanding of what they’d change and why. If you’re improving an existing product or adding a new feature, why not invite your own customers and ask them the same questions? Focus groups are a great start for developing a good understanding of what your customers may want from your product, but bear in mind focus groups can be a bit biased; there’s always someone with really strong opinions that may influence others, so you should try to read in between the lines.
Ideation workshop. Gather your team (stakeholders included) and expose some of the pain points found. You should also try and print as much as you’ve learnt so far about the defined vision and business goals and pin these up on the walls so everyone can clearly see them. In these sessions, ask everyone to sketch as many solutions as they can think of for the problems you’re trying to solve. You’re looking for quantity, not quality.
Prototyping and user testing. Ideally, you should be prototyping at least once a week. Nowadays, UX teams are more agile and UX designers tend to spend more time sketching and user testing paper prototypes or low fidelity wireframes than spending longer periods of time behind a computer making decisions on their own. Get your UX team to use prototypes as early as possible in the process to get some juicy feedback from users. Guerrilla testing is a great and effective way of testing early designs and it takes almost no effort.
Strategizing on Building an MVP to Start With
So, you did a lot of testing while trying to design the best solution. You ran weekly guerrilla sessions, you took your designs to the lab and you’re confident you’re on the right track.
Still, even if you’ve only tested with users of your product, they’re a small percentage of your audience and they were subject to a testing environment (hardly neutral). Testing with customers earlier in the process is invaluable, but you’ll want to get your product out there for a bigger audience to test.
Strategizing on building and launching a Minimum Viable Product is the next best thing to validate your assumptions and continue building up on what you’ve learned so far.
A good way to start thinking about your MVP, is to look at the roadmap you’ve built in previous sessions and focus on things that solve customer problems.
Once you’ve done this, ask the question: what can I build with the minimum effort that helps me validate this product?
This is where I still struggle; my UX heart (body and soul) always tells me to try and get as much out as possible, I want to build a seamless experience from day one, for every user.
As a product owner, with a tight deadline and a budget on my hands, I want to build just enough to make sure we are building the right thing, and I truly believe this is a good product call.
The Importance of Tagging
Nothing. Can go out. Without tagging.
Well we’ve said it before, right? The goal of building an MVP is to learn and iterate. There’s no way to learn (I mean to really learn) with your customers unless you have a system in place that allows you to track what customers are doing with your product. You need that precious data to make informed decisions. You can do qualitative research and ask your customers how they feel about your product, but we know this may not be enough.
You’ll need to make sure you build tags into your MVP that will help you understand how your product is performing against your KPIs (Key Performance Indicators) and measure your assumptions.
Analytical (or tracking) tags are often supplied by third party providers such as Google Analytics to help us integrate our product (website, mobile app) with their tracking tools. Tracking tags are no more than a piece of code that you’ll have to embed in your product’s source code to send whatever customer actions you want to track and make it easier for you to visualize data.
Let’s say you want to track the number of times a certain button is clicked; the provider will ask you to add an event tag to the button’s source code to make sure a tag is fired to their tool every time a customer clicks that button. Their tool will then register this action along with other actions you define to give you a detailed view of what customers are doing with your product.
There is a range of tools you can use to track your customers online. Start by choosing the right one for you and your business needs, and liaise with their customer service team to get some help building tags into your product:
Optimizely (you can use this for experimentation with A/B or Multivariant testing which I’ll cover later in this article)
Learning With Data and Insights
Once tracking is in place and your MVP is out, you can start looking at what your customers are doing with your product.
If you’re new to analytics, there are a few things you can do to get your head around data and what you should be looking at. Google has a few introductory videos to get you started, and you can also read the book Lean Analytics. These will help you understand actionable metrics and what to do with the data you’re getting.
If by any chance you’re lucky enough to have a team dedicated to insights in your company, they’ll be able to help understand the data or even better! They’ll most likely be able to build reports with the key metrics you want to follow to make your life easier.
Whatever the means are for getting this data to you, the whole team should have access to it. You should all be discussing the outcomes and what’s next for your product. How’s customer satisfaction? Is it driving the goals you’ve set?
If the answer is yes, then great news! Your previous assumptions were right and you did a great job. If on the other hand your MVP isn’t driving the metrics you expected, understand why and agree on what you should be doing next (also, say grace that you decided to launch an MVP before allocating tons of resources and money to a product that wouldn’t have been as successful as you initially thought it would).
If your customer base is good enough, you should encourage A/B or Multivariant testing. This will allow you to, throughout the life cycle of your product, to test different variations and make sure you keep driving those metrics.
You can make changes to your interface and see what works best for your customers – try small changes like changing the copy on a title, or a button color, and have two versions of your product running side by side to analyse results. You could also completely change an interface; Optimizely is just one example of a tool that can help you run these experiments. Set the parameters you want to test and the percentage of customers you want to show the new version of your page or product, and track results.
Go Forth and Iterate!
It’s time you started iterating and building on top of what you already have. Ideally, your roadmap is prioritized by now and in a way that you can continuously release product increments. Now is the right time to start mobilizing your team to think about the next drop.
Remember, each iteration of your product should be usable (the “viable” in MVP). It should seek to validate or challenge your assumptions, and in a way which gives you measurable data. Good luck using MVPs in your product development workflow!
Conferences and networking events are one of the best ways to promote your business and establish relationships with potential clients as well as business partners.
An essential part of any successful event or conference strategy is setting up a website to promote it and to create a resource that explains all the benefits of signing up for your event.
Why You Should Use an Event Theme
Even though you may already have a website for your business, setting up a separate website for your event has a couple of important benefits:
It gives your visitors a single call to action to focus on, which increases sign-up rates.
It reduces the chances of your visitors getting distracted by a page or a post that has nothing to do with the conference you’re trying to promote.
By creating a separate website, you will be able to build anticipation and excitement for the upcoming event. And selecting the right theme for your event plays a crucial role. In this theme showcase, we feature our best-selling WordPress themes made specifically for event websites:
A good WordPress events theme will have an appealing design and it will also make it easy to publish useful information for your attendees, such as the event location, session schedules, speaker profiles, as well as the ability to manage registrations and mobile responsive design.
Best-Selling WordPress Event Themes
If you need to build a website to promote and support an event of any type, choosing one of the themes from this collection will give your project a great head start. Here’s our current top 15, one of which is sure to pique your interest:
Released for sale earlier this month (at time of writing) Event Champ comes with so many features and add-ons that it’s not possible to list them here. Its event finder is great for any multi-event website, allowing for category, keyword, location-based (and so on) filtering for whatever event you can dream of. Check out the details for more information about what’s in the box.
Recently updated, VentcampWP is a very complete package; shipping with a range of custom contact forms, a schedule manager, speaker and sponsor sections, and comes with integration for the most popular eCommerce (WooCommerce and FooEvents, EventEspresso, Tickera) extensions to handle tickets sales. Its default homepage displays a very tight business theme, but it also comes with some great alternatives if you’re looking for a different aesthetic.
First on the list is Eventum, a stylish multipurpose WordPress event theme that is perfect no matter what type of event you have in mind. This highly customizable theme offers all the essential features for an event website: managing tickets, venues, speakers, sessions, sponsors and everything else required to have a successful event.
Additional features include five homepage variations, event countdown, integration with Google Maps and MailChimp, four color schemes, and a Visual Composer Builder that allows your to take your website to the next level.
Meetup is a simple and easy-to-use theme with a clean and elegant design and plenty of features. It offers five different homepage layouts, all of which have plenty of sections for speakers, an event schedule, FAQs, a registration form, and a location map. Pre-built page templates include a separate blog page, gallery page, speakers page, parallax backgrounds on any page and the ability to include a video background.
Other features include thorough customization options thanks to Visual Composer Builder, unlimited color schemes, support for Google Fonts, and responsive design.
Eventime is a modern, multipurpose WordPress event theme with an impressive feature set. The theme includes three different demo designs which can be easily imported with one click and dedicated support for speakers post type, schedule post type, event countdowns, location maps and integration with Revolution Slider to make a great first impression on your visitors.
Eventime also includes support for Google Fonts, Visual Composer Builder, WooCommerce, the ability to sell tickets, responsive design, and much more.
Venue X is a simple events theme for WordPress that’s perfect for small scale event venues, concert halls, arenas, theaters, and centers. With this theme, you can create, list, and organize events. Also, readily sell tickets, showcase galleries, news, and media. You can create a full-blown website or a simple one-page website, depending on the size of your event.
This theme’s features include responsive design, unlimited color schemes, Google Fonts support, page builder with 28 fully customizable blocks, and a unique header builder with more than 40 header options to make an eye-catching design.
iVent is a responsive, multipurpose WordPress conference theme built for any kind of event, summit, meetup, workshop, or music festival with integrated ability to sell tickets for your event. iVent has a very elegant, modern design and features different sections for speakers, event listings, countdown, and schedule.
This theme comes with plenty of advanced features which include five homepage variations, two custom post types, compatibility with Events Calendar Plugin, Live Theme Customizer, and is SEO Friendly. It also includes support for WooCommerce, Slider Revolution, Visual Composer, and other popular plugins. The icing on the cake is the extensive custom shortcodes which allow you to develop attention-grabbing, interactive content.
Electron is a perfect theme for anyone looking to organize a music event. It has a bright and minimal design that includes pre-built page templates for all the important pages of your website as well as a landing page, sales page, and a customer support page. Electron has a variety of design options which include a page builder, unlimited color schemes, integration with Tickera events and Eventbrite events.
With two attractive menu styles, homepage demos, dedicated sections for event listings, highlights, and speakers, Electron is sure to bring all the right attention to your musical event.
The Event Management WordPress Theme makes it easy to organize multiple events such as conferences, exhibitions, trade expos, award ceremonies, annual functions, seminars and many others.
The theme features an elegant design focused on bringing attention to key details such as event schedule, speakers, event countdown and location. What’s more, this theme allows you to easily sell tickets, handle registration, and keep attendees updated via dedicated photo galleries and a blog section. This theme is fully responsive and includes plenty of customization options, two homepage variations, grid and list view of events, and much more.
Eventer is a modern and interactive theme with a high focus on encouraging visitor engagement. The theme features a responsive design that’s easily customizable, registration forms, an da theme customizer.
It includes a variety of sections on the homepage, such as an event timeline, speakers, location, reservation information, testimonials, and a sponsors section. Grab this theme to make a professional event site and start getting attendees registered.
Unica is a WordPress event theme with a festive and elegant design. It’s perfect for corporate events, weddings, and any other type of social gathering events. Unica features easily customizable design with four different homepage layouts, built-in Revolution Slider, Essential Grid, PO Composer, and Visual Composer Builder.
Other features include custom widgets for Instagram and Flickr, testimonial section, gallery section, custom shortcodes, ad section and more. Use this theme to build your event website to help get your group together for your special gathering.
iEvent is a versatile WordPress event theme that gives you the option to create a one-page or a multi-page website, depending on the size of your event. This theme has a modern and professional design suitable for any type of event or conference.
It’s fully responsive and offers seven different homepage styles, 10+ header styles, and unlimited color and font combinations to build just the event site you’re aiming for.
Thanks to the Visual Composer Builder you can build any type of layout for your pages while the interactive exhibition map and event schedule will catch your visitors’ attention.
The Meetup is a conference and event WordPress theme with powerful features like Event Management, Speaker Management, Team, Organizers and Sponsors management. This theme offers the ability to have video and parallax backgrounds, intelligent section management with 35+ different sections to choose from, unlimited color schemes, built-in shortcodes, several different blog and event styles, and much more.
Meeton is a WordPress theme suitable for companies as well as event management websites. It features a clean and elegant design with responsive layout and special features like appointment forms, services, event planner, schedules, pricing plans and other pages.
Meeton offers three homepage layouts, five different speaker layouts, plenty of customization options thanks to the theme options page as well as Visual Composer Builder, and integration with the Timetable Responsive Schedule plugin. Use this theme to build your event website and launch your next conference or meetup.
TheEvent is an easy-to-use theme with event management features, speakers, schedule, FAQ, registration, booking, and an online ticket system. This theme has a responsive design that’s fully customizable via the theme control panel and Xpress page builder. Y
TheEvent comes with multiple homepage variations, PayPal integration, MailChimp integration, cross-browser compatibility and fast loading times. On top of that, TheEvent supports a variety of widgets to save you tons of time with content building. ou can create a great event site with this theme!
Best Practices for Event Websites
When it comes to building a WordPress event website, choosing a professional WP event theme, and then installing your chosen theme is not enough. Aside from making sure your website is responsive and loads fast, there are several different things to keep in mind to ensure your event is a complete success.
The goal of your event or conference site should be two-fold:
Create awareness for your event
Capture ticket sales
With that in mind, here’s our list of best tips and practices for event websites:
1. Insert the When and Where In Plain View
Even though some of your website visitors know when and where your event is taking place, it’s safe to assume that the majority of them have no clue. To reduce the chances of your visitors leaving your website in frustration, it’s crucial that you place this information front and center, as well as include a sign-up button or a form. You should also include a brief tagline that describes your event like in the Meetup theme.
2. Create a Brand for Your Event
Make sure your event is memorable by designing a special logo for it and use it not only on your website, but in every social media update, and on flyers and posters to promote your event. Make sure you use consistent colors and fonts to further improve the impression of your event.
3. Have a Clean, Organized Design
Don’t clutter up your page with unnecessary elements. If you need multiple pages, then keep your menu with only the links you need for your event. Highlight your speakers, signup dates, costs and only your most important information. Present your event details in a way that’s logical for a first-time visitor who’s just become interested in your event.
4. Add Plenty of Calls-to-Action
An event page with no distinct CTA is a wasted effort so make sure to include multiple calls-to-action that clearly stand out from the rest of your website. Don’t be afraid to use a bright color like the Eventer theme does, to draw attention to your CTA – whether that’s a link, a button, or a form that prompts the user to buy a ticket, apply as a sponsor or a speaker, or simply entice them to learn more about your event.
5. Include Speaker Pictures and Bios
Great speakers can do wonders to attract visitors and attendees to your event. The event page should show their faces and list their credentials similarly to the Eventum theme. Consider creating short videos of the speakers and including them on your website.
6. Promote Your Event on Social Media With a Special Hashtag
Promoting your event on social media is natural if you want to attract as many people as possible. Be sure to include social media sharing buttons on the registration page as well as the Thank You page.
Take it a step further by creating a special hashtag for your event and use it not only to promote your event but to connect with people before and during the event. Also, consider including a link to your event in your social media bios across different profiles.
Build Your WordPress Event Website
Organizing an event or a conference is great way to boost your credibility and form new business relationships. With one of our high-quality event WordPress themes on ThemeForest and the tips above, your event will be ready for success.
Looking at recent discussions, I feel that more and more people are starting to think about ethically and morally correct work. Many of us keep asking themselves if their work is meaningful or if it matters at all. But in a well-functioning society, we need a variety of things to live a good life. The people writing novels that delight us are just as important as those who fight for our civil rights.
It’s important that we have people building services that ease other people’s lives and it’s time to set our sense of urgency right again. Once we start to value other people’s work, the view we have on our own work will start to change, too. As we rely on book authors, for example, other people rely on us to be able to buy the books via a nice, fast and reliable web service.
We apply the replace task after we’ve compiled our Sass file (check out the source files for more details).
Notice the patterns option, which shows the following:
This instructs Grunt to go through the compiled file, find instances of /**/ and replace them each with an empty string. Now all we need to do is go through our Sass partials, place these /**/ comments wherever we actually want whitespace, and let Grunt do the rest:
Grunt-replace is a really useful task for finding common strings and replacing them with something else, whenever your run Grunt. In this case it’s the perfect tool to prevent whitespace from being stripped out of our compiled Sass. What else would you use it for?