How to make text, icon or shape thicker/bold in Adobe Illustrator

Overview

How to make text, icon or shape thicker/bold in Illustrator. Recently I faced a problem for my on going project regarding font thickness. I was designing a four pages brochure and and when I sent it for approval, my client shared a paid font which he wanted to use for all headings. But the problem was that was slightly light weight font and client wanted to see is little thicker. Then I got the solution and now going to share with all of you.

In Adobe Illustrator you can make your heading, letter or shape thicker or thinner only with a few steps. Sometime it happens that you have only light or regular font of any particular font type in your computer and you want to make it little thicker like medium, bold or black but for this you don’t have complete font family.

How to do it?

Just select your required text, go into Type menu press option “Create Outlines”. Now your text has been converted into shapes and you can not change it’s font type anymore. Now go into Object menu, select Path, from path menu select “Offset Path” option. A new window will open with a few option. In the first field of offset you can enter your required number, for example if it is “0.1 inches” then you can increase it to “0.5 inches” and press ok. But keep mind when you are working in inches do not enter too much big numbers like 2 inches or 3 inches because it will increase too much thickness and will destroy its shape. Similarly you can play with your icons or other design shapes but in this case you don’t need to convert it into outlines. Because we need to create outlines only in case of fonts.

View all Glint Pixel videos

How to use Smart Object in Photoshop CC Tutorial. Smart Object Benefits.

Our today topic is how to use smart object and smart object benefits. There are two major parts of this tutorial, first one is “what is Smart Object” and second part is “Why should we use smart object”. Let’s discuss about both parts of Smart Object one by one.

What is Smart Object?

Smart Object is group of layers that contain multiple data of text and images. In Adobe Illustrator we do not convert art work into Smart Object because it remains vectored at all stages. But when we copy our art work from Adobe Illustrator to Adobe Photoshop then we have an option to keep our design as Smart Object.

Also when we are working in Adobe Photoshop and we have multiple layers, we can covert all or a few layers into Smart Object. For example if you are designing a website and there are multiple sections of landing page like header, hero, services, footer etc, you can select all layers of hero and press right click of your mouse then select “Convert into Smart Object” option. You will notice that all selected layers are removed from layer panel and only one layer is visible with name of smart object, you can rename it and keep some relevant name. Now all of your layers are saved in this one layer and you can edit them anytime by double clicking on this layer. When you will double click on this all layers will be visible and you can make changes in this file, save it and close file, you change will be done and occur in your original landing PSD.

Why should we use smart object

The main reason to use Smart object is re-usability. Let’s discuss again above mentioned example of landing page, if you have multiple page of your website and there are a few common module in all pages. Whenever any new changes come from client you have to change in all of your psd. It will be very easy for you if you converted all common modules into Smart Object. What you need to do it just convert your header into smart object and save as that Smart Object file as .PSB format and close it. Now in your About, Service and contact pages wherever you are using similar header just use this “Header.PSB” file or in about.psd file select your header files convert them into smart object, press right button of your mouse and click “Replace Contents” option, now you can re-link your Header.PSB file. Now whenever you will make change in your Header.PSB that change will be done in all your psd files you just need to “Replace Content”.

Smart Object Benefits

  • Once you converted your image into Smart Object then you can resize, scale, rotate, skew, distort, perspective transform, or warp your image without losing original resolution and quality.
  • The most important benefit is re-usability of Smart Object as mentioned above.
  • Art work can be copied as Smart Object from Adobe Illustrator to Photoshop and can be edit anytime.
  • Make changes in your Smart Object and automatically update all its linked files.

View all Glint Pixel videos

How to slice mobile application for iPhone and Android from same PSD

Mobile application is a big need of this area and hundred of applications are being launched on daily basis. There are different mobile platforms but most famous are iPhone and Android. More than 90% people are using iPhone and Android. So mobile developers and designer’s demand is increasing day by day.

How to slice for iPhone and Android

If you have designed custom application and design will remain same on iPhone and android then you just need to slice only for large resolution device like 6 plus. Just create 4 folders with following names 3x, 2x, 1x and 4s. Once your slicing is done for 6 Plus just keep it in 3X folder. Now create batch action in Photoshop and convert all 3x slicing into following percentage “66%” and save it into 2x folder. For Photoshop action watch my this video https://youtu.be/1idh3Mi71yM. Now you have to repeat with all remaining resolutions 2x, 1x and 4s.

For Android you have to create following folders XXXHDPI, XXHDPI, XHDPI and HDPI. Actually these resolutions cover almost all Android devices. For XXXHDPI you can cope 6 plus slicing as it is no need to change but splash sizes of each screen will be different you can’t create them with action.
Below I am going to mention iPhone and Android devices sizes and slicing percentages. For slicing you have to follow same pattern as for iPhone.

For iPhone

  • 4 / 4s – 640 x 960 – Keep as 1x
  • 5 / 5s – 640 x 1136 – 1x: Slice 33.33%
  • 6 – 750 x 1334 – 2x: Slice 66%
  • 6 plus – 1242 x 2208 – 3x: Keep it as it is 100%

For Android

  • HDPI – 480 x 854 – Slice 38.65%
  • XHDPI – 720 x 1280 – Slice 57.97%
  • XXHDPI – 1080 x 1920 – Slice 86.96%
  • XXXHDPI – 1440 x 2560 – Slice same as for iphone 6 +

View all Glint Pixel videos

Copy design from Adobe Illustrator to Adobe Photoshop

Hello Friends in this tutorial you will learn how to copy design from Adobe Illustrator to Adobe Photoshop. If you are going to start project in Adobe Photoshop and might be you need some of your design parts from Adobe Illustrator then this tutorial is very important for you. This is very easy to copy content from Illustrator to Photoshop it is slightly tricky.

Basic Information

When you have to move your design from Adobe Illustrator to Adobe Photoshop you will have to options, one is export which I never use and second is copy your desired part of design and paste in Photoshop. When you will paste your design in Photoshop it will give you a few options:

  • Smart Object
  • Pixels
  • Path
  • Shape Layer

You have to choose one them option.

1- Smart Object

If you select Smart Object option that is good because you can edit anytime time your design by double clicking on the layer. You can resize this object as you want it will not be pixalting and when you need to edit this just double click on its layer and it will get open in Illustrator because originally it was designed in Illustrator. To know more about Smart Object you can visit my Video and Article from the following link:
How to use Smart Object in Photoshop CC Tutorial. Smart Object Benefits.

2- Pixels

If you select Pixels then you design will appear as raster image and this method is not recommended at all. Because once you pasted neither you can enlarge this nor you can edit it. You can simple avoid this option.

3- Path & Shape Layers

This method is recommended as well like Smart Object. In this method you will get all original layers and objects as they were in Illustrator. The most useful benefit is you can edit them within Photoshop because now you have full control of layers. You can change the colors and modify the shapes according to your requirement.

View all Glint Pixel videos

How to change size and dimensions of multiple images within minutes

How to change size and dimensions of multiple images within minutes is my today’s topic. As you know now a days personal and business websites are need of everyone. Specially eCommerce websites have huge databases with a big number of images.

So now I am going to teach you a perfect and quick way to resize your images. For instance, you have a big number of images and you want all of them to resize with same width or height. Go to Adobe Photoshop and open action panel from the windows menu. There you will find a few action folders in default just ignore them for now. and click on “create new set” icon from the bottom of actions panel. You can choose a name for this set, now click on “create new action”. Once you clicked on create new action your action recording will be started. Now just open one image from the images folder and resize it as you want and save it in a new folder somewhere. Close your file and click on stop icon in actions panel.

You action has been recorded and now its a time to apply on all images.

  • Go to file menu >> Automate >> Batch
  • From the first play option select your set name then action name
  • In source select your folders where your images are available
  • Override option should be checked
  • From the destination options select your destination folder where you want to save your images
  • Again Override option should be checked
  • Press OK button

Now all of your images will be open and will be saved at their destination after resizing automatically.

View all Glint Pixel videos

How to change/swap face in Photoshop.

How to change/swap face in Photoshop is very easy. You just need to follow steps below:

  • Open both images in Adobe Photoshop
  • Copy your new image which you want to show and paste in other image window
  • Now you both images should be in one file
  • Your required face image layer should be above
  • Select top image layer and click on “Add Layer Mask” from layer pannel
  • Select brush tool from tools
  • Now start brushing on the image but keep in mind at the bottom of tools, colors should be black and white.
  • If your brush is not working then press “x” or swap the color from the bottom of tools
  • Now you can make visible face from new image and hide unwanted area

View all Glint Pixel videos

How to Convert an Image Into a Vector Graphic in Adobe Illustrator

Convert image into vector very easily with a few easy steps in Adobe Illustrator. There was a time when people have to use big and small images in there websites. But now time has been changed and there are retina devices everywhere and we can not use images in our website and mobile applications.

Importance of vector graphics

As we know technology is getting advanced day by day and we can not afford raster images in our websites and applications. There are various negative points of using images in websites for instance your website will take lot of time for loading, SEO problems and on retina devices image will be pixlated etc.

So to avoid such problems we have to use vector images. And if due to some reason vector graphics are not available we have to convert our images into vector. If we will convert required images into vector it will make our life easy. For example, if we use SVG code in website there will be 3 major benefits, first of all it will be using as a code so no fear of loosing quality, secondly it will be very light weight just a few Kbs and lastly you can change the color of your SVG file anytime with css code.

Steps: How to convert image into Vector

  • Open Adobe Illustrator and take a new document with RGB or CMYK mode.
  • Open your image in Adobe Illustrator, you can also drag and drop your image.
  • Select your image and go into Object menu.
  • Select sub menu Image Trace
  • In Image Trace menu click on “Make and Expand”
  • Now image has been converted into vector, now press right click of your mouse and do Ungroup it.
  • Click somewhere else in your document and deselect your image.
  • There could be some unwanted objects or layers simply delete them.
  • Select your vector again and change it’s color as per your requirement. You can save this graphic as SVG image or can copy SVG code.