This PSD is an example of a responsive HTML and CSS webpage. This PSD will demo CSS media queries for 3 target screens with along with responsive assets generated from a single file.
IMPORTANT: Responsive webpages are considered an advanced output, we strongly recommend you read our online guide to learn how to create responsive webpages - learn more.
This PSD uses 3 target screens to create a responsive design to match a desktop, tablet and mobile layout. Each media query is generate from the PSD design using Responsive Screen Tags.
- 320px (mobile)
- 768px (tablet)
- 1280px (desktop)
Images, Shapes and Text
This sample uses various layer types including folders, images, shapes, text, smart objects and more to create a practical PSD design for a res
Effects and Styles
This sample uses various layer effects and styles to achieve the optimal layout. Effects are used in most common project designs and are easily managed with Export Kit.
Layout and Overflow
With Export Kit you can align your page output and hide the content overflow to create both Flush and Fluid layouts.
Testing the PSD
Use Layers views to see the code translation of each layer, or use Exports view to see the output of the document.
IMPORTANT: We recommend you enable Relative Positions and Responsive CSS to test this PSD.
Using Exports View
Export the PSD in your required environment to see how shapes are rendered in your output.
LOGIN NOW: You need to login so your progress is tracked with Online Training - click here.