16 minutes | 09 Apr 2014
Creating a website mockup (part 1)
We finish this *beginners oriented series* with a two part episode on how to create a website mockup.
- Artboards are a great way to organize your project
- You can tweak Sketch's source file to change the Artboards presets, allowing you to create folders of artboards (I'll show you how on a future episode)
- Keyboard Shortcut: R to create a rectangle shape
- To import an image just drag it to Sketch's window
- If you want to give different colors to the same text block use the color option under More menu instead of the fill tool
- The only way to crop an image on Sketch 2 (wink wink) is to mask it with another shape. Right click on the shape and select "Use as Mask"
- To use the "Background blur" create a separate shape on top of the elements you want to blur, apply the blur and transparency, and give it a tint color if you like
- After selecting an object you get some align buttons on the top left of the canvas, giving you quick access to align elements
- If you use a lot of text blocks of the same style (lets say a body/header/paragraph style) you can create a Style under the "More" tools, and clicking on the little plus butotn on the bottom
- You can add a color to the presets by hitting the plus button under the presets grid of colors for quick access
- It's helpful to create a layout grid, especially for web design. You can tweak the grid settings for your needs
- Use the "Distribute Horizontally/Vertically" to space the selected objects with the same distance from each other
- Select an object and hold the option key to see the distance across the elements (hover other objects)