sketchboard blog

Add your profile icon directly on Sketchboard

By Saiki Tanabe May 16, 2017

Direct profile icon support for users mean that you don’t any longer need to leave Sketchboard to add your picture quickly. When you add your picture, collaboration in real-time becomes more natural, and you can see the other person image moving on a board according to user’s mouse movements or while reading board comments.

User mouse movement with profile icon

Comments with profile icons

Earlier Sketchboard supported only Gravatar icons. We’ve got feedback that this was not practical when users had already uploaded, e.g., their profile images on Slack and Google, and didn’t use Gravatar. It would have been an unnecessary extra step to sign up on Gravatar, upload user icon on 3rd party service to have profile image on Sketchboard. Therefore we decided to support avatars directly in Sketchboard.

Gravatar images still work, and by default, Sketchboard uses Gravatar icons, but you can override that behavior by uploading your profile image on Sketchboard.

Add your profile picture by selecting user icon on the top left corner to change your avatar. On profile page click profile placeholder image.

Profile icon on board

Change profile icon

You can also upload your Google+ profile picture to Sketchboard. You can choose this option from the profile icon page.

Profile Page

Avatar Editor

Uploading your avatar should be simple. Therefore you can take a picture on your tablet or mobile phone and choose the area from the image. Sometimes the image needs to be rotated before using it as your profile picture.

If this happens to you and the image is upside down. Press either the left or right rotate button twice to have your image upright correctly.

Profile uploaded from iPad - not rotated

Then position and scale your image as you want, using the scale slider and dragging the photo either with your finger or mouse to adjust it correctly, and upload the result as your profile image. The white transparent area in the editor will be left out from the final result.

Profile uploaded from iPad - rotated

In case you are a technically savvy person, we have used an excellent react-avatar-editor for the job. It is lightweight, works with touch devices, and it doesn’t bundle own image editor controllers. You can implement only the needed buttons with the look and feel you need, quickly and easily.

The first batch of Amazon Icons added on Sketchboard

We have started to add some AWS icons to the shape library. We wanted to share the technical solution how we build an on the fly image resize with AWS services using symbols that you are already familiar with. The solution uses Amazon CloudFront, API Gateway, Lambda, and S3. The technical solution is described in the Serverless Image Resize with Amazon Lambda blog post. You can add Amazon shapes in your diagrams too.

Amazon elements are found from the board context menu or under the extra objects library. Open the board context menu and type ‘aws’ on search field to show AWS icons.

Amazon icons from the context menu

Amazon icons from the extra shape library

Using the elements library is simpler when you don’t know which shapes you are looking for and you can get yourself familiar with the object types. Once you are comfortable with Sketchboard, the context menu is a fast and convenient way to add and switch shapes on the board. Open board context menu by double clicking an empty board area or press space key, learn more.

You can use Amazon icons in a sketch or corporate style. Corporate style shapes are official Amazon icons. You can change the board drawing style from the board details.

Menu > Board Details

Official Amazon icons will be added more on Sketchboard later. Let us know if there are some Amazon icons that you are missing.

Switch board drawing style