Graphic Designer Vs Web Designer

Results for Effects

75 Faded Film & Retro Effects

Kamal Thakur Tuesday, September 22, 2020

75 Faded Film & Retro Effects

☛ Download (45 KB)

Transform your photos with beautiful faded effects in just one click. Includes 31 film effects, 19 Instagram Faded Effects and 25 SparkleStock Prestalgia faded effects.

75 Faded Film & Retro Effects

Reviewed by Kamal Thakur on Tuesday, September 22, 2020 Rating: 5

Sci-Fi Effects In Photoshop

Kamal Thakur Saturday, September 19, 2020

Push the effects to the max: You can take your buttons to another level by applying hot to soft orange gradients and a thin 1px Inside Stroke at 30% Opacity. This will further enhance your luminous effects. Grouping respective layers into Smart Objects and sharpening also helps to intensify the futuristic feel.

• Inspiration: www.disney.co.uk/tron

Tron Renaissance: “In 1982 Tron was released and inspired millions of graphic designers, spawning franchises across the globe. Sadly, for many years, the film’s looks couldn’t be translated online – hardly a surprise as the web didn’t really take off until six years after the film! However, with a resurgence of the brand thanks to TRON: Legacy (released in 2010), and the much more advanced capabilities of contemporary software, these boundaries thankfully no longer exist.” - Adam Smith

Cinema is awash with awesome Sci-Fi special effects right now that are being deployed in branded websites, as well as inspiring others to create more personalised styles. From floating transparent panels to holographic Flash effects and energised lighting and colour, many sites are being given a futuristic twist.

A great example is www.disney.co.uk/tron. The site’s design follows the aesthetics of the TRON 2.0 brand meticulously, littered with neon lighting – most noticeably in the page’s buttons and panels. These sport outer glow effects that are further boosted through the use of textures, along with a little Flash animation and electronic audio.

Here we’ll show you how to recapture the 2D effects of this website using the power of Photoshop’s layer style options and shape tools. These effects can be enhanced further still with a bit of your own creativity.

#1 - TOOL TIPS: Create A Bokeh Brush

Bokeh is great for enhancing focal points in lighting effect images. It creates the illusion of depth of field in 2D digital formats – a great asset for web designers looking to create authentic floating or holographic futuristic elements. Creating this effect wholly in Photoshop is easier than you might think. Start by opening a new layer and applying a light grey (#6c6c6c) Ellipse shape. Add a white 2px Stroke set to Outside. Ctrl-click your shape layer, selecting Convert to Smart Object. Cmd/Ctrl your Smart Object and select Edit > Define Brush Preset. Now apply this to a new layer at 10% Opacity, with the Scattering parameter at 1,000%.

#1 - TOOL TIPS: Create A Bokeh Brush

#2 - TECHNIQUE: Nail Neon Effects

STEP 1: Set Up Your Canvas

Open a dark navy backdrop layer. Set your foreground colour to #364f7c then select Gradient Overlay from the Layer Styles options. Set Opacity at 30% and Scale at around 85%. Create a new Soft Light layer and choose a large blue (#364f7c) brush. Make sure that Pen Pressure is activated in the Brush Presets.

STEP 1: Set Up Your Canvas

STEP 2: Shaping Up

Apply your brush to the edges of your image and add a layer mask. With this active, go to Filter > Noise > Add Noise > Amount 11% to limit gradient banding. Select the Pen Shape tool and draw out a shape like above. The Ellipse shape tool has been added in the bottom right corner, set to Combine Shapes.

STEP 2: Shaping Up

STEP 3: On The Right Path

Set blending to Overlay and add a layer mask. Apply a 50% Opacity black-to transparent gradient to the bottom-right of your shape twice. Cmd/Ctrl-click your shape layer thumbnail, create a new layer, select the Paths panel and choose to Make Work Path from a selection. Cmd/Ctrl-click the path thumbnail to make a selection.

STEP 3: On The Right Path

STEP 4: Add An Outline

Select a small hard orange brush and Ctrl-click your path, before choosing the Stroke Path option. Apply a #f47a20 colour, with Opacity at 53%, Noise at 5%, Spread at 8%, Size at 16px and a Screen blend mode. Duplicate the outline layer, setting blending to Screen. Press Cmd/Ctrl+U and drop the Hue to -180.

STEP 4: Add An Outline

STEP 5: Time To Erase

Next, apply a layer mask to this layer and erase halfway from the left. Reactivate your original shape layer and apply a Tiles-Smooth Pattern overlay (in Layer Styles) at 25% Opacity and 85% Scale. Use what you’ve learnt to create a new shape (see above) in the bottom-left corner of your design.

STEP 5: Time To Erase

STEP 6: Feather-Light Touch

Duplicate your original shape layer and your last shape, reset both the blending modes to Normal, then delete any attached layer masks and layer styles. Place both new layers at the top of the stack, Cmd/Ctrl-click them and press Cmd/Ctrl+E to merge. Now select the Feather Elliptical Marquee tool at 1px size.

STEP 6: Feather-Light Touch

STEP 7: On The Button

Next, select the right-hand side of your shape and add a layer mask, inverting this (Cmd/Ctrl+I). Drop the new layer’s Opacity to 20% with Fill at 35%. Create your button by selecting the Ellipse shape tool and activating the Path setting. Draw out your circular button on another new layer and open up the Paths panel.

STEP 7: On The Button

STEP 8: A Glowing Finale

Cmd/Ctrl-click your path, selecting Stroke Path, with a hard, hot orange brush. Edit your shape to taste with a layer mask. Now add a pale orange Screen blend mode, Outer Glow, at 55% Opacity and 7px Size. Lastly apply a white Screen blend mode, Inner Glow, at 25% Opacity, with the Choke set to 18% and Size to 6px.

STEP 8: A Glowing Finale

Sci-Fi Effects In Photoshop

Reviewed by Kamal Thakur on Saturday, September 19, 2020 Rating: 5

Scrolling Image Effects

Kamal Thakur Saturday, September 19, 2020

Inform your users: This site has a preloader that pauses content from displaying until the images have loaded. This is great, but unfortunately, there is no feedback to tell the user what is happening, so it’s possible to think the site is broken as nothing appears for the first few seconds. A simple message to inform the user can make all the difference.

Emersing the user into the story: “This site is all about telling the YMCA’s story. One of their strengths is strong, emotional photography. We dug into their library to present fullscreen images that give the site immediate impact. The visuals were an opportunity to help set the mood and really draw the user in to each section of the story.” - Dan Bartley, Senior Designer

• Inspiration: www.imagineourymca.ca

One of the greatest weapons in the arsenal of a web designer is the image, and we’ve come a long way since the days of placing the smallest possible picture on a screen. Now designers are using the image to lead the user experience and coupled with the rich typography that CSS3 offers, we are witnessing the boundaries of HTML5 web sites pushed to greater success. This is evident in the Imagine our YMCA site created by Domain7. This skillfully crafted site uses jQuery to fade between background images as the site scrolls and the content on-screen changes. This produces a well-designed site that really adds to the user experience of the site.

Emersing the user into the story: “This site is all about telling the YMCA’s story. One of their strengths is strong, emotional photography. We dug into their library to present fullscreen images that give the site immediate impact. The visuals were an opportunity to help set the mood and really draw the user into each section of the story.”

#1 - INSPIRATION: An Enhanced Annual Report

Imagine our YMCA is actually the annual report, and it cost the same as designing, printing, and distributing a traditional annual report but has a far greater reach and shareability. Using a narrative-based approach, the team at Domain7 adapted the traditional paper-and-coil annual report format for desktop and mobile web viewing. This allowed the design to focus on key messaging within the site, a one-page display, photo evidence including galleries and moving image, mobile design, and a paperless approach.

#2 - TECHNIQUE: Transitioning With Scroll

STEP 1: Create A New Page

In Dreamweaver create a new HTML5 webpage and add the code to the head section. This links us to jQuery and creates the body style and the style for fixing the image container on the page.

CODE:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
body{
margin: 0; height: 1800px;
min-height: 1800px; padding: 0;
}
imageSwap{
position: fixed; overflow:hidden;
top: 0px; left: 0px; width:100%;
}
#imageSwap.fixed {position: fixed;top:0 px;}

STEP 2: Style The Content

Here we position the images and fix the content in a div over the top of them in a semi-transparent box. This content is positioned on the page so that we have to scroll down to see the next section.

CODE:

.one {position:absolute; z-index:1;}.two {position:absolute; display:none;z-index:2;}
.content {
background-color:rgba(125,0,0,0.6);
padding: 10px; height: 850px; width:800px;
margin-right: auto; margin-left:auto;
position: relative; z-index:100;
}
#first{top:50px;}
#second{top:350px;}
</style>

STEP 3: Add The HTML

In the body section of the document add the following code. Here we add the div container imageSwap which holds the images we will use in the background. We then have two content areas that are positioned above this. Finally, we move into JavaScript and set up two variables to hold the page position.

CODE:

<div id="imageSwap"><img class="one" src="image01.jpg" /><img class="two" src="image02.jpg" />
</div>
<div id="first" class="content">Content Area 1</div>
<div id="second" class="content">Content Area 2</div>
<script language="javascript" type="text/javascript">
var thisPos=1;
var lastPos=1;

STEP 4: Using jQuery

The document ready function fixes the background div and detects scrolling. If the user scrolls past 900 pixels then they are at the second div container, so we fade in the second image while fading out the first image.

CODE:

$(document).ready(function () {
$('#imageSwap').addClass('fixed');
$(window).scroll(function() {
var yPos = $(window).scrollTop();
if (yPos > 900){
thisPos=2;
if(thisPos != lastPos){
$('.one').fadeOut(500);
$('.two').fadeIn(500);
}
}

STEP 5: Detecting First Content

Now the final code reverses the last bit. Save this document now and, assuming you have two images named image01.jpg and image02.jpg, you should have a page that changes the background depending on scrolling.

CODE:

if (yPos <= 900){
thisPos=1
if(thisPos != lastPos){
$('.two').fadeOut(500);
$('.one').fadeIn(500);
}
}
lastPos=thisPos;
});
});</script>
item"></a>

#3 - TECHNIQUE: Create The Content Background

The content background has an image with a rip down each side. This image is a semi-transparent PNG and is straightforward to create. We’re going to show the creation process using Photoshop to put the composition together.

STEP 1: Create The Gradient

Create a new document 800 pixels wide by 100 high in Photoshop with a transparent background. Choose light red and dark red as the foreground and background colours. Use the gradient tool to create a gradient across the screen.

STEP 1: Create The Gradient

STEP 2: Fade Image

Make the Opacity of the layer 50%, and then we need to search online for a rip or tear image. When you find one that’s black and white or transparent already, download it and open in Photoshop.

STEP 2: Fade Image

STEP 3: Add The Rip

Select the rip using a colour selection and drag it into the gradient document. Position it at the edge and with the rip selected, choose the gradient layer and hit delete. If you turn off the rip layer you will have a ripped edge. Repeat this for the opposite side.

STEP 3: Add The Rip

Scrolling Image Effects

Reviewed by Kamal Thakur on Saturday, September 19, 2020 Rating: 5

Apply Transparency Effects In Photoshop

Kamal Thakur Saturday, September 19, 2020

Going in circles cultural solutions uk wanted to create an illusion of endless possibilities. The circular inspiration came from the identity, which used overlapping circles and overlays. They liked the use of parallax at the time, most notably at www.nikebetterworld.com.

Inspiration: www.culturalsolutions.co.uk

Transparent styles are rife in contemporary web design and, with new option upgrades in Internet Explorer and CSS, Photoshop artists are excelling in creating what are described as ‘faux-transparency assets’. Basically what this means is that Photoshop is being employed to create solutions without the need of data encoding, but rather to make solid images.

This is all thanks to the adoption of PNG-based files, which are now easy to apply with the Save for Web & Devices option. Here web designers can simply select PNG24 from the preset options, with Transparency ticked for sure-fire results. The effect looks just as seethrough to the end-user and sidesteps tricky issues with poor browser support and having to hack IE6.

David Lambert’s site (www.culturalsolutions.co.uk by Hoohaa Design) uses this style to great effect. He explains: “Web design is becoming a lot more fluid, aiming to engage the user this way. Websites are focusing more on experience rather than just providing well-organised content. Transparency effects have also become a lot more popular because PNGs are now well supported by most browsers.”

The site is targeted at the arts and culture sector so it had to make a statement. Lambert adds: “We aimed to make the site into a memorable experience for the user, with the aim to create a grown-up but creative feel.”

Parallax Effects:

“JavaScript-powered interactive elements help enrich and add depth to the visuals. The parallax motion of the circles at the top surprises the user, inviting them to explore. As the user moves down the page the parallax effect creates a fluid-almost-visceral feel. The various circle elements and jQuery-powered sliders are used to structure the content in a logical manner.”

#1 - Technique: Transparent Web 2.0 elements

Transparent icons and panels instantly make a website look modern and cool. One thing to always remember, however, is that you need a suitable backdrop to maximise this effect – so anything such as mosaic pixel patterns, strobe or bokeh lighting will really enhance your results. Here we show you how to create a transparent panel in just three steps using Photoshop, and how it’s affected by using one of the mentioned backdrops.

STEP 1: Cut Some Shapes

First select the Rounded Rectangle tool and draw out your shape. Set the Radius settings to between 10 and 40 pixels depending on your panel size. Next, select the Inner Glow layer style from the menu in the Layers palette.

STEP 1: Cut Some Shapes

STEP 2: Layer Style Options

Set Blend Mode to Normal, Opacity to 100% and the colour to #666666. In the same menu set a 1px black Outside Stroke. Cmd/Ctrl-click the shape mask thumbnail, select the Marquee tool and move your selection up half of the shape.

STEP 2: Layer Style Options

STEP 3: Gloss Effects

With a white foreground colour, apply a foreground-to-transparent gradient at around 30% Opacity. Cmd/Ctrl-click your shape mask thumbnail, applying a layer mask to this gradient layer. Lastly, drop both layers’ Opacity to 60%.

STEP 3: Gloss Effects

#2 - INSPIRATION: Why use PNG?

With updates in Internet Explorer, the PNG is finally matching the GIF, becoming extremely advantageous. The PNG firstly reduces file size without reducing image quality, making it better than its GIF and JPEG counterparts. PNG also supports 24-bit RGB or 32-bit RGBA colour palette-based images, meaning perfect translation of millions of colours. Most importantly, however, is that the PNG lets you work with alpha channels. This means whereas GIFs only allow a given pixel to be fully transparent or opaque, PNGs create images with degrees of transparency, better for blending images with their backgrounds.

#2 - INSPIRATION: Why use PNG?

#3 - TECHNIQUE: Blending Modes (for transparency)

STEP 1: Hard Light

This blending mode darkens shadows and brightens highlights, tinting everything beneath. Generally use Hard Light when you want to amplify the original hue and saturation to enrich tones.

STEP 1: Hard Light

STEP 2: Overlay

This affects the overlap similar to Hard Light. However, when your shape interacts with the background, its tone looks to match hues. In black or white backgrounds it tends to disappear.

STEP 2: Overlay

STEP 3: Difference

This mode throws up surprises and can quickly alternate tones creating visual interest. It works by inverting tones in the overlapped layer. Hues become their opposite on the colour wheel, eg here green becomes magenta.

STEP 3: Difference

Apply Transparency Effects In Photoshop

Reviewed by Kamal Thakur on Saturday, September 19, 2020 Rating: 5

15 Abstract Effects

Kamal Thakur Tuesday, April 16, 2019

15 Abstract Effects

DOWNLOAD {Size: 11.4 KB}

Add abstract and unique effects to images with one click! Plexiglass offers a set of 15 effects that adds borders and colorful effects. Great for turning photos into posters and page backgrounds.