The Ultimate Web Designing Course in Photoshop

Acquire essential photoshop tools for web design by creating shapes with shape tools, moving and aligning layers, and applying the type tool with styles and gradients.

Master the rectangle tool in Photoshop: create a new document, enter width and height to draw rectangles or squares, or drag while holding the Shift key to constrain proportions.

Use the rounded rectangle tool to create rectangles and circles by adjusting radius, including making circles from equal width and height and using zero radius for rectangles.

Learn to use the ellipse tool in Photoshop to draw ellipses and circles, using two methods and the shift key for perfect circles.

Explore the polygon tool in Photoshop to draw polygons with five or three sides and swap foreground and background colors with d and x for logo design.

Learn to use the line tool in Photoshop by drawing straight lines with shift, adjusting line weight from 1 to 5 pixels, and adding start or end arrowheads.

Learn to use the custom shape tool in Photoshop by selecting a default shape from the option menu (e.g., a chat shape) and drawing with a click and drag.

Learn to draw rectangles, move them with the move tool across layers, change a rectangle color, and center shapes inside the black rectangle using alignment options.

Learn to align objects in Photoshop using right, left, top, bottom, vertical center, and horizontal center options. Group rectangles with Ctrl+G and apply centering to position them precisely.

Use the type tool to write text for web design, select font family and set size up to 72 pixels, then adjust line height and spacing in the character panel.

Master the eyedropper tool in Photoshop to sample colors from rectangles, switch between blue, green, and yellow, and set the foreground color with a click.

Learn to use the swatches panel in Photoshop to save and apply predefined and custom colors as the foreground color for shapes, streamlining design workflows.

Create and manage layers in Photoshop by drawing shapes and text, note that new layers appear above the currently selected layer, and rename layers and adjust thumbnail sizes.

Explore layer styles in Photoshop to apply drop shadow, gradient overlay, pattern overlay, color overlay, inner glow, stroke, and blend modes to enhance web design elements.

Practice a fun project drawing a cartoon face with the ellipse tool, aligning and centering shapes, duplicating features, and setting the foreground color for expressive eyes and lips.

Explore using the rectangle tool and marquee tool in Photoshop to place and center text inside a rectangle, adjust size and color, and align text with move and alignment options.

Apply the direct selection tool in Photoshop to resize rounded rectangles with a preserved 200-pixel radius, using anchor points and Shift-drag to avoid distortion across versions.

Explore the gradient tool in Photoshop to create gradient overlays with color stops, blend modes, and linear or radial gradients, and apply gradient masks using layer masks.

Learn how to use the Pen Tool in Photoshop to create anchor points and paths, convert shapes, apply fills and strokes, and build quick arrows for web design.

Explore how to design UI/UX elements in Photoshop, including navigation menus, glossy buttons, call-to-action buttons, pricing tables, and contact forms.

Create a simple navigation bar in Photoshop by drawing a rounded rectangle, centering it, adding white text for Home, Services, Portfolio, Team, Testimonials, and Contact, and adding separators.

Create a gradient navigation bar with a gradient background and overlay using a linear gradient, color stops, and stroke adjustments; duplicate groups, adjust color stops, and compare variations.

Learn to design a clean navigation bar in Photoshop by hiding separators, colorizing the text, and adding a highlight rectangle to indicate the current page.

Create a glossy apple icon button with gradient overlays, shine, highlights, and subtle shadows using Photoshop tools such as ellipse, gradient, warp, layer masks, and hue-saturation adjustments.

Create a simple call to action button in Photoshop by drawing a 50px high by 400px wide rectangle, centering the text, applying a blue stroke and white fill.

Learn to design colorful call-to-action buttons in Photoshop by creating rectangles, adding text, aligning elements, applying color overlays, shadows, and grouping duplicates into reusable button collections.

Design a contact form in Photoshop by creating a 1200 by 1200 pixel white document, drawing a 400 by 40 pixel input rectangle with a subtle stroke and drop shadow, and aligning elements on a 56-pixel grid. Continue by styling the text, arranging fields with vertical and horizontal centering, grouping related elements, and adding a dropdown arrow and textarea to complete the form.

Design a pricing table in Photoshop by building a 700-pixel background, creating plan, pricing, content, and sign-up sections, aligning elements with guides and centering text for a professional web layout.

Design a slider in Photoshop by creating a background, adding navigation arrows and indicator circles, and colorizing the image with hue/saturation adjustments and gradient overlays.

Create a Photoshop progress bar with a blue background and a red foreground, using 50 px height and 25 px radius, plus gradient overlay, stroke, and shadows.

Discover the four golden steps of web designing with a step-by-step approach that builds confidence to design corporate portfolio and e-commerce websites.

Get the details as the first step of web design by gathering client or self-provided specifications and boundaries, and plan sections such as about us, contact us, and services.

Discover how to progress from design details to inspiration by exploring popular corporate website designs, generating creative ideas while avoiding copying.

This lecture covers wireframing as the third step, guiding you to sketch a wireframe from site inspiration, using pen and paper or Photoshop, then proceed to implementation.

Plan the final stage of website design, focusing on phone sizes, fonts, colors, and image selection. Implement the design by wireframing, building the grid, and sourcing stock images.

Discover essential tips for website design, learn to choose colors, navigate Photoshop shortcuts, and explore the great system to boost your skills in this Photoshop-based web design course.

Explore the grid system as a portable, responsive structure that stacks content for mobile devices using a 12-column Bootstrap grid.

Explore image enhancement techniques in Photoshop, including hue/saturation adjustment with colorize, gradient overlays, clipping masks, and blending modes to create varied color effects and improved image quality.

Choose the best colors to enhance web design, using a white background and alternate section colors with images, and paste color codes from inspiration sites into Photoshop.

Select google fonts to ensure consistent typography across devices by linking fonts in HTML/CSS; the railway font is used for a corporate web design project.

Learn how to adjust the weight and height of Font Awesome icons in Photoshop using the character panel, ensuring icons match text weight and alignment for effective call-to-action designs.

Explore the importance of using high quality resources in web design, including high resolution images, patterns, backgrounds, brushes, styles, gradients, and custom shapes, with links to free and paid sources.

Learn how high-quality images from free and paid royalty-free sources enhance web design, covering backgrounds, team photos, and blog post visuals.

Explore patterns and backgrounds essential for stylish web design, including polygonal, blorb, and pattern backgrounds, with links to free patents and patent sites for download.

Explore how Photoshop brushes create grunge and colorful strokes for web designs, adding splatter effects and a grungy vibe, with a downloadable brush pack to use in future projects.

Explore how to use styles and gradients efficiently in Photoshop, applying gradients to backgrounds, images, and masking with controlled opacity while avoiding overuse.

Explore when to use custom chips in web design with Photoshop, especially when icons aren’t available, and learn why stocking custom assets boosts confidence.

The lecture explains why icons are essential in web design, highlighting social and contact icons, and compares using icon fonts versus downloadable icon images.

Explore portfolio website design by searching for inspiration and opening links to spark ideas, while avoiding copying and using mocked designs for practice.

Learn to design a professional one-page corporate template in Photoshop, plan typography and colors, then start creating the template to gain confidence in corporate web design.

Design a corporate website by creating product-based and service-based templates with sections for products, services, testimonials, contact us, team, and block sections, telling a story section by section.

Plan typography, colors, and a bootstrap grid for a cohesive web design in Photoshop. Define heading scales (36, 30, 24) and body text (14px) with consistent colors.

Design the header by creating a blue header background, adding a logo and navigation links, and aligning the logo, text, and the search icon with a 34-pixel gap using grid.

Design a modern web header with a sticky, hidden-on-scroll slider in Photoshop, including header grouping, slider background, clipping mask, typography, and call-to-action buttons.

Design the services section in Photoshop, building a six-service grid on a 12-column layout with a styled header, icons, and copy for web design, graphic design, and HTML / CSS.

Designs the works section with a 12-column grid, builds a three-column project carousel, and adds navigation arrows, clipping masks, and a subtle background image.

Design and customize the team section in photoshop by duplicating the existing section, adjusting canvas size, changing images and colors, and applying a slider to showcase multiple team members.

Design a client testimonials section in Photoshop by building a grid layout, using circular image masks, text for names and titles, and a three-dot navigation with a dark background.

Create the blog block section featuring recent posts from blog, arranged in a four-column Bootstrap grid for three posts, with typography, color, and alignment refinements.

Design a contact us form in Photoshop by shaping the form group, renaming fields, aligning center, adjusting colors and opacity, and adding a submit button.

Design the footer section by expanding the canvas and grid, then add about corporate, newsletter subscription, and connect with Facebook, Twitter, and Google Plus.

Design a polished website footer in Photoshop by arranging social icons, applying color overlays, aligning elements, and incorporating copyright details for a professional BSD template.

Improve the corporate template, enhance the slider, and apply a vote fix for the projects and team members to validate stronger results.

Improve the corporate website slider in Photoshop by applying a gradient overlay with three color stops, adjusting opacity, and adding left and right arrows and three navigation dots.

Apply a hover effect to the projects section in Photoshop by duplicating project blocks, aligning text, adjusting fonts and colors to the primary blue, and adding icons for interactions.

Demonstrates building a hover effect on team member cards in Photoshop, duplicating cards, adding names and roles, social icons, and two hover variations.

Design a hosting template by outlining essential components, selecting blurred backgrounds or images, and planning typography and color. The lesson guides hands-on project work with tips and tricks.

Design a hosting website template by outlining mandatory sections: services with hosting types, features, pricing table, and a contact form, with testimonials optional, and plan typography in upcoming lessons.

Plan typography, color palette, and grid in web design by defining heading font sizes, color codes for primary and secondary colors, and a 56-pixel grid for a cohesive Photoshop layout.

learn to create a blurred background in Photoshop by applying a filter and adjusting hue-saturation. use the colorize option to fine-tune the result for a hosting template.

Prepare a slider image in Photoshop by masking with a layer mask, using the quick selection tool, refining edges, and brush masking to control visibility.

Learn to prepare the feature image by masking with the quick selection tool, duplicate the layer, add a layer mask, blur the background, resize, and save as features CMH.

Design and refine the header section in Photoshop, set up the canvas and grid, craft typography, and integrate navigation links and social icons for a cohesive header.

Design the slider in Photoshop by creating the background, arranging the heading and features, and adding a call-to-action button with a 3d look and navigation arrows.

Design the services section in Photoshop by creating a six-column rectangle with 50% fill and a 1px stroke, then add Font Awesome icons and centered headings.

This lecture shows turning the services section into the four-column features grid in Photoshop, renaming layers, aligning headers, and applying hue/saturation with clipping masks for the feature image.

Design a three-column pricing table in Photoshop by duplicating features, aligning sections, and styling with Bootstrap grid, centered text, and color adjustments for a cohesive pricing layout.

Design the testimonials section by duplicating the pricing group into a centered slider with a headline, content, and John Doe attribution, refining visuals with clipping masks and navigation dots.

Design contact us section in Photoshop by building a left-aligned contact form with name, email, subject, and message fields, add a send button, and place office details on the right.

Design a minimal footer for a hosting template by aligning the logo, navigation links, social icons, and copyright information to the baseline grid and 56-pixel grid, creating a polished look.

Design and customize a hosting template in Photoshop by updating the slider, services, features, pricing, and testimonials sections, using clipping masks, color changes, and multiply blending.

Design a multi-page portfolio template and learn how to plan typography for a portfolio website, then dive into the project to reveal the finished design.

Design a portfolio website by including essential components for a portfolio template that advertises you, such as your recent books, your designs, a skills list, testimonials, and a contact page.

Plan typography, colors, and the 56-pixel grid for the portfolio template using the lato font, with headings from 48 to 18 px and body text 14 px in color 333.

Design the header for the portfolio template with a white logo, 112-pixel height, left-aligned navigation (home, about, portfolio, contact) and an active home link color, plus right-aligned social icons.

Design the homepage slider section in Photoshop by creating a header, slider background, typography, and call-to-action buttons, then add navigation dots, arrows, and a top-left image with multiply blend.

Design the about us section of a homepage in Photoshop, building headers, icons, services, mission, and skills with a multi-column layout and color accents.

Design a portfolio section on the homepage using Photoshop, turning the about section into a carousel of projects with a 12 column grid, image clipping masks, arrows, and typography adjustments.

Design the testimonial section in Photoshop using a rectangle background, typography, quotes, and clipping mask, align to the baseline grid, set colors and blend modes for a polished portfolio.

Design the homepage footer in Photoshop by duplicating the header, centering the logo, and aligning the nav and social icons, then add the copyright symbol and resize the canvas.

Design a portfolio page in photoshop with a breadcrumb header, categorized navigation, and a grid of projects; implement category filters so selecting a link displays related work.

Design the about page by keeping the header and footer, converting portfolio to about us, updating the breadcrumb, and centering text. Build the team grid with grouped layers and arrows.

Design a modern contact page by preserving the header and footer, adding a New York map with a clipping mask, and arranging a left contact form with right office details.