Loading video...

Join SketchCasts to get access to this full video
and our catalog of 100+ episodes.

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.

Notes

  • 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)

Author

Downloads

  • Login to see the download links.

Become a member to get access to 100+ videos and new learning material every week.

We're using cookies to help us improve our site. By using our services, you agree to our use of cookies.