CHANNEL DESIGN GUIDELINES

Transcription

1 CHANNEL DESIGN GUIDELINES How should I design my channels for the Showpad platform? 1. CREATING BACKGROUND 2. CREATING LOGO 3. CREATING ICONS 4. EDITING THE GLOBAL THEME

2 1 CREATING BACKGROUND

3 ipad A Showpad channel can be customized with your own background image. It is essential that your background meets certain requirements. The background image size has to be 2048 x 2048px (Retina). This size is required because mobile devices can be used in both portrait and landscape mode. By default, the bottom left corner of the image is anchored in the bottom left corner of the tablet, but that can be configured differently if needed px 1536 px 2048 px 1536 px 2048 px 2048 px

4 The Photoshop file BACKGROUND-IPAD.psd can be used to place/design your background image. The dimensions of this file are 2048 x 2048 px (ipad Retina) and it contains guideline layers* to give you a reference of what is visible in landscape and portrait view, taking the system s statusbar into account. * remember to hide these layers when saving to png or jpg visible space in landscape view visible space in portrait view

5 Windows Surface A Showpad channel can be customized with your own background image. It is essential that your background meets certain requirements. The background image size has to be 1920 x 1920px. This size is required because mobile devices can be used in both portrait and landscape mode. By default, the bottom left corner of the image is anchored in the bottom left corner of the tablet, but that can be configured differently if needed px 1080 px 1080 px 1920 px 1920 px 1920 px

6 The Photoshop file BACKGROUND-SURFACE.psd can be used to place/ design your background image. The dimensions of this file are 1920 x 1080 px (Windows Surface) and it contains guideline layers* to give you a reference of what is visible in landscape and portrait view, taking the system s statusbar into account. * remember to hide these layers when saving to png or jpg visible space in landscape view visible space in portrait view

7 2 CREATING LOGO

8 Examples of how much space your slice needs: Step1, the logo is placed in the background file and moved into the right position*. * recommended positioning of the logo: bottom right, bottom, bottom left anchor position: bottom right Step2, make a slice* starting from the area where the anchor position will be. slicing area * for example: if you choose your anchor position for the logo to be bottom right, make a slice starting from the bottom right corner of your background. Step3, name your slice*, hide all the other layers so the background of the logo is transparant. anchor position: bottom slicing area * for example: logo bottom right anchor position: bottom left slicing area

9 Step4, export your slice with Save for Web. Be sure to select the option Selected Slices

10 3 CREATING ICONS

11 The Photoshop file ICON.psd can be used to place/design your icon images. The dimensions of this file are 420 x 460 px. 1. Design icon with label When including your text label into your icon, you can use the entire space for positioning your icon. 2. Design icon without label When using the default folder labels of Showpad, they will be placed under the icon space (420 x 460 px). We recommend positioning your design close to the bottom* of the artboard so the icon will be displayed closer to the label *

12 You have to export the icon as a PNG file (Save for Web), to retain transparency.

13 4 EDITING THE GLOBAL THEME

14 Header color: Here you can editing the header color by a Hex-code or change it manualy with the colorslider. You can change the font color of the Company Bio text in black or white. 2. Theme Logo: Can be used to place your company logo. The dimensions are 90 x... px* * (the height is set to a maximum of 90px but the width you can modify yourself) 3. About Image: Here you can upload an additional image which has relevance to your company. (Can be your company logo or a promotional image) The maximum dimensions are 800 x 800 px