SharePoint Branding

Change The Design Layout Into Working HTML and CSS If your branding assignment is other than just simple modifications to the out-of-the-box SharePoint branding, it’s a good idea to make a working HTML version of the design layout. Before that we need to slice the images from the design layout in a way that it can be used in the working HTML. Slicing Design Layout Why we need to slice design layout. One important fact is to reduce the loading time of the working HTML, by optimizing repeating or stretch area with single small image to fill a larger space, and to creating mouse events with clickable image areas like navigation. Most meaningful fact is most of the image areas can be reproduce using CSS styles. Below figure shows slice tool Select the slice tool and start working with Logo and title area like below figure shows. Then double-click the sliced area, a popup will appear named slice options and start filling the form like belo...

Creating Design Layout Unlike wireframes, Design Layout are intended to be the final branding of the actual SharePoint site. creating Design Layout should include all of the things that make up a the final design, such as logo, colors, fonts, photos, resolution of the website and anything else that will appear on the final web solution. To create a realistic prototype, Microsoft Expression Design and Adobe Photoshop will help. This two design application are ideal. Below figure shows Adobe Photoshop tool used to create the Design Layout To obtain above design layout start with a new blank document. Use the following parameters for the Document as shown in the screenshot below. Before starting your design Layout leave 15px from left and right corners of the blank document for browser compatibility. This will help you at the time you create your Prototype. Now we need to create the top header section of the page. this section, we will have the Sharepoint forum ...