How to create a circle profile image for HTML using Adobe® Photoshop® and Adobe Dreamweaver®
Here is a simple process for creating a circle and square profile image in JPG and PNG formats:
Steps to create a square profile image:
1. Open your image in Adobe Photoshop and crop (Crop tool C)
2. Save image (File, Export, Save for Web (legacy)…) as PNG or JPG
3. Insert into HTML layout: i.e. src=“img/profile/woman-sq.jpg”
Steps to create a circle profile image:
1. Open your image in Adobe Photoshop and rule up using the Ruler (View, Rulers (cmd + R))
2. Use the Elliptical Marquee Tool (M) and drag holding the shift key to create a circle shape
3. Check Layers panel to make sure you are on a numbered layer (double-click on a locked Background layer to convert)
4. Select “Add layer mask” icon at the bottom of the Layers panel to isolate the active circle area (circle should now be on a transparent layer)
5. Crop the image to a square if needed and save (File, Export, Save for Web (legacy)…) as PNG
6. Insert into HTML layout: i.e. src=“img/profile/woman-cir.png”
Link to royalty free image used in this video: https://www.shutterstock.com/image-ph...
Best practice tip: PNG image sizes are generally smaller than JPG.
Hope you found this tutorial helpful—please give me a thumbs up and subscribe if you did!
Thank you for watching!
#genxdesigner #genxdesigner123 #graphicdesignerslife #graphicdesignertechandtips #adobephotoshop #adobephotoshopediting #adobephotoshop2023 #imageediting