Modern Wordpress Websites 2022 | Elementor & Adobe Photoshop

Explore Photoshop essentials for project creation, from the interface and tools to the pen tool, brush tool, layers, masks, clipping masks, color adjustments, and smart objects to preserve quality.

Explore the basic Photoshop interface, including the left toolbar and right workspace. Organize tools and learn like direct selection, move, pen, brush, rectangle and ellipse tools, plus layers and zoom.

Learn the Photoshop pen tool basics, with path mode for tracing and shape mode for lines and curves, accessed via the icon or the b key, focusing on cutouts.

Learn to draw lines in Photoshop with the pen tool, from a simple two-point line to horizontal, vertical, and forty-five degree lines, constrain with shift, and rotate to any angle.

Learn to draw curves with the pen tool in Photoshop and control Bezier handles to shape convex and concave curves, adjusting intensity and centerline angle with handle length and direction.

Master the Photoshop pen tool to create straight and curved shapes. Explore three methods for symmetric, asymmetric shapes, and cutouts for web design.

Sharpen your Photoshop pen tool skills by constructing and refining pentagon shapes, adjusting points and tangents, splitting curves into parts, and ensuring precise line lengths.

Create complex shapes in Photoshop by tracing a pentagon, detailing points and tangents, and producing a final cut-out for Project 5 shapes III in the pentagon section.

Learn the basic use of the brush tool in Photoshop, including foreground and background colors, and how to set the foreground color before painting; opacity and hardness come next.

Cover brush tool properties including hardness, opacity, and flow, and demonstrate how 100% vs 50% hardness creates sharp or diffused edges, with flow enabling gradual shading.

Learn to organize artwork in Photoshop with the layers panel, create shapes on separate layers, control visibility, and apply locks—position, transparent pixel, and master lock—to link and group layers.

Learn to use layer masks in Photoshop to selectively reveal or hide image areas, switch black and white, and apply selections and shortcuts to control transparency and opacity.

Learn how to use clipping masks in Photoshop to reveal only the portions of a brush stroke or photograph inside a circle, creating precise edge clipping.

Explore color filling and adjustments in Photoshop, using shortcuts to fill areas with background, foreground, or custom colors; manipulate hue, saturation, lightness, brightness, and contrast for dynamic effects.

Explore smart objects in Photoshop, learn why they preserve image quality when resizing, and convert layers to smart objects to avoid loss, via the dot PSP file concept.

Learn to build a BulkNShred WordPress site with seven sections, a responsive navigation bar, and desktop and mobile layouts by installing WordPress, a theme, plugins, and Photoshop-created visuals.

Set up a new WordPress site, create credentials, and log in. Install and activate Elementor and essential plugins (addons, blocks, and forms) to prepare for building the site.

Build the website layout using Elementor, create scrolling navigation with section IDs, set page to Elementor canvas, add editing handles, publish, and assemble a multi-section menu linking to sections.

Design a home background in Photoshop with intersecting lines, shapes, and circles, group and rotate them, then set the image as the Elementor WordPress background and optimize for mobile.

Learn to build and style the home section by adding a logo, navigation bars for mobile and text versions, and header text, then set the homepage to a static page.

Create the about us graphic in Photoshop by defining dimensions, tracing a cutout with the pen tool, adding a shadow, and validating desktop and mobile layouts.

Build the about us section in WordPress with Elementor, creating a two-column layout on a black background with an image and gold heading, and optimize mobile by reversing columns.

Create program graphics for the programs and classes section by determining dimensions, cropping images in Photoshop, and assembling multiple icons from a single master file.

Bring all graphics to the site, add captions, and tailor the programs and classes section for desktop and mobile with typography (golden, uppercase, Grierson’s), a four-column gallery and padding.

Create a unique consultancy section background in Photoshop by tracing a cutout with the pen tool, applying masks, and layering a mirrored cutout with a gold accent background.

Guide to building the consultancy section with a background image, black background, and minimum height. Align text to the right with a 40/60 column split and a premium button.

Create and align Photoshop cutouts for the special instructor section, set a 1350x400 canvas, expand to 1900 width, convert to smart objects, and add a black rectangle for design space.

Design and finalize a multi-layer graphic for both text and mobile versions by creating shapes, adjusting vertices, applying masks, and exporting in Photoshop for Elementor integration.

Set up the special instructor section by configuring desktop and mobile backgrounds, adding text, adjusting typography, and applying minimum height and a black background.

Create two image cutouts in Photoshop to craft gallery backgrounds for text and mobile views, converting layers to smart objects, resizing, and saving final backgrounds.

finalize the image gallery by setting a background for text and mobile. enhance with golden lightbox color and typography, and ensure captions appear.

Create the newsletter subscription section for a WordPress site using photoshop to design desktop and mobile backgrounds, then implement with elementor and a wpforms subscription form.

Finish the final portion of the website in Elementor, applying color, typography, and layout tweaks, adjust gaps and margins, and verify navigation links for a responsive, ready-to-publish WordPress site.

Learn to build the Atlantor website in WordPress with six sections, ensuring text and mobile responsiveness via a responsive navigation bar, with Photoshop graphics and end-to-end setup.

Set up a WordPress site in local software, create credentials, log in, and install and activate the theme and Elementor and a header/template plugin to prepare the site navigation.

Learn to build a basic WordPress layout with Elementor, create a two-column header with logo and navigation, and assemble a navigation menu using custom links.

Learn to create a home section background in Photoshop using a cutout, then apply the background image to both desktop and mobile layouts in WordPress via Elementor.

Configure the home section by adding and aligning the logo, styling the navigation bar, and applying typography and spacing for desktop and mobile versions.

Create three explorer section graphics in Photoshop, using precise canvas sizes, colorization with the site color, careful positioning, and saving each as a JPEG for the wordpress site.

Finalize the explore section by importing all graphics, adding content, and adjusting text and graphics for desktop and mobile, including darkening the background to improve navigation visibility.

Create a banner section by designing a banner graphic in Photoshop, apply it as the section background, and style the heading for desktop and mobile to ensure clear visibility.

Create packaging graphics for the site in Photoshop by defining uniform dimensions, building four canvases, placing images, adding white frames and rings with clipping masks, and exporting jpgs.

Set up the packages section by adding sport graphics, headings, and descriptive text; adjust layout and typography for desktop and mobile, including column order and responsive tweaks in Elementor.

Create the review section graphic in Photoshop by setting dimensions 445x90 and 445x190, building layered backgrounds with yellow rings, masks, and hue adjustments for the website.

Learn to finalize the review section in wordpress using elementor, add text editor, image, and heading widgets, and position them with absolute positioning for a responsive desktop and mobile design.

Create the final content section with Elementor, design a 1900×563 Photoshop background, and build a styled contact form using WP Forms for desktop and mobile.

Finish the WordPress site by adding the final photo, creating a new section, tuning typography and padding for desktop and mobile, validating all links, and setting the homepage before publishing.

Learn to take a local WordPress site live by creating a free test site in a lab environment, then migrate it to a live host using a backup plugin.