Download assets: http://motifcdn.doubleclick.net/EMEA/html5advertising/gwd/gwd-nexus5-source.zip
Download project files: http://motifcdn.doubleclick.net/EMEA/html5advertising/gwd/gwd-nexus5.zip (due to file version changes, please recreate the animation in the first frame after transofrming to new GWD format and it will work)
Download naked project files with only containing 3d model of Nexus5:
http://motifcdn.doubleclick.net/EMEA/html5advertising/gwd/gwd-nexus5-model.zip
Design view:
—————-
00:00 – 01:10 Intro UI
01:10 – 01:50 Applying a background gradient
01:50 – 02:30 Creating a comfortable 3d area
02:30 – 13:12 creating a 3d model of a mobile device
13:12 – 13:30 adding a new page
13:30 – 14:55 working with the timeline
14:55 – 15:10 preview in external browsers
15:10 – 20:20 finishing the start animation
15:50 – 16:00 introducing the gradients tool
18:02 – 19:00 introducing the tap area component
19:00 – 20:20 introducing the event panel
19:30 – 20:20 introducing transitions between pages
20:20 – 21:58 adding functionality to the 3d model (tap areas)
21:58 – 23:10 building the smartphone menu with the swipeable gallery
23:10 – 24:55 adding a back button
24:55 – 25:10 preparing all necessary pages
25:10 – 26:05 linking to new pages
26:05 – 27:45 simulating the Chrome Browser with the iframe component
27:45 – 29:40 simulating the Youtube Player with the YTPlayer component
29:40 – 32:50 simulating the Google Maps App with the Maps component
32:50 – 33:20 publishing the project
Code view:
—————-
33:20 – 34:40 reading the generated code
34:40 – 43:24 adding custom javascript
34:40 – 36:15 develop an universal transform function
36:15 – 39:05 180° rotating the 3d model with finger
39:05 – 40:15 180° rotating the 3d model with mouse pointer
40:15 – 41:10 testing and fine tuning
41:10 – 41:50 synchronizing 3d models on pages
41:50 – 43:24 adding 360°-rotation
source
Hello! nice video
I am facing a problem with Google Web Designer.
Can you help me out?
I want to change the text layer to an image in the google web designer template.
Is this possible?
Please can you update the link of the asset that is down. Thanks
I can't help but giggle at everyone who criticized your video making skills. Clearly, you can handle multimedia. Bravo! I am not quite there yet, but you've given me something to work toward.
The best looking GWD tutorial ive found and it has no audio, I'd take music and overlaid text instructions on screen to silence. I read your reasons for the lack of audio and that may work for you but on youtube it doesn't really work for the audience. However I did watch the entire thing and it was really great to see just whats possible with GWD, the only thing I couldn't really follow without a bit of explanation was the coding you did at the end.
tanxxxxxx
Hi Patric, Your video is exactly what I want, but I had a problem! When I rotate the cellphone the back can´t see it. I think the problem is because the new version Google Web Designer Beta works with layers and may not allows it, or I don´t know how to do this interactive banner. Do you know about this problem? Thank you
Awesome!
can you add the html code to the description!
Very Nice Video Patrick !!! One question, that how can I get these individual component images that we are merging for any real life object ?
avatar por
Awesome!
Hello, i have a question, i did the tutorial till 27:45 – 29:40 simulating the Youtube Player with the YTPlayer component, here i meet a problem the video looks good in Google Web Designer everithing is ok, but when i hit the preview button the YouTube video does not work it gives me the following error "An error has appeared. Please try again later. (Playback ID: WkYJ2XEZDL6Fsr-p)". Do you know what may be the cause of this? If you do can you please tell me how to solve it? Thank you!
Hello! awesome video. I have a question, how can I configure a feed for a dynamic creative with multiple images, example: ( image1.jpg, image2.jpg, image3.jpg … etc )
value on a cell "IMAGE_URL" to use with the slide gallery in google web designer? thanks
Great video Patrick thank you so much!
Does this kind of interaction also work on mobile?
Patrick. It's awesome. I'm trying to create the same effect, but my 3D is respecting the layers structure, instead of z axis. When I rotate my object 180º it still showing the front image of my "3D". Do you know what is happening?
Bests
Thank you
The best tutorial for Google web design
How to creat a Landing Page (or web one Page) using Google web Designer ??? thanks
Крутяк!)
Maybe make it private then. No Audio helps no one. But thanks
Not very helpful then???
WOW it's Amazing! :)) thx the tutorial!
Where did the audio go?
How is there any reason for making an instructive video with no audio? Maybe delete this one and start over. I would love to hear what you are doing and why you are doing it.
Nice work, but is it makeble to set my Adsense Account into this beta vers. of google web desinger, to bundle both of them ??
Thanks a lot for sharing this amazing 3D work!, before you I was trying without good results