Loading...

Using Align Output and Hide Overflow

Create dynamic backgrounds and multiple layout styles from a single PSD file with Export Kit. With Export Kit you can align your page output and hide the content overflow to create both Flush and Fluid layotus. You can easily create stunning backgrounds that are responsive to the user screen size in a few easy steps.

Before you use Hide Overflow and Align Output with your export, you should consider how each works.

Step-By-Step Video


Need a visual? Watch our step-by-step tutorial!

Watch more video tutorials.

Flush and Fluid Layouts

Flush refers to the content of the PSD document remaining within the document size – this happens when Hide Overflow is ENABLED.

Fluid refers to the content of the PSD document spanning outside the document size – this happens when Hide Overflow is DISABLED.

Flush: Hide Overflow - ENABLE
Fluid: Hide Overflow - DISABLED

Page Align Layouts

Align Output will allow you to align your content with the user screen to the left, center and right.

Align Output can only work if your PSD document width is less than the user screen width.

Flush Left

Hide Overflow - ENABLED
Align Output - LEFT

This will box-in the content and left align it to the user screen.

Flush Center

Hide Overflow - ENABLED
Align Output - CENTER

This will box-in the content and center align it to the user screen.

Flush Right

Hide Overflow - ENABLED
Align Output - RIGHT

This will box-in the content and right align it to the user screen.

Fluid Left

Hide Overflow - DISABLED
Align Output - LEFT

This will overflow the content and left align it to the user screen.

Fluid Center

Hide Overflow - DISABLED
Align Output - CENTER

This will overflow the content and center align it to the user screen.

Fluid Right

Hide Overflow - DISABLED
Align Output - RIGHT

This will overflow the content and right align it to the user screen.

LOGIN NOW: Get instant access to our free Online Training - click here.

Products For Android Professionals


android_pack

Android Pack

android_pack

Android Pack (6 Months)

android_pack

Android Pack

Need a custom solution?

Try our Shop!

Using the Plugin

Layer Support

Layer Tags

How To Guides

Optimization Tips

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


Responsive Multi-Page Website

A clean responsive website with multiple pages +target screens.

Start Your 14 Day Free Trial

New users get instant access to the 14 Day Free Trial with all features enabled, and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, contact us or check our FAQs for assistance.

Connect With Us

Top