Export your full page web UI mockups from Illustrator 2017 – Adobe Illustrator CC 2017 [34/45]

By | January 20, 2020


Hi, my name is Dan. In this video… we’re going to be using Illustrator
to build UI and web graphics. There’s lots of free stuff here
on my channel, please subscribe. Hit the little bell next to this
subscribe button to get notifications. If you want more, loads more. Check out bringyourownlaptop.com or check out the link
in the description. In this tutorial we’re going to
export our different screens… or our different artboards… so that we can put them into a PDF… so that we can send them off
to the client to see… or for our web designer to
maybe give us a costing on. Just a nice way to make a PDF
straight from Illustrator. Let’s go and do that now. So we’ve made our super,
stupendous, amazing designs. Now we’ve got to get them out
to our clients, to show them… or maybe to our web designer… to show them the kind of
mock-up we’re looking to do. We’re going to kind of just export the
screens with the artboards first… rather than that little
addy-baddy elements. It’s really easy to do in the
new version of Illustrator. If you’re using the earlier
version, you’re going to have to– It’s not too hard, you can
go ‘File’, ‘Save As’… and go through and save all
the different artboards… but there’s this new version. If you go to ‘Export, there’s this
thing called ‘Export for Screens’… which is really cool. If it’s on ‘Assets’, this is not
what I want, I want artboards. It’s just going to export these
three different pages separately. You can export them
together as well… and what you can decide on is
what kind of file you want. So I want all of them together– I actually want a full document, maybe
one page at the center of them… or I want them separate
pages on a PDF. What I want them to be? Where it says ‘Format’,
you can go down to PDF. That’s probably the easiest shareable
one that we can e-mail to somebody. Where is it going to go? I’ve put mine in the exercise
files, so you can see. And I’m going to click ‘Export’. Click back, relax, and hopefully… there he is there. I’ve got a desktop, a mobile,
and a tablet version. Open them up. It’s pulling the names from the
artboards that I gave them. Awesome! Lovely! And if you want to
stick them together. And you’re in something
like Acrobat Pro here… you can go over to ‘Organize Pages’… and you can say ‘Insert’, ‘From File’,
and find those other two pages. ‘Desktop’, ‘Exercise Files’. You, and you. And stick them in here, reorder them. And I’ll save this one, and that
can be just the one page document. Now, when people open it… they can go to mobile, tablet,
and desktop, all in one go. So that’s exporting the
whole look and feel. This is not the end of it. This is good for the
client to sign off… or for the web designer to get
an idea of what you’re doing… but next of all we need to… export all of the little
different pieces separately… so that we can use
them on our website. How good was that? If you want more, go check out bringyourownlaptop.com or check out the link
in the description.

One thought on “Export your full page web UI mockups from Illustrator 2017 – Adobe Illustrator CC 2017 [34/45]

Leave a Reply

Your email address will not be published. Required fields are marked *