Shubham Pachauri (Design-Lead UI/UX Designer)

Steps to create your own Duotone color tone images:

• Pick a correct  Image: It is a more crucial step to select a perfect High-resolution image for your websites because If you pick wrong images, Duotone effect won’t show up strongly. Some tips to select correct image for your website
• Always pick High-resolution image.
• Always try to pick those images which have large no of the color palette.
• Avoid images which have Larger areas of Black, violet and dark tone color because they will become over highlighted.

Create flat color Rectangle:  Create a rectangle on your image, fill it with a color you want to highlight in your duotone image, you can also try to use gradient colors as well.

Use opacity: Now use layer opacity on the rectangle you have drawn, make it up to 55 % in opacity settings.

Use Hard mix Blend Option: Last but not the least Use “Hard mix” layer blending option

What is Walkthrough?

What is isometric Illustration?

Why we use Isometric Illustrations In-App Walkthrough?

• To convey theme: You can use isometrics illustrations to convey the theme of your business with  users as they are great way to present your information in front of normal users

• Isometric with animation: Isometric Illustration can also be used in motion graphics form. In this form, they become a more powerful tool to interact with users. As motion graphic scientifically more easy to remember the form of information.

• Eye catchy: It is one of most eye catchy form of art in Vector graphics league.These graphics can attract users from the middle of hundred’s other options.

1. If you related some Creative field like Graphic design, Architecture, Illustrator artists, Animation artist and VFX artist and many more.
2. It can be your hobby No matter from which field you belongs to.
3. You might need it to express your ideas.

Some tips By which you can Improve your Sketching Skills:

• Gathering the ideas and Inspiration: “ No Art Piece can start with an empty mind ” First you need to collect all Reference stories (sketches and Illustration ) related to your artwork, this will help you to create a basic physical structure which consists theme, color schemes, character properties and its presentation.

• Setting up a Document: While working on a Wacom bamboo Setting up a document is a crucial part You need to work on 300 PPI and RGB color format as it is good settings for all kinds of devices and also adaptable for lithography.

• Avoiding White sheet panic: While looking at your white empty document in monitor sometimes you started to frustrated as you don’t know where to start this situation called white screen panic.To avoid such situation fill some color in the background I prefer these #fff8c9 or ffe6ce. This will give a more clear picture of your illustration.

• Using layers for different elements: Today when we create some Illustration It contains multiple elements in multiple layers as compare to old days when we used to draw sketches on paper. Now we have more Flexibility cause we can redo or edit any part on Illustration any time as It has its unique layer.

1. SVG is crisped in nature:

    SVG utilizes a facilitate plotting framework to plot indicates and associate them draw lines, shapes or ways. Vector designs are drawn utilizing arithmetic, which means they're sharp and fresh, not pixelating like other picture positions, making them incredible for logos, symbols, and illustrations.SVG has various different highlights, as well – with channels, examples, angles and concealing and the 'viewBox' property for surrounding the scene – and they're all can be energized. SVG is to a great degree flexible and bolstered by all programs going the distance back to IE9.

1. Accessibility:

   SVG has labels fabricated particularly for availability, the fundamental one being the '<title>' tag. The title follows alongside the '<desc>' tag ought to be utilized to give fallback substance to screen perusers. The substance of these labels won't be shown by the program however they will be presented to the programs availability API. You can (and should) likewise utilize the right  ARIA properties where pertinent, for instance, in case you're concealing an SVG component.

3. It can be animated Easily:

   Components inside SVG can be enlivened to make some really astonishing intuitive encounters or the activity can be utilized to add decent little touches to an interface, picture or symbol. Liveliness can be made utilizing CSS, the Web Animations API in Javascript or utilizing the SVG '<animate>' tag. SVG activity is at an intriguing point being developed. Google expostulate SMIL – SVG invigorate tag – in Chrome 45 for CSS liveliness and the Web Animations API yet has since suspended the belittling.

4. It's interactive:

   Using Javascript we can interact with elements inside of SVG, thanks to the navigable DOM. This allows us to create interactive elements using SVG the same way we would with HTML and CSS.

Your creativity. There are many plugins available in the market which can help you. Let's discuss some of them.

Eye candy:

Filter Forge:

RH Hover color Picker:

Ultimate Retouch panel:

For proficient modifying comes about that go a ton more remote than the default Photoshop channels, it's difficult to turn out badly with Ultimate Retouch Panel. Presently on form 3.7.5, the designer's been accepting proposals from ace customers about what they require from it, and it includes more than 200 capacities in a single board, including seven recurrence detachment strategies, four quick correct techniques, and 15 instruments for nearby modifying.

ALCE 3 :

• Start selecting font

  selecting the font is first and most important part of Creating Such kind of glowing effect because need a font Which is sleek in look and rounded in corners otherwise glowing effect will not look good if you use some strong and heavy text. As you see the neon light are cylindrical in shape most of the type. My choice for this type of effect is Stellar or gravity font. You may find the different better font for your work.  

• Pick right colors and background:

  Choosing right background and color is also very important part Glowing effect will not look cool if you missed the right color combination. For background, you should always use dark colors as they highlight your text part and for text, I prefer these colors #e82222, #8cef5b and #6ac5ff.

• Combination of Blending Option:

  For creating neon and glowing effect you need to add Multiple Blending Option of text with different effects :

• Add glow:

  To perform this you need to apply a glowing effect on text, to do this  Double right click on your layer to open blending layer options select outer glow and make these Setting: Opacity 50%, Spread  5% and the size of 63 Pixels.

• Add Bevel and Emboss:

  Now from same blending Option Menu Choose bevel and emboss and Make these setting  Depth 100 %, Size 5 Px and Soften 2 Px. Now your text will start to look like neon light.

• Glowing layer:

  Now make a duplicate of your text remove all layer effect, this layer will behind your base text layer now Apply Gaussian blur on this layer with 4 points. To make your alphabet glossy in feel as same as original neon light tubes look like.

• Detailing:

  Until this point in time, your text will start looking like neon lights but now you need to add some more details. First, add some inner glow with bright color and also add some drop shadow but not too much.

• We create one giant layer of multiple graphics element which creates problems when we try to move them flexibility.
• Many time we choose the wrong color profile for our assets.
• Sometimes we create assets of the wrong size.

• Using layer panel smartly:

  When we work in Illustrator we usually create all content in a single layer and make it as a single group this create problem while animating such content in after Effect because you can’t animate an object freely if its layer is not separated. Let say an example If you want to animate a logo with multiple letters but they are not separated then you control them in After Effect for multiple animations on the different letter at the time you need to separate letters from each other to animate them properly.

• Size of Artboard and its content:

  Size of artboard matters when you working for After Effects assets. Let's understand it by an example If you have artboard of size 40px-40px and your graphic inside it is also 40px-40px then this will create a problem when you need animate this graphics by resizing its small size it might cut your graphics edges by some pixels. To avoid this always create your artboard more than your graphic.

• Correct color format:  

  When you are working for After effect always save your graphics always in RGB color mode because your moving content never going to print so CMYK color mode are required you can change color mode from File >> Document Color Mode >>RGB.

• Importing Asset in After Effect:

    Now, this the final step Which needs to be done correctly or all your step was taken above will be waste of time. Now go to File  >> Import >> File Now select the “.Ai” file which you have formatted correctly with steps mentioned above. Now select Kind type to “composition” from promoted Import menu this is important because if you select kind type “footage” all layer will combine again into a single layer. So avoid that common mistake.

Here are some ways in which critics can be very helpful:

1) Listening to Feedback:

2) Understanding the UX:

3) Be curious to listen to any audience:

Let's talk about them one by one:

Creating the overview of variable factors in a project:

Grouping and renaming layers properly:

Keeping your files organized:

So let's talk about how creativity can help you out:

Creativity gives you flexibility:

Creativity increase productivity:

keeping you ahead in competition:

Creativity keeps you motivated:

Use of mockups:

Using wireframes and prototypes:

1. It's not only for Wireframing: Yes, we can do wireframing in it but that's not all, you can design your applications and website from scratch by spending less time and efforts as compare to Photoshop or illustrator.

2. Many of us still think In sketch we can only drag and drop: Sketch provide lots of   useful asset within it like Icons, templates for applications and websites screen. buts that not all sketch also gives you tools to create new innovative designs Just like any other designing software.

3. It Will take time to learn this software: Many designers not using sketch because they think they have to spent lot of time to learn this software. But It is quite apposite you don’t need any special class to learn this software. This software have very easy interface. Its works on same layers system as Photoshop.

• You can templates: Sometimes we repeat few sets of designs properties in our all our projects. In Adobe creative library we can save them as a templates. So Whenever You need them in future you can drag those templates into your project directly.

• You can save fonts: Sometimes we use new fonts in our project. And when we share to some other designers or any concern other person. It is not editable by them as they don’t have that font. But if you save your font on creative cloud you can share that font directly with all other concern people through creative cloud.

3.       Can access from anywhere: Anything you save on creative cloud with your registered  Adobe id. You can access it from anywhere you want with any of your machines. You just need to login with your adobe Id.