Responsive Images with Inline CSS

On June 20, 2022July 14, 2023 By AndyIn Adobe Illustrator, Business, marketingLeave a comment

This is how I create images that are full width in desktop devices and mobiles etc.

You just need to use:

max-width: 100%;
height: auto;


      
            <img src="image-address.png" 
style="max-width: 100%; margin-bottom:0; max-width:1000px; height: auto;"
         alt="relevant description of image" >

Change the “max-width” to whatever you want the max width of the image to be on a desktop device.

For personal reference, this is the exact code I need for my own website with pre-built classes:

 <div style= "margin-bottom:20px;" > 
      <div class="content-item">
            <img src="image-url" style="max-width: 100%; margin-bottom:0; max-width:1000px; height: auto;"
         alt="relevant description of image" >
      </div>
  </div>

Here’s another example that I used today (july 2023!)

  <img src="drews-sexy-image.jpg"  style="width:1000px; max-width: 100%; height: auto; padding-top:25px;" alt="Basketball hoop dimensions" />

In the code above^ – the image will be 1000px wide on desktop, and the width of the screen on smaller devices

Padding-top, just puts some white space above the image

By the way – when you set image sizes to % – this represents the % of the block that the image is contained within

Illustrator: Adding Reflections to Images with Masks

On March 12, 2020 By AndyIn Adobe Illustrator, BusinessLeave a comment

How to Add Reflections to images with masks in Adobe Illustrator

Insert a photo go to File>Place and select a photo from your computer
Place it by left clicking on the artboard
Scale it down
Edit>Copy
Edit>Paste in Place
Object>Transform>Reflect (horizontal axis for pasting below or above rather then left or right)
Drag the reflection / refelected image down, until it snaps in place

Select Rectangle Tool – create a black rectangle
Press CMD (or CTRL) and Y to see outlines
Line up the rectangle to cover the bottom photo
Select the black rectangle and the bottom photo which is underneath

Select the Transparency Pallet

Click “Make Mask”
Untick “Clip”
Click to select the black rectangle in the panel:

Next Click on Gradient
Adjust the gradient – anything that is black blocks part of the image, white keeps the image:

adobe illustrator gradient — change to -90 degrees to fade bottom more

In the color panel, change the RGB to all zeros to completely cover part of the photo

Illustrator – Compound Paths & Clipping Masks

On March 9, 2020 By AndyIn Adobe IllustratorLeave a comment

Creating Compound Paths & Clipping Masks in Illustrator

Compound path consists of two or more paths that interact with each other
source

Create two circles using the ellipse tool
Add a gradient
See how the gradient is added seperately:

Select both of the circles
Go to Object>Compound Path>Make
Now the gradient will be applied both circles together
The shapes are effectively one shape, with a space in between

Compound Paths can be applied to text too
Just select the text and then go to Type>Create Outlines first

Illustrator – Creating an ‘Infinite Symbol’

On March 3, 2020March 20, 2020 By AndyIn Adobe IllustratorLeave a comment

How to create the Infinite Symbol in Adobe Illustrator

Select the Type Tool
Go to Type menu – Type>Glyphs>choose the infinite symbol:

double click to add the infinite symbol
Use the Scale Tool* to enlarge it (*on the right below)

Turn the Text Icon into a Shape

Select the infinite symbol, go to Type>Create Outlines
Use the direct select tool to move bits of the symbol about and reshape it

Illustrator – Drawing a Volume Speaker Icon

On March 2, 2020March 3, 2020 By AndyIn Adobe IllustratorLeave a comment

How to draw a volume icon in Adobe Illustrator

Making the Speaker

Select the rectangle tool
Create a black ‘vertical rectangle’

Copy & Paste the rectangle and drag to the right – Edit>Copy, Edit>Paste in Place. Then hold down shift and drag to the right

Colour the right rectangle red (Just to distinguish the two)

Use the Direct Selection tool and select the two corners of the red rectangle that are furthest to the right:

Use the Scale Tool (See toolbar above – the scale tool is on the right, near the top, usually) – drag the two corners up and down:

Select the two right-hand-side corners again
This time drag them to the right slightly, to make the red shape thicker
Colour both rectangles black when you are happy with the shape:

Drawing the SoundWaves

Using the elipse tool (found under the rectangle tool) and holding shift – drag out a circle
Using the Direct Selection tool – drag out a ‘selection field’ to select a point on the left: