Saturday, 7 June 2014

Use Clipping Mask for Fashion Designers


In photoshop clipping mask makes miracles usually. Of course it is useful for all kind of designs. But especially fashion designers can utilize this tool optimum level very easily.

In the process of explanation I don't want to depend on verbal explanation.   Just I will try to explain with pictures on each step.

Step1:

  • choose your image for changing the pattern. 
  • Select the required area from the image as show below.
  • apply 1px feather depending on image requirement. 

Step2:

  • Duplicate the selected part by using short cut ctrl+j (layer via copy)

Step3:

  • Now in the part of creating pattern take new file with 12 x 12 px size transparent file.
  • Create your running pattern.
  • Choose define pattern from edit menu save it with proper name.


Step4:

  • Take another layer to top of the all layers
  • With pattern brush draw your pattern in the same layer with previously prepared pattern.



Step5:

  • Right click on the present layer(where you prepared the pattern) choose clipping mask. This will intersect with below layer.

  • This will be the result after applying clipping mask. Now it is time to adjust the pattern properly.


  • I rotated the pattern layer in 45 degrees for nice look.

Step6:

These are final Steps:
  • Use layer blending option and choose proper option. Here I applied Difference. Now see the image without loosing the details of cloth, properly blended.

  • If you want adjust the opacity of the pattern layer.


  • Select the second layer(what we copied initially), choose hue and saturation from image menu, and adjust the hue levels. choose proper color according to your dress requirement.


  •  This is the final result.
  • You can download the source file also by clicking download link.

Read More

Saturday, 8 March 2014

Free Online Html Css Javascript Editor



It is html , css, javascript online editor. In the three panel you can write html, css and JavaScript respectively, and in the fourth panel you can see the out put. No need to run separately your html file.


click the below link to get online html,css and javscript editor.

http://jsfiddle.net/
Read More

Friday, 7 March 2014

Web site Designing with divs (Video Tutorials)


In HTML, the span and div elements are used for generic organizational or stylistic applications, typically when extant meaningful elements have exhausted their purpose. Instead of using tables, DIVs are very handy to design. Because it supports floating structure.

Here I prepared video tutorials to explain the site from scratch.
To follow this  tutorial basic knowledge in css properties is mandatory.


1st Video


2nd Video


3rd Video


4th video


Read More

Friday, 14 February 2014

Use of Smart Object in Photoshop




Read More

Thursday, 23 January 2014

Layer Blending in Photoshop



In General people are very crazy of Tattoos, If anybody want to wish to design the logos on their bodies they need to see the demos from the other images, how that tattoo look like after finishing. But it is possible with their own body with Photoshop tool. It is simple. Only in the 4 steps you can finish this. It is not only for people who what to draw this design in their own body but also very useful for designers before preparing the tattoo how it look like, they can show with photoshop to their customers. In this process move to the first step.

Step1:

  • Choose your photograph on which place of your body need to be created the tattoo. If it is practice purpose just choose any photograph like below.

Step2:

  • In the second step select your tattoo image even with shaded also.


Step:3:

  • Place and re size the tattoo image according to your requirement. 
  • Don't use magicwand tool or select tool to remove the white area, because it disturbs the edges of the image, and image is not going to blend with skin. 


Step4:

  • Use Multiply option from layer blending option.

  • Finished, without loosing image edge quality you got this output.


Download the Source file:


Read More

Thursday, 14 November 2013

Layer Masking in Flash

In this Tutorial I am trying to explain little bit complex level masking animation in Adobe Flash, to create banners for websites.



Here three level of symbols I used to create the effects
In the second and third level created the animation.
Especially in the third level shape animation give the extra beauty to the animation.

In the stage I masked the effect layer with below images.

1st Part:


2nd part:





download source file 
Read More

Friday, 5 July 2013

GLOBE ROTATION ANIMATION WITH FLASH CS6

Globe-rotation-using-flash


Here I am explaining generally used flash effect for website.. that is rotating the globe.  To design this output if you have basic knowledge in flash is enough. You should aware of below concepts.

  1. Creating Movie clip:
  2. Masking ( single layer masking and multiple layer masking)
  3. Import images
  4. Trace Bitmap
  5. Using guides for right measurement
  6. Creating Motion tween.
Ok now we are going to start the design.

STEP1:
Open the flash and take the document as you wish. To edit the documents and settings press CTRL+J and mention your value in pixels.

Now your stage is ready to work.

STEP2:
Choose right world map image and save in your hard disk. Now import the image into flash. For this go  file menu and Import-Import to Stage or press CTRL+R
Choose the image and press Import.

STEP3: 

Importing the image is over now you need to delete the unwanted area. If you break the image flash will now allow you to delete some specific area in the image. To do this we need to trace the image. This is the process of vectorization of the image. Now you can delete the required area.


After importing the image re-size according to requirement. Now you can trace the image.
Here select the image and go to Modify-Bitmap-TraceBitmap.
Here you can adjust the values and press OK

Now it allows you to delete required area. Here I am deleting white area.

STEP 4:

Now duplicate the image 3 times  and arrange it horizontally left or right side to the same image with specific distance. 

Now select all and convert the image as a Movieclip  (select all and press F8, choose movieclip from the options and press OK).

STEP 5:

Copy the image and paste in place (CTRL+SHIFT+V) in another layer, then flip  the pasted movieclip horizontal, reduce the opacity 100% to 50%, to get the feel that layer is back side.

STEP 6:

This step is very important because, to show the globe rotation we are creating globe cycle animation. In this process at the end of one cycle generally.

  • We can identify there is jerk(stop and move) type feel. It should be managed perfectly. 
  • Top layer position animation should be left to right, bottom layer position animation right left.
  • Both layers animation should be managed perfectly.
For this follow below process. You can see the below image. 

  • Take two guides place with the width of globe size in the first frame
  • In the second key frame ( I placed second keyframe at 60) move the top layer content from left to right. Bottom layer content should be moved right to left same.
  • Here you should match two layers each other.
  • Now create classic animation to the both layers.


STEP 7:

Now create the globe shape: Now take the new layer to the top of both layers, draw the circular shape based on guides.

  • To adjust the position of both layers on the outlines from layer properties. Please see the image.





STEP 7:

It is time to masking. select the top layer(where the globe shape is) right click - apply the mask. Now one layer will be masked. Click and drag the second layer also in to the mask layer. Now both layers will be masked.




Now globe rotation was created. See the output.


STEP 8:

Creating the Depth to the Animation: Copy the circle where you used for masking, Paste in Place (CTRL+SHIFT+V) in another layer.

Manage the gradients and transparency (color alpha). For this select the circle apply radial gradient from window-color menu. Adjust the colors and alpha like below.





STEP 8:

Show the white area top of the globe, select the circle apply gradient transformation tool - move the white area to the top of circle.





Yes.. successfully you created beautiful globe rotation animation with 3d look. you can download source file with below link. 



Read More