Design 3- Brooklyn Bridge
Design 3 | Brooklyn Bridge
Your ideal image size is 1860 x 1140 pixels for a spread (930 x 1140 for a single), but there’s no need to crop your images just match one of those numbers (This is the size of a 23-inch Apple Cinema HD Display minus the 60 pixels for the site border). The site uses dynamic resizing so you can load any size image you want, just make sure you save for web in photoshop (quality of 40% seems to be nice), because large files take a long time to load and will bum out your clients (oh, and then everyone will start talkin’ about how slow the APF sites are).
Important note about naming: Your image names cannot have spaces or characters like this: å, é, ü, ö or symbols except dash and underscore.
THIS IS VERY IMPORTANT: You have the ability to load huge images on your site. Please make a conscious decision about this and realize that the bigger the image the slower it will load. Anything over 300-350kb is big and we strongly recommended using save for web at a quality of 40% and a width of no more than 1860 pixels. It’s your call so decide what’s best for you.
If you add a logo start with 320 x 74 pixels (or around that). Use a photoshop png file and knockout the background if you want only the logo to show up.
If you want to add pictures to text pages start with 300 x 215 pixels (or around that).
Your website comes with a slideshow on the landing page (after the intro but before someone clicks on a menu item). To activate simply load images in the extra files folder under the advanced tab (you can also use FTP to do this. Put them in httpdocs–>extra and make sure you save for web in photoshop so they’re not huge (100-350 kb max)). Make sure to name them 01, 02, 03… to force a display order. Speed of the show and image positioning (center, right, left) can be adjusted in the template settings.
There are two settings for the slideshow that can be found in the template settings. Normal will give you a slideshow that fits within the picture box and full will give you a slideshow that fills the browser window.
You can also have a single image or logo display instead by loading a background image. Note: The sideshow only works when the background image is unselected.
This is the color map that will help you figure out what the different color settings control:
d3colormap (click to download the pdf)
This is a map of the template settings:
d3templatesettingsmap (click to download the pdf)
This file explains all the settings for the D3 template:
d3templatesettings (click to download the txt file)