IF YOU HAVE ANY QUESTIONS, PLEASE CONTACT US

info@8guild.com
support@8guild.com

One Page Adobe Muse Template

User Guide

2013 8 Guild Digital Design and Development

Xplicit v.1.0 created 11/29/2013

Dear User, thank you downloading our theme! If you have any questions that are
beyond the scope of this help file, please feel free to email us using email links
present at the top of the front page.

Table of Contents
1. About Xplicit template (Design brief)
2. Files included in download
3. PSD files
3.1. Layers arrangement
3.2. Fonts and Icons used
4. Adobe Muse file
4.1. Layout
4.2. Navigation
4.3. Scroll Motion
4.4. Widgets
5. Sources and Credits

2013 8 Guild Digital Design and Development

Xplicit v.1.0 created 11/29/2013

1. About Xplicit template

Xplicit is one page horizontal scrolling Adobe Muse template with scroll motion
effects and designed in flat style.
It is a tribute to modern trends in web design which incorporate following main
traits:
-

Flat colors and icons meaning no gradient, inner shadows or 3D effects

One page horizontal scrolling navigation

Parallax scrolling

Full screen adaptive background image

Xplicit has them all. Enjoy!

2. Files included in download

Following files are included in download:
-

Layered PSD files (desktop version)

Adobe Muse file with two layouts Desktop and Tablet setup and assets
folder where you find all elements linked to Muse file

Preview folder where you will find HTML/CSS/JS files exported from Muse

Screenshots folder with screenshots of all layouts in .jpg format

2013 8 Guild Digital Design and Development

Xplicit v.1.0 created 11/29/2013

3. PSD files
Layered PSD files represents Desktop layout. PSD folder includes following files:
-

about.psd

services.psd

portfolio.psd

contacts.psd

Below see the table with dimensions:

Container width
Desktop

1000px with no padding

Tablet

768px with 20px left and right padding

2013 8 Guild Digital Design and Development

Xplicit v.1.0 created 11/29/2013

3.1. Layers arrangement

Each PSD file has similar groups of layers (see Figure 1).
Figure 1. Layers Groups
Home includes top bar with social icons
and contacts, logo, titles slideshow and
scroll down button .
Navi all graphics for the menu.
About includes graphics for the respective
content sections (in other files you will see
services, portfolio, contacts).

Footer includes copyright.

All hidden features of the template like lightbox display you will find if you expand
Layer Comps Panel (see Figure 2). This is true to portfolio.psd.
Figure 2. Layer Comps

2013 8 Guild Digital Design and Development

Xplicit v.1.0 created 11/29/2013

3.2. Fonts and Icons used

In this template we used Open Sans font and its variations (Light, Regular,
SemiBold). It is free web font available through Google Fonts or Typekit
Icons used in this theme are FontAwsome http://fontawesome.io/
This is free collection of icons font you can download and use in your work.
Some icons in PSD file are incorporated as font. In order to modify them you need
to download and install FontAwsome on your system using link above.

4. Adobe Muse file

Adobe Muse CC is an application for Create and publish dynamic websites for
desktop and mobile devices that meet the latest web standards without writing
code as it stated on the official website

http://www.adobe.com/ua/products/muse.html It is part of Creative Cloud.

Adobe Muse file includes two layout setup for you, ready for further modification
according to your needs. Below you will find information how to do that.

2013 8 Guild Digital Design and Development

Xplicit v.1.0 created 11/29/2013

4.1. Layout
Layers in Muse file grouped the same way as in Photoshop file (see Figure 3).
Figure 3. Muse layers
Please note layers order. This order should
stay the same.
Content layer includes navigation and all
content.
Home layer includes everything that above
navigation.
Footer can be edited only trough Master
page
Background layer fullscreen background.

Pages
There is one Main page and Master page. Footer can be modified through the
Master page only while all other blocks are editable in Main page called Xplicit.

2013 8 Guild Digital Design and Development

Xplicit v.1.0 created 11/29/2013

Typography
Typography made with reusable Paragraph styles (see Figure 4).
Figure 4. Paragraph styles
To apply Paragraph style draw
text box and while its
highlighted click on the
appropriate style.

4.2. Navigation
To create horizontal scroll navigation we used Presentation widget from
Compositions folder (see Figure 5).
Figure 5. Presentation Widget

2013 8 Guild Digital Design and Development

Xplicit v.1.0 created 11/29/2013

Thus every content block (page) About, Services, Portfolio, Contacts is inside the
Target element of Composition (Presentation). See Figure 6.
Figure 6. Horizontal scrolling
navigation

4.3. Scroll Motion

4.3. Scroll Motion

For parallax scrolling effect we used Adobe Muse feature called Scroll Motion
(please see Scroll Effects panel Figure 7).
The idea behind this effect is to move elements of the page at different speed in
relation to browser scroll.
We used different speed and direction with different elements to create parallax
effect which is seen on initial scroll. Please take your time to familiarize yourself
with those effects.
To do so, click on the element to highlight it and expand Scroll Effects Panel.

2013 8 Guild Digital Design and Development

Xplicit v.1.0 created 11/29/2013

Figure 7. Scroll effect

4.4. Widgets
For overall information about used widgets see table below:
Navigation
Background image
About (Video)
Portfolio
Contacts (Map)

Horizontal Menu Widget

Fullscreen Slideshow Widget without prev, next buttons
and autoplay option enabled (with 1 image).
Lightbox Widget
Lightbox Widget
Lightbox Widget

2013 8 Guild Digital Design and Development

Xplicit v.1.0 created 11/29/2013

10

5. Sources and Credits

While making this theme we used third party images, icons, software and want to
thank their creators:
- Adobe Muse CC http://www.adobe.com/ua/products/muse.html
- Stock images from http://www.morguefile.com/
- Envato Authors Asset Library
- FontAwsome icons http://fontawesome.io/

2013 8 Guild Digital Design and Development

Xplicit v.1.0 created 11/29/2013

11