icon-document-pdficon-document-pdf-fullicon-document-texticon-searchicon-share-facebookicon-share-googleplusicon-share-linkedinicon-share-twittericon-staricon-video-camera

Content Scaling and Alignment Options

 

Working with visual content is the core of Conceptboard, that's why we provide multiple ways to add content to a board. You can drag and drop items, import from sources like Google Drive, and paste content from your Clipboard

For all import methods, our main goal is to deliver a high quality visual representation on the board. The quality is a result of image conversion on our side and the scale that is used to display the converted content. 

For example, if you uploaded a large picture from your camera to a board, without any image conversion or scaling, it would end up extremely large on the board. Especially, when comparing it with other items on the same board, like items you dragged in from the web or documents you've uploaded.

To make it easier to work in the board, we've added automatic content scaling to all board imports. The scaling does not alter the image quality or the file itself, but helps keep all items on your board the same relative size. 

Manually Scaling Items 

You can also select to scale an image to several preset sizes, or enter your own custom percent value.

You can choose:

  • 1.0x (Actual Image Dimension)
  • 1.5x (High Definition Quality)
  • 2.0x (Retina ‘@2x’ Quality)
  • 3.0x (Retina ‘@3x’ Quality)
  • Scale with custom percent

Scaling by Custom Percent

You can select a single image or multiple images to scale. Make sure to only select images and not grouped items. Hold down shift while using the Select tool, or click and drag a selection around multiple images at the same time.

 

New Alignment Options

Press S on your keyboard and click and drag a box around all the objects that you would like to align, or hold down the SHIFT key while selecting each item. Click on the ‘Object alignment’ icon in the toolbar and select the way you would like your objects to be positioned.

Alignment Left, Center, Right, Top, Middle, Bottom

When your selected objects are placed in a vertical row, click on the left, center, or right alignment option to arrange each items’ sides with each other. When your selected objects are placed in a horizontal row, click on the top, middle, and bottom alignment option to arrange each items’ sides with each other.

Distribute Horizontally and Vertically

Choose this alignment option when you would like to have an even amount of space between each object. When selecting one of these options, Conceptboard will use the first and last object in the row and give the appropriate amount of space in between them.

The Grid Layout

You can align items in a grid for easier viewing by arranging them in a grid. Click on the ‘Grid Layout’ button and choose how many columns and rows you would like. Then click on ‘arrange objects’. You can choose to ‘Leave the top left grid cell empty.’

Note: Make sure to align objects as soon as they are uploaded to the board and group all items you want to keep together.  

Retina Naming Convention

 How does the automated scaling work? Files are scaled based on the following parameters. If your file names include the retina naming convention '@2x' or '@3x' they will be scaled accordingly. 

Pixel Based Scaling

We've defined 3 rules for scaling. These only apply to the width of an image, so you can enter long screenshots without problems. 

Description Scale Attributes
 Retina '@3x" 3x filename with '@3x' OR width ≥ 3,000px
 Retina '@2x" 2x filename with '@2x' OR width between: 2,000-3,000px
 High Definition 1.5x width between 1,500-2,000px
 Original 1:1 Image 1x width < 1,500px

 

Here are some more examples of data types and their default display size after scaling: 

Data Type  Image Width Image Scaled  Default Display Size After Scaling
DinA4  landscape, 1056px 1x 1056px
DinA4  portrait, 816px 1x 816px
DinA3  landscape, 1632px 1.5x 1088px
DinA3  portrait, 1056px 1x 1056px
5MP photo  landscape, 2592px 2x 1296px
5MP photo  portrait, 1944px 1.5x 1296px
8MP photo landscape, 3456px 3x 1152px
8MP photo  portrait, 2304px 2x 1152px
Biggest ImageRelay Size 2400px 2x 1200px
Large ImageRelay  1920px 1.5x 1280px
Small ImageRelay  200px 1x 200px
Small website draft  1280px 1x  1280px
Medium website draft  1680px 1.5x 1120px
Large website draft 1920px 1.5x 1280px
'@2x' iPad draft  2048px 2x 1024px
'@2x' Macbook 13"  2560px 2x 1280px
'@2x' Macbook 15" 2880px 2x  1440px
4k displaying screenshot  3840px 3x 280px
5k displaying screenshot 5120px 3x 1706px


Please keep in mind that you can always reset the automatically assigned scale, simply by selecting your images and choosing "1x" scale from the toolbar. 

Was this article helpful?
0 out of 0 found this helpful