Today I wanted to show you this
brand new web service and it's a hundred
percent free to you it's web-based and
allows you to upload a design for an app
screen and showcase it in a d layout
it's very dynamic as you'll see I'm also
going to show you how to do it the
old-school way which still has its
purpose and that includes using
Photoshop documents with smart object
layers alright so let me show you first
this new way to do it which i think is
really cool but basically you take go to
three dot io T hree d io hit start the
generator fancy animation here click
upload and here's a mock-up that I did
from my previous course where you learn
Adobe XD check it out my site no I'm not
ashamed for plugging anything here and
the first thing I'll show you is color
so the background color this is this
section right down here we can make it
black of course or dark gray whatever
that is white we can get rid of it
entirely and so when we go to export it
it has a transparent PNG or we can just
make a specific color from a predefined
set or put in a hex color code right
down here so we're just going to leave
this transparent for the background next
watch this right now it's right face and
we can make it left facing or forward or
back to right very very cool next we can
change the angle and so then if we left
click and drag we can move this sucker
around alright so we can also turn on
and off the glare with this button and
we could change the phone color to black
or white and then finally we can choose
to get rid of the shadow right here
finally you can resize the actual
document window by clicking this
dragging this in will drag this one in
and maybe we will drag this out slightly
right around there there we go
and voila so now once you're happy with
it click download
I'm going to show this in the folder I'm
going to right-click off my screen you
can't see anything right now you might
see all my porn otherwise and then open
up Photoshop and here we go so you can
see this is only % and so it's pretty
large it gives you a nice image to work
with and if I you can the fact that I
made it transparent background that
allows you to do something like creating
a new layer make position to the bottom
and then just do something with the pen
tool for instance to create some sort of
abstract you know cool background of
sorts okay that looks stupid all right
there we go
connect it around and then maybe create
another layer we'll make this one like
gray yeah there we go pretty cool not
the greatest-looking thing but as you
can see very quick very easy so it has
its benefit now if you want to see the
old-school way let me just show you real
quick alright so if you go to google and
you type in photoshop samsung mock up or
https://www.youtube.com/watch?v=VzX1R_q5_Mk&list=PL0lNJEnwfVVM80SBgWyC_1DQqyBYfiXeF
you know iphone wherever latest one
you're gonna find tons of results this
is one of those results and these are
always free for the most part and you
just download this and it downloads a
large file this one was Meg's it's a
zip file and open it up and this is what
you're presented with for this
particular mock-up template now these
are dynamic in the sense that you can
easily replace the actual image in the
phone screen but we can't rotate this
crap here and in Photoshop you're stuck
with whatever the composition and layout
is however it is worth it if you're
looking for a very specific type of
composition for displaying your app
design all right so to do that we're
just gonna double click on any where it
has these little eye templates here or
the smart object icons rather I don't
need all of these so I'm just gonna get
rid of them double click on this one now
I'm telling you this particular template
has like , smart object layers I'm
just looking
the one that has a screen so I'm doing a
double click on this one and then guess
what
there's another freaking smart object
layer finally we arrive here's my
mock-up here that will place in we don't
want any of this stuff I'm just going to
paste this it wasn't quite enough large
in terms of the resolution normally you
wouldn't want to do that but this is
just for demonstration save it and then
you have to save all the subsequent
smart object layers in order for the
original that you opened up in Photoshop
from the zip file for that to update so
now we go back here and there we go all
right so as you can see this new way of
doing it very quick and easy hopefully
you found something of value here I'm
basically here in a couple days we're
gonna start on a new topic for those of
you who actually actively follow along
on my channel not many of you and that's
going to be electron web app development
now really excited about this it
actually allows you to create
executables that can run on desktop for
multiple operating systems alright so
I'll see you guys real soon oh and by
the way of course make sure you
subscribe here at the channel YouTube
and also check out
brand new web service and it's a hundred
percent free to you it's web-based and
allows you to upload a design for an app
screen and showcase it in a d layout
it's very dynamic as you'll see I'm also
going to show you how to do it the
old-school way which still has its
purpose and that includes using
| php web development service in bhubaneswar |
Photoshop documents with smart object
layers alright so let me show you first
this new way to do it which i think is
really cool but basically you take go to
three dot io T hree d io hit start the
generator fancy animation here click
upload and here's a mock-up that I did
from my previous course where you learn
Adobe XD check it out my site no I'm not
ashamed for plugging anything here and
the first thing I'll show you is color
so the background color this is this
section right down here we can make it
black of course or dark gray whatever
that is white we can get rid of it
entirely and so when we go to export it
it has a transparent PNG or we can just
make a specific color from a predefined
set or put in a hex color code right
down here so we're just going to leave
this transparent for the background next
watch this right now it's right face and
we can make it left facing or forward or
back to right very very cool next we can
change the angle and so then if we left
click and drag we can move this sucker
around alright so we can also turn on
and off the glare with this button and
we could change the phone color to black
or white and then finally we can choose
to get rid of the shadow right here
finally you can resize the actual
document window by clicking this
dragging this in will drag this one in
and maybe we will drag this out slightly
right around there there we go
and voila so now once you're happy with
it click download
I'm going to show this in the folder I'm
going to right-click off my screen you
can't see anything right now you might
see all my porn otherwise and then open
up Photoshop and here we go so you can
see this is only % and so it's pretty
large it gives you a nice image to work
with and if I you can the fact that I
made it transparent background that
allows you to do something like creating
a new layer make position to the bottom
and then just do something with the pen
tool for instance to create some sort of
abstract you know cool background of
sorts okay that looks stupid all right
there we go
connect it around and then maybe create
another layer we'll make this one like
gray yeah there we go pretty cool not
the greatest-looking thing but as you
can see very quick very easy so it has
its benefit now if you want to see the
old-school way let me just show you real
quick alright so if you go to google and
you type in photoshop samsung mock up or
you know iphone wherever latest one
you're gonna find tons of results this
is one of those results and these are
always free for the most part and you
just download this and it downloads a
large file this one was Meg's it's a
zip file and open it up and this is what
you're presented with for this
particular mock-up template now these
are dynamic in the sense that you can
easily replace the actual image in the
phone screen but we can't rotate this
crap here and in Photoshop you're stuck
with whatever the composition and layout
is however it is worth it if you're
looking for a very specific type of
composition for displaying your app
design all right so to do that we're
just gonna double click on any where it
has these little eye templates here or
the smart object icons rather I don't
need all of these so I'm just gonna get
rid of them double click on this one now
I'm telling you this particular template
has like , smart object layers I'm
just looking
the one that has a screen so I'm doing a
double click on this one and then guess
what
there's another freaking smart object
layer finally we arrive here's my
mock-up here that will place in we don't
want any of this stuff I'm just going to
paste this it wasn't quite enough large
in terms of the resolution normally you
wouldn't want to do that but this is
just for demonstration save it and then
you have to save all the subsequent
smart object layers in order for the
original that you opened up in Photoshop
from the zip file for that to update so
now we go back here and there we go all
right so as you can see this new way of
doing it very quick and easy hopefully
you found something of value here I'm
basically here in a couple days we're
gonna start on a new topic for those of
you who actually actively follow along
on my channel not many of you and that's
going to be electron web app development
now really excited about this it
actually allows you to create
executables that can run on desktop for
multiple operating systems alright so
I'll see you guys real soon oh and by
the way of course make sure you
subscribe here at the channel YouTube
and also check out
| https://thejonesjonesjonesblog.tumblr.com/post/185675809108/how-to-get-started-with-adobe-xd-10-things |
Comments
Post a Comment