Search

Mishal Paracha

aspiring graphic designer

Unwrapping and Texturing of the Tank (documentation)

unwrapping has always been the most important part of animation and the most difficult one, if unwrapping isn’t done right the whole modeling goes to waste, as the model does not look realistic.

The unwrapping of the tank was not very difficult but very time consuming, this part took me the longest time in the whole assignment i started off with the body, ewe were suppose to first select the portion we want to unwrap then open the uvw unwrap open the uv editor, click on platform ( or whatever the shape is) and select the axis then pelt and then relax, this part was the easy part the difficult part came in when we had to stitch it back together to its respective corners, as they may be scattered all over the uvw map. so instead of pelting i decided to do the box mapping for the tanks body after working on it for an hour i realised that its just not going to work so i went back to pelting and managed to complete it. I unwrapped the tank selecting one part at a time of the tank and stitching it to the rest, this took the most time in the whole assignment, however the texture of the tire wasn’t very difficult but i didn’t using pelting for the unwrapping of the tire instead used point to point seam and peeled it, it took a while to get the final proper unwrap but still way better than the tank, since my model had 8 tires so after i textured the tires my model looked half complete.

Texturing is still way easier than the unwrapping, one the unwrapping is done and done right the texturing doesn’t take time at all all you have to do is export the unwrap as a targa file(32 bit) open it in photoshop add the textures play with the contrast a little and export back as a targa file (24 bit) click  “m” on 3ds max that opens the tab wheere you can add texture, click on the diffuse map and add the texture you have mad, after which you drag and drop that texture to the specific part of the model whos unwrap you have used to make this texture and then just check if everything is okay. if everything is we have to go back to photoshop and repeat the steps after that again.

For the texture i used a rusted metal texture image and took it on photoshop the most difficult part for me was that i didn’t have photoshop and 3ds max on the same computer so i had to kept going back and forth. The image I used for texturing was an hd image but one thing i couldn’t figure out was the picture kept pixelating. no matter what i do, i made the image big to fit the tank, i made the image small and made lots of repetitions and i kept it medium and made repetition but no matter what i did it would pixelate, so in the end i made it smaller and made a lot of repetitions as that made it least pixelated.

Every time i do my animation assignment it gets me thinking how people do animated movies, comparing how much time it takes me to just model one object, unwrap, texture, add lights and everything how much time and energy it would take them to do proper animated scenes, my respect for animators is more than ever at this point in life as now i have a little idea of what they have to do and how hard it is.

To start with your indesign file, I will teache you a few basic after which you will have a little hang of what to do, also if you have previously used photoshop or illustrator you already know the basics,

So to start of what we will do is since our background for the website will be the one we made in photoshop (the one with the less opacity of the image) we will put it on the “A master” page, go to windows and make sure pages has a tick infront of it, go to your pages and scroll up.

now  what is the purpose of the a master page? Whatever we put in our A master page will be visible in all of our pages, in which case we don’t have to aligh or worry about the addition of the layout every single time we design a new page.

Here is a short video tutorial i found online of how to apply master A page if you are still a little confused about it,

(“Creating and Applying Master Pages in Adobe InDesign”, 2017)

Since  my home page has the image in full opacity what I did is I went back to my photoshop master file and I disabled all the layers but the one with the image and saved it as a PNG file, with the PNG file I have the image in rectangles with a transparent background, note that if I had save the image in jpeg it would have a white background not a transparent one.

Now the next thing we do is we add buttons so on the A-Master page we will add our

  • About us
  • Gallery
  • Location
  • Reservation
  • Menu
  • Promotions

We will use a normal text box like we do in photoshop to add our text in any font style and size we like, the font I used through out my website is Avenir.

Once we are done writing the names in the text box, we will start making our pages atleast one page per title and bookmark every single page

How to bookmark:

Go on the page you need to bookmark and click on object > interactive >convert to button

32

And it will open this window;

33

Click on book marks36

and you will see this

34

Click on the create new book mark button  Picture1

And create a new bookmark for that page(my tab has a lot of bookmarks don’t get confused yours will be empty as it will be your first bookmark.

Once you have created your bookmark go to the text box and select it then click on the button and forms

36

and you will get this window

 

Write down the button name and in event choose on click, then click the plus sign next to action and click go to destination

37

in the destination tab choose the bookmark you created for the about us page and it will be linked.

38

You can even personalize the buttons, changing its font to bold or background to color on click and rool over by changing the setting in the appearence tab.

39

now you know how to customize an indesign file and create buttons you can make many more buttons and create many different things, in this website now you will have all the buttons you add on the master page to be interactive in all the other pages, if in any page you don’t want the A master default you can just choose none instead of none and drag and drop on the page.

40

Here are a few extra sites and videos i found for indesign tutorials, hope it helps you:

(“How To Get Started With Adobe InDesign CC – 10 Things Beginners Want To Know How To Do”, 2017)

https://design.tutsplus.com/series/beginners-guides-to-indesign–vector-4951

(“Beginners Guides to InDesign – Envato Tuts+ Design & Illustration Tutorials”, 2017)

 

References

Beginners Guides to InDesign – Envato Tuts+ Design & Illustration Tutorials. (2017). Design & Illustration Envato Tuts+. Retrieved 1 April 2017, from https://design.tutsplus.com/series/beginners-guides-to-indesign–vector-4951

How To Get Started With Adobe InDesign CC – 10 Things Beginners Want To Know How To Do. (2017). YouTube. Retrieved 1 April 2017, from https://www.youtube.com/watch?v=qzE6nZofaI0&t=89s

(“Creating and Applying Master Pages in Adobe InDesign”, 2017)

 

Pre – production and 3d modeling documentation (tank)

This course has been one of the hardest courses i have done, and when you start it looks easy but trust me it is wayyyy harder than it looks, so this time i planned on doing a little everyday rather than doing alot on the last few days.

Since we now know what pre -production and 3d modeling is i will directly move on towards the documentation.

the first thing we did was choose the blueprints for our tank, the one which we are going to model so i downloaded the blue prints and since we are using blue prints e dont need to make any sketches. the following is the blueprint of my model.

B1 Centauro [LIMITED to 500px] (1)

B1 Centauro [LIMITED to 500px] (1).jpg

The modeling started of pretty well, i started from a plane and outlined the tank first and then extruded it so i got the basic shape pretty easily, but the shape of my tank towards the tires is a little different as you can see, it is like that of a car usually has, but because its a curve it means ill have to put alot of connects to make each curved kind of a shade which means alot of polygons, in the begining i was trying to look for a way through which i wont have to do it by adding more connect but inthe end i figured that there is no otherway so i did it normally.

This time instead of building the whole model i made half of it and planned on using the symmetry tool in the end since its pretty symmetrical through the x axis if you look from the front view.

now the basic shape was pretty easy to make from the side but then when i looked from thr top and front it looked like a box and really really bad, not realistic at all so i started to change it but i kept messing it up so i decided to make its shooting thingy (gun,i dont know what its called) that was pretty easy just a cylinder a little extruding a little inset and we are done and got back to the shape, i managed to make it look a little bit like the tank as much as i could, after that i started looking at the details of the tank but since it is a small picture it was pixelation to uch for me to understand and model anything so i moved on to the tires, although tires are pretty easy but i made mine like 3 times from scratch as i would mess up one thing or the other.

this is my last assignment for 3d modeling and i learned a lot but the mot important thing that i learned is that animation needs alot of patience and dedication, i am all up for dedication but i am not a patient person and it bothers me when my work is incomplete and i can’t finish it however doing my assignment for 3d modeling i got so exhausted that i couldn’t complete it in one go, people using 3ds max for a while may get use to it but as it was my first time it was very challenging for me, and i am sure it is for everyone at first but they get used to it however 3d is not my main focus as i am a graphic design student not animation student so i guess its okay, at this point i am not even sure if i will be using 3ds max ever again in my life but i don’t want to forget the techniques i learned so lets just hope for the best.

How To Design Web Layout In Photoshop (Tutorial Part 2)

To move forward with my master page all I do is use the same rectangles and fill them with my color scheme green shades and palce it on the other corner of the artboard.

To fill the rectangles I use the Paint bucket tool from the tool bar.

The next step is to place the logo, I am placing my logo in the top right corner because I think it is most suitable there because of the empty space.

The problem we need to fix is that the logos reflection isn’t as prominent as I want it to be so I will add a slight gradient of black from the right and of green from the bottom in the background,

Also I downloaded a background pattern from subtlebackgrounds.com

Which I will use In the background which I layed in a separate layer by pattern overlay.

 

The layout after the above steps

One last step, I am still not satisfied with how my logo isn’t very prominent so I will simply add a rectangle below it with a gradient and heres the final master page layout.

Since we will also be using this page for our background for all the pages the home page will be like the one above while the others will have less opacity of the rectangles with the image so the text and other images are more prominent.

How To Design Web Layout In Photoshop (Tutorial Part 1)

Now since we are done with our logo we will start with our template, this is where we decide which of the templates we sketched we want to go ahead with and I want to go ahead with this one, keeping my color scheme on my mind I am going with a black and white picture as it will look better with the green color scheme, for the website we need only 1 master page from which we can drive more pages by making a few layers visible or invisible depending on the need.

In this blog i will be giving a tutorial on how i created a png image of the following image to insert in my template

This is the image I chose,

14

(2 – Regency blog”, 2017)

The image was originally colored but I photoshopped it to black and white to go with the color scheme further editing the colors to what I want.

17

However, I don’t want the image to be just a normal image so I am going to play a little with negative space clipping mask,

First we will make the shape we want, for me they are a series of rectangles at an angle different lengths but equal width and separated by the same distance.(Ignore the fill color)

I place my image under the rectangles lower the opacity of the rectangles and decide where I need to place the image so I can clip it accordingly, once I have decided my exact place I will select the magic wand tool  and highlight the rectangles, once highlighted I will go to the image layer and click on make clipping mask and there we go.

And here we are:

21

Here is a small video tutorial on how to do clipping mask if you are still confused aout it, clipping mask is one of most useful tools in photoshop.

(“Clipping Mask – Photoshop CS6 Tutorial”, 2017)

REFERENCES

2 – Regency blog. (2017). Pinterest, from https://www.pinterest.com/pin/442971313330373783/

Clipping Mask – Photoshop CS6 Tutorial. (2017). YouTube. Retrieved 22 March 2017, from https://www.youtube.com/watch?v=QNNIc4RvIXc

How To Design A Logo Tutorial (Photoshop)

To start your layout in photoshop the first thing you design is your logo, now my club name as I mentioned above is mirrors so I want some thing that has a reflection maybe but for the logo itself I I just wont typography, so I downloaded a few fonts and wrote mirrors on photoshop, the fonts I downloaded are

  • Evil bunny (top)
  • Parley (centre)
  • Bible regular (bottom)

Here are a few websites from where you can download these and many other fonts: 101freefonts.com

http://www.dafont.com/

Screen Shot 2017-04-18 at 4.03.04 AM.png

(“Creating and Applying Master Pages in Adobe InDesign”, 2017)

1

I like the centre one the most so as it was my initial inspiration

 

I will go ahead with it, I tried using capital letter for “M”and small for the rest but it doesn’t look the way I want it to, now since I want a reflection I am going to first finally my font size color and everything, since my color scheme is as  follows ,

2

Along with shades of white and black so I will keep my main text white. once that is done I will replication it and flip it vertically.

 

Now I have a reflection but it doesn’t look like a reflection, so I lower the opacity of the lower one

 

and added the green color to match my theme, but still doesn’t fell like a reflection, not as much as I want it to

so I added a gradient to give a shine and more of a reflection idea

91110

gradient icon in the toolbar

 

 

Here is a short video which explains further on how to put gradient if you are still not sure how to do it

(“Photoshop Tutorial- How To Create A Gradient Color Of Background”, 2017)

We can try adding drop shadow or glow but I would prefer not to in this design as the reflection is already giving a shadow effect.

The final logo on different backgrounds.

 

REFERENCES

Photoshop Tutorial- How To Create A Gradient Color Of Background. (2017). YouTube. Retrieved 22 March 2017, from https://www.youtube.com/watch?v=I0EoI5HLM80

Faisal, M. (2017). Fresh High Quality Free Fonts | Fonts | Graphic Design Junction. Graphicdesignjunction.com. Retrieved 22 March 2017, from http://graphicdesignjunction.com/2013/08/fresh-high-quality-free-fonts/

 

Prototype of website

For our prototype we used indesign, indesign has so many features i had no clue about, this was a very exciting part for me and i learned alot of new things so from this blog onwards my blog is going to be a blog+tutorial for 1, how to design a logo in photoshop, 2, how to make the masterfile of the layout in photoshop and 3, how to make an interactive pdf in indesign.

Basically anyone who knows the basics of photoshop knows the basics of indesign because their primary features are very similiar although you cannot do alot of designing there since it it restricted to a few features, so you can design your website on photoshop and then transfer it to indesign

Start by a color scheme, you can go to the following website

http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

and choose any color and options for color schemes will show up, download your favorite one thats how i did it and heres my palette:

Screen Shot 2017-04-12 at 11.32.22 PM

(“Paletton – The Color Scheme Designer”, 2017)

Then you choose a layout for us we are using a 960 grid which the most appropriate to use for webdesign. here is the link to a website that explain how exactly to follow the 960 grid and why its appropriate for web design.

http://sixrevisions.com/web_design/the-960-grid-system-made-easy/

 

(“The 960 Grid System Made Easy”, 2017)(“Design a Clean Web Layout with the 960 Grid | Tutorial9”, 2017)

But before i start my tutorial i will just talk a little bit about my design and what i was aiming for. Which will be in the following blog so stay tunedddd….

REFERENCES

Paletton – The Color Scheme Designer. (2017). Paletton.com. Retrieved 22 march 2017, from http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

The 960 Grid System Made Easy. (2017). Six Revisions. Retrieved 22 march 2017, from http://sixrevisions.com/web_design/the-960-grid-system-made-easy/

Design a Clean Web Layout with the 960 Grid | Tutorial9. (2017). Tutorial9.net. Retrieved 22 March 2017, from http://www.tutorial9.net/tutorials/photoshop-tutorials/design-a-clean-web-layout-with-the-960-grid/

 

Introduction to Mirrors, night club.

For our second trimester we are assigned to design a website for our imaginary clients, we were given a few options each with a little description and a target audience.

I chose the one with the Fusion night club, now because i wanted my assignment to reflect more about me and be different from others i changed the name of my club and called it “Mirrors”, why i call it mirror is because i feel like thats how my personality is very open to everyone reflecting a little bit about everyone and their stories feeling the joy or pain of whoevers with me while at the same being fragile.

Here are a few images i used for my inspiration

This slideshow requires JavaScript.

(“13 Amazing Ideas How to Reuse Your Broken Mirror”, 2017)

(Template, & Budiyanto, 2017)

(“Travel | Travel: 5 of the best luxury business hotels | Magazine | NET-A-PORTER.COM”, 2017)

(Faisal, 2017)

 

So the first thing we had to do was to make a prototype that we did using indesign and photoshop and made an interactive pdf. so for this i started my work by planning about a few things like:

  • layout, template
  • color scheme
  • fonts

These 3 things are the most impactful when designing anything i believe another thing which was on my first priority list was the logo.

Logo design is usually my favorite part since you have alot of choices and you can simply go crazy and design something that you like at the same time that reflects your company or brand.

References

13 Amazing Ideas How to Reuse Your Broken Mirror. (2017). Architecture Art Designs. Retrieved 17 March 2017, from http://www.architectureartdesigns.com/13-amazing-ideas-how-to-reuse-your-broken-mirror/

Template, D., & Budiyanto, B. (2017). Dahuloe Keynote Template. Creative Market. Retrieved 17 March 2017, from https://creativemarket.com/angkalimabelas/816352-Dahuloe-Keynote-Template?u=PhotoMarket?utm_source=Pinterest&utm_medium=CM%20Social%20Share&utm_campaign=Screenshot%20Social%20Share&utm_content=Dahuloe%20Keynote%20Template

Travel | Travel: 5 of the best luxury business hotels | Magazine | NET-A-PORTER.COM. (2017). NET-A-PORTER. Retrieved 17 March 2017, from https://www.net-a-porter.com/magazine/313/29

Faisal, M. (2017). Fresh High Quality Free Fonts | Fonts | Graphic Design Junction. Graphicdesignjunction.com. Retrieved 22 March 2017, from http://graphicdesignjunction.com/2013/08/fresh-high-quality-free-fonts/

Lighting, Rendering and Animation Documentation.

LIGHTING

lighting as you can get an idea from the name is the refers to the controlling of different lights in a scene or shots it is an important aspect of the piepline, i think every single step of pipeline has its own importance and the model looks incomplete if any of the aspects are missing, light adds character to the animation or model. for lighting we used the 3 point lighting system which means there are 3 sources of light from different directions that are:

  • rim light
  • fill light
  • key light

Slide14b

(“Uncategorized – Page 2 – Aria’s Blog”)

the lights have to set up in such a way that the light spreads properly and creates depth with it.

Animation

Animation was i guess one of the most difficult but also the most interesting part of the whole project, here we can decide how we want our final animation to look like, this is where we use our storyboard (i.e. the frame and angle of the camera and whats going to be in the frame)

so since we have a treasure chest and the first thing that comes to mind when thinking of animating it is to lower it from out of the frame make it hit the ground stumble a little then open the top and out comes the coins, so i dodnt want to do that as i dont like using the first ideas that come to mind, i did a little research and decided to start from a zoomed in angle this is when i decided that i want a lock on my treasure chest that opens and then my treasure chest opens, so i made a story board but left the camera setting for the end and started my animation.

first scrne is the lock opening and the cheat getting unlocked, then the top opens has a little bump and then stays open, after that it starts shaking a little like something is about to happen and starts levitating in air and shakes again and out comes the coins. In the end it closes back and goes to the ground.

Now since its my first time animating i started with my lock then made the top open, it was later when i realised that my lock and lock holder isn’t going up with the lid which it should so deleted that animation and this happened quite a few times till i fimally got a hang of it and realised once i have grouped an object i cannot ungroup it and move it as a separate objectS once it will mess up the group animation thats why in the end i wasn;t able to lock the chest again. moving on, i animated my top and bottom separately first and then made it into a group and animated the rest, but because i needed my lid to close in the end as a separate object i animated the opening and the closing part then made the group.

BIBLIOGRAPHY

“Uncategorized – Page 2 – Aria’s Blog”. Mediafactory.org.au. N.p., 2017. Web. 20 Mar. 2017.

 

 

Create a free website or blog at WordPress.com.

Up ↑