How to Create a Surreal Stitched Portrait in Adobe Photoshop

20/02/2018 admin

Post pobrano z: How to Create a Surreal Stitched Portrait in Adobe Photoshop

Final product image — What You’ll Be Creating

Today, we will be learning how to create a golden stitched effect using just a handful of images and default brushes. We will utilize color palettes, adjustment layers, and textures to their fullest extent to create a striking piece of black, white, and gold art portraiture.

What You’ll Need

Here are the resources we will be using, all found on Envato Elements!

1. How to Create a Textured Background

First, we are going to be creating a fairly basic background using a few textures.

Step 1

Create a New Document in a size of 2834 x 3803 px.

Create a Color Fill Layer and set it to a very dark grey #090909.

Using a very large soft Brush, with a 50% Flow, paint giant white blobs all over your canvas.

Step 2

Place texture „21” from the Artistic Backgrounds texture pack, or any other watercolor texture, in the middle of your canvas and set it to Soft Light.

Remember, color doesn’t matter in this instance as it all will be black and white in the end!

Place texture „6” over texture „21” and also set it to Soft Light.

Add a Layer Mask to „6” and using a very large soft Brush mask out the bottom-left portion of the texture.

Step 3

Create a black to white Gradient Map adjustment layer. Set the Opacity to 78%.

Duplicate the Gradient Map and set the duplicate’s Opacity back to 100%. This is to add extra contrast to the background.

Step 4

Next, let’s place our gold leaf detail from the Gold Streak Backgrounds texture pack. I used texture „8” set to Hard Light.

Clip a New Layer into the gold texture and set it to Soft Light.

Using a medium soft round Brush paint black and white streaks going diagonally from top-left to bottom-right to give the gold more shine.

Lastly, clip a Color Balance layer into the gold texture. Settings: Red -35, Green +7, and Blue -30.

Group all your background layers together and name the group „Background.”

2. How to Do Color Correcting

Normally, I would save this step for last, but in this case, it helps to do some overall color correcting early on. This is largely due to the atmosphere of the image relying so heavily on this handful of adjustment layers.

Take note that almost all other layers after this step will be located under this group of layers.

Step 1

All layers are numbered as the order is important.

Color Lookup Layer: (3DLUT) FoggyNight. Opacity 42%.
Color Balance Layer: Red -8 and Blue +15

Step 2

Now, for the second batch.

Color Lookup Layer: (3DLUT) Kodak 5218 Kodak 2395
Curves:

Make sure to group all your layers together and name the group „CC”.

3. How to Prepare and Process Our Model

Next, we will be placing and preparing our model. Remember all layers from now on will be placed under the „CC” group.

Step 1

Place our Beautiful African Woman image in the middle of the canvas, keeping the crop fairly tight with her shoulders and upper chest touching the edges of the canvas.

Extract her using your preferred method. As she has no complicated clothing or hair, any method will do! I personally use the Pen Tool.

Step 2

Create and clip a Brightness/Contrast layer into the model. Settings: Contrast -50.

Create and clip a New Layer into our model and set it to Overlay.

Using a soft round Brush, bring back in some of the contrast by painting black on the shadows and white on the highlights of our model. Make sure to bring a lot of brightness into her left eye and darken the top of her head wrap.

Step 3

Create and clip a black to white Gradient Map into our model.

Step 4

Next, we will be adding some gold detail to our model’s body to help connect her with her surroundings.

Go back into the Gold Streak Backgrounds texture pack and place texture „6” over the model. Set the layer to Hard Light.

Step 5

Add a Layer Mask to the gold texture and mask out the left side of the texture on the chest, necklace and face using a hard round Brush.

Double-Click on the gold texture to open up its Layer Style panel. Hold down Alt to separate and move the Blend If toggles around. The settings are below:

I went ahead and gave the same treatment to the white stones on her necklace, only I didn’t use Blend If. I just masked some of the gold texture „1”, from the texture pack, into the stones to add a little extra detail.

Step 6

To finish up the model, we are going to create and clip a Curves layer into her. The settings:

Press Control-I to invert the Curves layer mask. Using a large round Brush, paint white to mask back in some of the darkness around the model’s head and shoulders.

Group all your model layers together and name the group „Model.”

4. How to Create a Hollow Face

Next, we will be creating the face „panel” that will later be stitched back on!

Step 1

Go back to the „Model” group and create and clip a Brightness/Contrast layer into the top of the „Model” layer, above all other clipped layers. Settings: Brightness -100 and Contrast 100.

Using the Pen Tool, create a path around the eye and part of the cheek of our model. At this point, we are creating the shape of the hole and panel, so feel free to choose whatever shape you’d like.

Right-Click > Make Selection to turn the path into a selection.

Step 2

With the Brightness/Contrast layer active, Right-Click > Fill with black.

Control-I to invert the layer mask. Now, only the eye and cheek should be dark.

Invert BrightnessContrast adjustment layer

Step 3

Control-Click the Brightness/Contrast Layer Mask to make a selection in the same shape as the mask.

Duplicate the „Model Group” and turn off the Brightness/Contrast layer. Merge the duplicated group together and then Edit > Copy and Edit > Paste.

Delete the merged „Model” duplicate. This will leave you with just a face panel in the same shape as the layer mask on the Brightness/Contrast layer.

Step 4

Tilt and position the face panel so that it is slightly pointing upward.

Step 5

To make the edge of our face section, duplicate the face panel and bring it down 5 px and to the left 5 px.

Add a Color Overlay layer style in a medium gray color #717171.

Right-Click > Rasterize Layer Style.

Step 6

Add some noise by creating and clipping a New Layer into the face edge, filling it with black.

Go to Filter > Noise > Add Noise. Settings: Amount 7, Gaussian and Monochromatic. It should be fairly subtle.

Step 7

Create and clip a New Layer into the face’s edge. Set it to Overlay.

Using a 2-5 px hard round Brush, paint lines on the face’s edge in both black and white. They don’t have to be perfect. This is to give it a wood grain effect.

Set the layer’s Opacity to 70%.

Step 8

Create and clip yet another New Layer into the „Face Edge” layer and set it to Soft Light.

Using a large soft Brush with a low Flow Rate, paint in some shadows and highlights.

Step 9

To add some final detail, we are going to add wrinkles to the model’s skin. Add a Layer Mask to the „Face Panel” layer.

Using a hard, round Brush, mask out parts of the face nearest the edge in „half-oval” shapes.

Create and clip a New layer into your face edge layer.

Using a semi-hard round Brush, paint black under where you masked out the face. This will create a shadow effect. Set the layer Opacity to 50%.

Step 10

We will finish off the wrinkles by adding some shading to them. Create and clip a New Layer into your face panel. Set it to Soft Light.

Using a medium soft round Brush with a low Flow Rate, paint black on the left and right side of each wrinkle and white in the middle. This will give it a „folding” effect.

Step 11

Group all your face layers together, except the one in the „Model” group of course, and name the group „Face.”

Add a layer mask to the „Face” group and, using a hard round Brush, mask out the eye.

5. Creating Thread Holes

Next, we are going to be focusing on how to create the holes that our thread will loop through. The process is very similar to how we did the edge of the model’s face.

Step 1

Using the Ellipse Tool create medium gray #818181 circles along the side of the face panel and original model’s face. They should be in pairs and side by side but at a slight angle.

Step 2

Select all your hole layers and Right-Click > Merge Shapes so that they are all one shape and thus one layer.

Duplicate the newly merged holes and clip them into the original holes. Change their color from gray to black.

Move the black holes 3 px down and 7 px to the left.

Step 3

Create and clip a New Layer into the grey holes, below your black holes. Set the layer to Soft Light.

Now, just as we did before with the face’s edge, add a wood grain texture to the holes with a 1 px hard round Brush by painting black and white lines in the holes in a „C” shape. Set the layer’s Opacity to 70%.

Step 4

Create and clip a New Layer into your gray holes, above your wood grain but below your black holes, and set it to Overlay.

Using a small, soft, round Brush, paint white in the middle and black on both sides of the grey holes. This will give them more dimension and make them appear more curved.

Step 5

To finish up the holes, we are going to add some shading to the hole itself, similar to what we did with the wrinkles in step 4. Create a New Layer below your gray holes. Set it to Soft Light.

Using a small, soft, round Brush, paint white on the left side of the holes and black on the right side.

Create another New Layer and, with a slightly bigger Brush, paint more black around the holes, focusing on the left side. Keep this layer set to Normal.

Group all the hole layers together and name the group „Holes.”

6. How to Create Golden Thread

Finally, we have reached the main event: creating our golden thread! This is a long one, so get ready.

Step 1

We will be creating the base for our thread using the Pen Tool. First, however, go to your Brush Tool and set it to 100% Hard, a Size of 15 px, and a dark gold/brown color #87461c

Create a New Layer.

Now, go to your Pen Tool and create paths arching from one hole to the hole directly across from it.

Step 2

Right-Click > Stoke Path. Make sure that Tool is set to Brush and Simulate Pressure is Unchecked. Press OK.

Right-Click > Delete Paths if you are satisfied with how your lines look. You can re-do them as many times as you need.

You can also use the Eraser Tool with a hard round Brush to fix the ends of the thread, and use a combination of the Lasso Tool and Move Tool to adjust the threads even further.

Step 3

Create and clip a New Layer into your thread. Fill it with black and set it to Screen.

Go to Filter > Noise > Add Noise. Settings: Amount 13 px, Gaussian, and Monochromatic.

Duplicate the noise layer to increase its intensity.

Step 4

Before we move on to painting our gold, we have to do a bit of prep work.

First, below is the color palette we will be using. I suggest making some Photoshop Color Swatches of them, or just copy and paste the image below above all your current layers so you can easily color pick from it using the Eyedropper Tool! Whichever is easiest.

Second, we will need to figure out what brushes to use. You could absolutely use a semi-hard round Brush if you want to. However, I suggest something with more texture. Brushes that are meant to give a charcoal, pastel or brush stroke effect work great. As do „natural edge” brushes. The example below is a „natural” brush.

One stroke of the brush.
Two strokes of the brush.
Three strokes of the brush.

All versions of Photoshop come with similar brushes by default!

Step 5

Now that we have our colors and brushes settled, we can move on to the painting. Create a New Layer and clip it into your thread layer, above your noise layers.

Using your preferred brush, paint the second color in our palette, which is #ad6d16, onto the thread in a „C” motion. This color is only slightly lighter than the thread’s base color.

Step 6

Next, do the same thing with the third color in the palette, #ca9d40, only make it slightly shorter than the previous stroke of color.

And with the fourth color in the palette, #e7d63e, again making it slightly shorter than the previous swipe.

Step 7

And the same with the fifth (#fffbcb) and sixth (#ffffff) colors. Use the Smudge Tool to smooth out any areas that seem too choppy.

Repaint them as many times as you deem necessary. I didn’t nail this my first, second or third time either! Think of it as just painting a gold gradient, as that’s what we are doing!

Do this to all the remaining stitches. Again, take your time! Gold can be very tricky to paint.

Step 8

Next, we are going to paint some thread details. This part is also a bit tricky, but we can do it! Create and clip a New Layer into your thread layer, above the gold you just painted.

Using the same brush you used to paint the gold, but this time set to a 2 px Size, paint lines of the darkest color in our palette, #87461c, across the first thread. Paint it in a slight twisting motion.

Step 9

Do the same with the other five colors, using the light colors to make highlights on the thread.

If your lines seem too strong, you can lower the opacity of the layer a small amount, or you can lower the Flow Rate of your brush to 50%. We want the lines to be very dainty and thin.

We also want them to be sharp. Do this by going to Filter > Sharpen > Smart Sharpen. Settings: Amount 72% and Radius 1.9 px.

Do this to the remaining threads. Unfortunately, there is no quick trick to this—we are just painting lines! Dark lines first, and then light lines on top.

Step 10

Create and clip a New Layer into your thread, above the lines you just created. Set it to Multiply.

Using a small, soft, round Brush, paint shadows in a dark brown color (#5f2d0d) at each corner of the threads.

Step 11

Create and clip yet another layer into your thread, above your shadows layer, and set it to Screen.

Using the same brush we used for the shadows, only this time in a medium orange color (#c98614), paint some light on the left side of the thread.

Step 12

There is a very important part missing thus far: shadows! Create a New Layer below your thread.

Using a semi-hard round Brush with a 10% Flow Rate, paint shadows underneath the thread.

Remember, shadows will be darker and less soft the closer they are to the object they are being cast by. Use the Smudge Tool to smudge out the ends of shadows to disperse them a bit. Setting your brush to a low flow rate will allow you to build up the shadows slowly.

Group all your thread layers together and name the group „Stitch.”

7. How to Add the Finishing Touches

To finish everything off, we will be adding some small details such as the stitches running underneath the face panel and some lens flares.

Step 1

Go into your „Model” group and Control-Click on the Brightness/Contrast layer that we created the face panel shape from.

Leave the group and create a New Layer below your „Face” group.

With the Brush Tool set to 100% Hard, a Size of 15 px and a dark gold/brown color (#87461c), use the Pen Tool to create paths similar to step 6. This time, however, we are creating the thread that runs underneath the face panel.

Right Click > Stroke Path.

Step 2

Add a Bevel & Emboss layer style to the new thread layer. Settings below:

Shadow Mode Color: #281200

Step 3

Create and clip a New Layer into your threads. Set it to Overlay.

Using a medium soft round Brush, paint black on the outer edges of the thread and white on the middle section of the thread to add contrast and lighting.

Group all your under thread layers up and name the group „Under Stitch”.

Step 4

Finally, create a New Layer above all your other layers, including the „CC” group! Set the layer to Screen.

With a soft round medium Brush, paint pale yellow (#fffbcb) lens flares on a few of the stitches. I like to paint six-point stars. Bring the layer Opacity down to 60% if the shine is too strong.

Step 5

Create one more New Layer above all previous layers. Set it to Screen.

Using a very large soft Brush with a Flow Rate of 5%, paint that same pale yellow color on the left side of the face. Again, bring down the layer Opacity if needed. We want this to be a very subtle final pop of light and color.

You’ve Done It!

Be proud! Painting gold is no small task. Remember that keeping to a specific color palette can help a lot, and you don’t need fancy brushes to create stunning effects. Sometimes a simple round brush is the best answer!

As always, keep experimenting with different techniques, and don’t forget to post your version below, along with any questions, comments, or critiques!

CSS

Gotchas When Publishing Modules in npm and Bower

20/02/2018 admin Dodaj komentarz

Post pobrano z: Gotchas When Publishing Modules in npm and Bower

Bower and npm are de-facto the package managers of the web. I doubt there are many front-end developers out there who haven’t heard of them or used them to manage dependencies.

Whilst many of us use them as consumers, one day you might decide to share a project of your own and become a contributor! This happened to me recently. I had the experience of publishing my open-source library on npm and Bower.

Although their official docs were quite good, I still ended up struggling with three little known gotchas. I won’t focus on the basics in this post. You can always find and read about them. I’ll instead focus on the gotchas.

Nowadays, it looks like even Bower tells people not to use Bower. However, in 2018, there are still many projects that depend on it. The state of JavaScript in 2017 survey shows that around 24% of surveyed developers still use Bower as a package manager. Therefore, I think it might take a little while before we see the end of Bower, which means it’s probably still worth supporting it to cover legacy-package-managed projects. I feel the pain of those of you working on a legacy project—that’s why I chose to publish my open source module there, too.

My hope is that after this you’ll be one step ahead when you decide to share your code with the world. Without any further ado, here are some gotchas I’ve come across when managing packages.

Removing a Package From npm

Why bother spending hours choosing a name, when you can focus on shipping the features first? In my first experience with npm, I was unfortunate to leave the name of my project „test-something.”

Guess what? A few days later, I found out that the un-publish option in the npm public registry is only allowed with versions published in the last 24 hours. If you are trying to un-publish a version published more than a day ago then you must contact support.

They state that it is generally considered bad practice to delete a library that other people depend on. I understand that but I’m 100% sure that no projects depend on a package called „test something.”

I was about to leave things alone, but my test package was going to be visible forever in my shiny npm user profile. Dislike!

I contacted support and they handled my request within the very same day. They still didn’t want to completely un-publish it but they did transfer it to the @npm user account and deprecated it with a deprecation note. This removed it from my profile (woohoo!) and from the search results. However, if someone knows the exact URL (or name) they can still install it. While that’s not totally ideal, the deprecation note will still be an alert that the package is no longer supported.

I think this might be related to the 11 lines of code, that Azer Koçulu deleted from npm and which kind of broke the internet for a moment. Safety first.

The moral of the story: make sure to choose your package name wisely!

Exporting Modules

Another gotcha I encountered was how to export my module. I wanted to do it in a universal way so that anyone can import it to the browser in any of the three most popular approaches. For example…

…with ES6:

// If a transpiler is configured (like webpack, Babel, Traceur Compiler or Rollup):
import MyModule from 'my-module';

…with CommonJS:

// If a module loader is configured (like RequireJS, Browserify or Neuter):
const MyModule = require('my-module');

…or by referencing the script file in the HTML:

<script ="/node_modules/my-module/index.js"></script>

What I was actually looking for is the Universal Module Definition pattern. It’s a pattern that provides a clean way to expose your module to different environments that consume modules in a variety of ways.

This pattern has a couple of variations, depending on what you really need. However, modules written this way are capable of working everywhere, be it in the client, on the server or elsewhere.

The standard pattern is:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['dependency'], factory);
	} else if (typeof module === 'object' && module.exports) {
		  // Node. Does not work with strict CommonJS, but
		  // only CommonJS-like environments that support module.exports,
		  // like Node.
		  module.exports = factory(require('dependency'));
	} else {
    // Browser globals (root is window)
    root.returnExports = factory(root.dependency);
	}
}(this, function (dependency) {
  // Use dependency in some fashion.
  return {
    // Your module goes here
  };
}));

If you’re using Grunt, Gulp or webpack, you’ll find that there is a plugin that can wrap your modules like this for you. Plus, it’s in the core of webpack already!

Managing Distribution Files

This one was really tricky.

I am building a package for npm and Bower. I followed the pattern to keep the working files (ES6) in the src/ package directory and build my distribution files (ES5, compiled with Babel) in the dist/ directory.

I ignore the entire dist/ folder in the .gitignore file. You know the drill: source control should only contain source. If it’s generated from the source, it doesn’t belong there—it should be generated by your build process instead.

On the one hand (npm), I have a .npmignore which does exactly the opposite and ignores src/ instead of dist/. On npm, I only want my distribution files. That works out perfectly well.

On the other hand (Bower), the dist/ folder is missing in the repository and, therefore, the Bower package doesn’t include it. You see, Bower tracks your publicly available Git endpoint only. By pushing Git tags you release a new version on the Bower registry. Yes, it can ignore files, but they are related only to the files in your repository.

So, how can I publish the ignored by git dist/ folder contents on Bower?

I’m not sure it’s possible to do. The only workaround I found is to commit the distribution files in the repository. If you really want to keep those distribution files out of the repo, the trick is to commit them right before you release a tag. Release a tag. Remove them.

There is one more use case that gives me some peace of mind. Imagine somebody downloads a ZIP of your repository and drops it into their project. They won’t need your fancy build step. The production source is already there. All right, maybe that’s not so bad after all.

Wrapping Up

Both npm and Bower continue to be widely used and helpful ways to manage project dependencies, even if Bower is bowing out. While they’re great at what they do, being the owner and a contributor to a package listed in either package directory presents some challenges for us and I hope the ones I’ve outlined here help save other some time and possible headache.

Do you know any other ways to handle the gotchas covered here? Or have stumbled into gotchas of your own? Let me know in the comments!

Gotchas When Publishing Modules in npm and Bower is a post from CSS-Tricks

Partnerzy

Intel "Hype"

15/02/2018 admin Dodaj komentarz

Post pobrano z: Intel "Hype"

Partnerzy

Step by Step: Simon Appel

15/02/2018 admin Dodaj komentarz

Post pobrano z: Step by Step: Simon Appel

Ever wonder how to animate on an iPad? Well, you’re in luck with this new Step by Step featuring the talented Simon Appel.

CSS

CSS Basics: The Second “S” in CSS

15/02/2018 admin Dodaj komentarz

Post pobrano z: CSS Basics: The Second “S” in CSS

CSS is an abbreviation for Cascading Style Sheets.

While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don’t talk a whole lot about is the sheet part of the language. So let’s give that lonely second „S” a little bit of the spotlight and understand what we mean when we say CSS is a style sheet.

The Sheet Contains the Styles

The cascade describes how styles interact with one another. The styles make up the actual code. Then there’s the sheet that contains that code. Like a sheet of paper that we write on, the „sheet” of CSS is the digital file where styles are coded.

If we were to illustrate this, the relationship between the three sort of forms a cascade:

There can be multiple sheets all continuing multiple styles all associated with one HTML document. The combination of those and the processes of figuring out what styles take precedence to style what elements is called the cascade (That first „C” in CSS).

The Sheet is a Digital File

The sheet is such a special thing that it’s been given its own file extension: .css. You have the power to create these files on your own. Creating a CSS file can be done in any text editor. They are literally text files. Not „rich text” documents or Word documents, but plain ol’ text.

If you’re on Mac, then you can fire up TextEdit to start writing CSS. Just make sure it’s in „Plain Text” mode.

If you’re on Windows, the default Notepad app is the equivalent. Heck, you can type styles in just about any plain text editor to write CSS, even if that’s not what it says it was designed to do.

Whatever tool you use, the key is to save your document as a .css file. This can usually be done by simply add that to your file name when saving. Here’s how that looks in TextEdit:

Seriously, the choice of which text editor to use for writing CSS is totally up to you. There are many, many to choose from, but here are a few popular ones:

You might reach for one of those because they’ll do handy things for you like syntax highlight the code (colorize different parts to help it be easier to understand what is what).

Hey look I made some files completely from scratch with my text editor:

Those files are 100% valid in any web browser, new or old. We’ve quite literally just made a website.

The Sheet is Linked Up to the HTML

We do need to connect the HTML and CSS though. As in make sure the styles we wrote in our sheet get loaded onto the web page.

A webpage without CSS is pretty barebones:

See the Pen Style-less Webpage by Geoff Graham (@geoffgraham) on CodePen.

Once we link up the CSS file, voila!

See the Pen Webpage With Styles by Geoff Graham (@geoffgraham) on CodePen.

How did that happen? if you look at the top of any webpage, there’s going to be a <head> tag that contains information about the HTML document:

<!DOCTYPE html>
<html>
	<head>
		<!-- a bunch of other stuff -->
	</head>

	<body>
		<!-- the page content -->
	</body>

</html>

Even though the code inside the <head> might look odd, there is typically one line (or more, if we’re using multiple stylesheets) that references the sheet. It looks something like this:

<head>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

This line tells the web browser as it reads this HTML file:

I’d like to link up a style sheet
Here’s where it is located

You can name the sheet whatever you want:

styles.css
global.css
seriously-whatever-you-want.css

The important thing is to give the correct location of the CSS file, whether that’s on your web server, a CDN or some other server altogether.

Here are a few examples:

<head>
  <!-- CSS on my server in the top level directory -->
  <link rel="stylesheet" type="text/css" href="styles.css">

  <!-- CSS on my server in another directory -->
  <link rel="stylesheet" type="text/css" href="/css/styles.css">

  <!-- CSS on another server -->
  <link rel="stylesheet" type="text/css" href="https://some-other-site/path/to/styles.css">
</head>

The Sheet is Not Required for HTML

You saw the example of a barebones web page above. No web page is required to use a stylesheet.

Also, we can technically write CSS directly in the HTML using the HTML style attribute. This is called inline styling and it goes a little something like this if you imagine you’re looking at the code of an HTML file:

<h1 style="font-size: 24px; line-height: 36px; color: #333333">A Headline</h1>
<p style="font-size: 16px; line-height: 24px; color: #000000;">Some paragraph content.</p>
<!-- and so on -->

While that’s possible, there are three serious strikes against writing styles this way:

If you decide to use a stylesheet later, it is extremely difficult to override inline styles with the styles in the HTML. Inline styles take priority over styles in a sheet.
Maintaining all of those styles is tough if you need to make a „quick” change and it makes the HTML hard to read.
There’s something weird about saying we’re writing CSS inline when there really is no cascade or sheet. All we’re really writing are styles.

There is a second way to write CSS in the HTML and that’s directly in the <head> in a <style> block:

<head>
	<style>
  	h1 {
  		color: #333;
  		font-size: 24px;
  		line-height: 36px;
  	}

  	p {
  		color: #000;
  		font-size: 16px;
  		line-height: 24px;
  	}
	</style>
</head>

That does indeed make the HTML easier to read, already making it better than inline styling. Still, it’s hard to manage all styles this way because it has to be managed on each and every webpage of a site, meaning one „quick” change might have to be done several times, depending on how many pages we’re dealing with.

An external sheet that can be called once in the <head> is usually your best bet.

The Sheet is Important

I hope that you’re starting to see the importance of the sheet by this point. It’s a core part of writing CSS. Without it, styles would be difficult to manage, HTML would get cluttered, and the cascade would be nonexistent in at least one case.

The sheet is the core component of CSS. Sure, it often appears to play second fiddle to the first „S” but perhaps that’s because we all have an quiet understanding of its importance.

Leveling Up

Now that you’re equipped with information about stylesheets, here are more resources you jump into to get a deeper understanding for how CSS behaves:

Specifics on Specificity – The cascade is a confusing concept and this article breaks down the concept of specificity, which is a method for how to manage it.
The latest ways to deal with the cascade, inheritance and specificity – That’s a lot of words, but the this article provides pro tips on how to manage the cascade, including some ideas that may be possible in the future.
Override Inline Styles with CSS – This is an oldie, but goodie. While the technique is probably not best practice today, it’s a good illustration of how to override those inline styles we mentioned earlier.
When Using !important is The Right Choice – This article is a perfect call-and-response to the previous article about why that method may not be best practice.

CSS Basics: The Second “S” in CSS is a post from CSS-Tricks

Web Tools

How to Create a Cloud Icon in Adobe XD

15/02/2018 admin

Post pobrano z: How to Create a Cloud Icon in Adobe XD

With cloud computing on the rise, a simple „cloud” icon will always come in handy. Learn how to create one in this video from my course, Icon Design With Adobe XD.

How to Create a Cloud Icon in Adobe XD

Create the Basic Shapes for the Cloud

To start, set up a 60 x 60 px artboard, and then select it and turn on the Grid in the toolbar on the right. The grid is set to 1, so every one pixel there will be a horizontal and vertical guideline.

Select the Ellipse Tool and just left-click and hold Shift to draw a fairly small circle. Then go to Edit > Duplicate, move the copy up and to the right, and hold Shift and scale it up.

Drag over both of them and deselect the fill. And then select the smaller circle, and go to Edit > Duplicate again. Hold Shift and left-click and drag it to the right so it stays perfectly in line.

Then go to Edit > Duplicate again. Make this new circle a little bit bigger by holding Shift, left-clicking, and scaling from one of the corners.

Now select the Rectangle Tool and draw a horizontal rectangle. Then drag over everything and go to Object > Align to Pixel Grid. That just helps everything snap in place and line up at the bottom in particular.

Drag this rectangle out a little, and then double-click the shape and select the top two corners and drag them in if they’re extending outside of the cloud icon.

Create a Single Cloud Shape and Adjust It

Now, this does look like a mess of different shapes at the moment. However, in Adobe XD we can combine multiple shapes into a single shape.

Simply drag over everything, and from the options at the top of the Property Inspector, select Add, and it will combine all of the shapes together into one shape.

You can see that at the bottom, we’ve got a little bit of an anomaly. But that’s fine—just zoom in, double-click, and try to adjust that path a little bit. Just moving that circle a little bit will help smooth out the curve.

Then drag over everything and give it a Border of 2. And from the color picker, select the color #4A4A4A, and deselect the fill. Scale it up a little, holding Alt-Shift and scaling from the center.

Again, go to Object > Align to Pixel Grid if you need to. You can see it shuffles it a little bit, so you may need to adjust some of the shapes again, as we did before.

Add the Final Detail

The last thing that we’re going to do is add a little curve, just to give the cloud a bit more detail.

Select the Pen Tool and just left-click, left-click again to create a curve, and press Escape to complete it. Then select that same #4A4A4A swatch from the color picker. And the last thing that we can do is drag over everything and go to Object > Group so that we can move it around as one object.

You’ll see that our cloud is ever so slightly off the pixel grid. So you can just drag over everything, and go to Object > Group to group it all together. And then go over to the toolbar and adjust the y value so that instead of being 15.5, it’s rounded down to 15. And you’ll see it now aligns to the pixel grid nicely.

Watch the Full Course

In the full course, Icon Design With Adobe XD, you’ll learn how to use the tools available in Adobe XD to design a variety of different icons. As well as the cloud, you’ll learn to create a phone, browser, pencil icon and more, picking up some useful Adobe XD skills along the way.

You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+.

Plus you now get unlimited downloads from the huge Envato Elements library of 440,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

CSS

Wix.com: Make the Web Your Playground

15/02/2018 admin Dodaj komentarz

Post pobrano z: Wix.com: Make the Web Your Playground

(This is a sponsored post.)

Here’s something you should consider having: your own professional website. The only thing you’ll need to get started is your imagination, a little free time, and an innovative website builder.

Wix is the world’s most technologically advanced website builder. Sign up for Wix, choose a template, and start customizing it. Whether you’re a novice, a business owner, a sophisticated designer, or a professional website builder, you’ll have full control of your website – from design prototyping to production.

Wix takes care of all the heavy lifting. You get reliable, safe, secure hosting that you’ll never need to worry about. You get a custom domain name and email. To get started, all you need is a computer and a little time.

Don’t underestimate what you can do with Wix. There are all kinds of advanced design features and functionality if that’s something you need. The web is your playground. We’ve come along way from the website building platforms of the 90s. Now, you can create any kind of website you want and even collaborate with friends or coworkers.

Save yourself some time and head over to Wix.com to get started.

Direct Link to Article — Permalink

Wix.com: Make the Web Your Playground is a post from CSS-Tricks

Partnerzy

Johnny’s Home | ACLU commission

15/02/2018 admin Dodaj komentarz

Post pobrano z: Johnny’s Home | ACLU commission

CSS

CSS Basics: Styling Links Like a Boss

15/02/2018 admin Dodaj komentarz

Post pobrano z: CSS Basics: Styling Links Like a Boss

The web was founded on links. The idea that we can click/tap a link and navigate from one web page to another is how surfin’ the web become a household phrase.

Links in HTML even look different from regular text without any CSS styling at all.

See the Pen Default Link by CSS-Tricks (@css-tricks) on CodePen.

They are blue (purple if visited). They are underlined. That’s a link in it’s purest form.

But what if we want to change things up a bit? Perhaps blue doesn’t work with your website’s design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just we can any other element. All we need to do is target the <a> element in our stylesheet.

Want to use a different font, change the color, remove the underline and make it all uppercase? Sure, why not?

a {
  color: red;
  text-decoration: none;
  text-transform: uppercase;
}

See the Pen Link With Some Style by Geoff Graham (@geoffgraham) on CodePen.

Now we’re cooking with gas! But why stop there? Let’s look at a few other ways we can style links to complete the experience.

Style Each Link State

Links have different states, meaning they adapt when we interact with them on a webpage. There are three additional states of a link that are worth considering anytime we change the default style of links:

Hover (:hover): When the mouse cursor is place on top of the link without a click
Visited (:visited): The appearance of a link that the user has clicked on the page before when the mouse cursor is not on top of it
Active (:active): When the link is in the process of being clicked. It might be super quick, but this is when the mouse button has been depressed and before the click is over.

Here is the same link we have been looking at. First, try hovering your mouse on top of it without clicking and notice that it becomes underlined. Then, click on the link, but leave your mouse button clicked down for a little bit to see how the active style changes the color of the link to black. Finally, let up on the mouse button and the link should turn purple before it’s technically been visited.

See the Pen Link With Styled States by Geoff Graham (@geoffgraham) on CodePen.

Links seem like a simple concept, but boy do they have a lot going on—and CSS gives us some incredible power to customize the experience!

Links as Buttons

While there is some debate about it, we can use CSS to make a text link look like a button.

Like other HTML elements, CSS can add background colors and padding to links that allow us to create the appearance of a button. Here’s our link using those techniques:

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

See the Pen Link as a Button by CSS-Tricks (@css-tricks) on CodePen.

Great! Now, let’s use the state-altering powers we learned in the last section to make our faux-button more interactive. We’ll make the button dark gray on hover, black on active, and light gray on visit:

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

a:hover {
  background-color: #555;
}

a:active {
  background-color: black;
}

a:visited {
  background-color: #ccc;
}

See the Pen Link as a Button With Styled States by Geoff Graham (@geoffgraham) on CodePen.

Styling a link as a button and taking advantage of the states allows us to make some pretty cool effects. For example, let’s create a button with some depth that appears to get pressed when it’s active and pop back up when the click is done.

See the Pen Link as a 3D Button by Geoff Graham (@geoffgraham) on CodePen.

Oh, and Cursors!

We’ve gone into pretty great depth on style links, but there is one more component to them that we cannot ignore: the cursor.

The cursor indicates the position of the mouse on the screen. We’re pretty used to the standard black arrow:

We can change the arrow to a hand pointer on it’s hover (:hover) state so that it’s easier to see that the link indicates it is an interactive element:

Using `cursor: pointer;` provides an interactive cue.

a:hover {
  cursor: pointer;
}

See the Pen Link as a 3D Button With Pointer by Geoff Graham (@geoffgraham) on CodePen.

Whew, that’s much nicer! Now, we have a pretty fancy link that looks like a button with proper interactive cues.

Leveling Up

We’ve covered quite a bit of ground here, but it merely scratches the surface of how we can control the style of links. If you’re ready to level up, then here are a few resources you can jump into from here:

Mailto Links – A good reference for linking up email addresses instead of webpages.
The Current State of Telephone Links – Did you know you can link a phone number? Well, here’s how.
Cursor – The CSS-Tricks reference guide for customizing the cursor.
When to Use the Button Element – If you’re wondering about the difference between a link button and a traditional form button, then this is a good overview with suggestions for which is better for specific contexts.
Button Maker – A free resource for generating the CSS for link buttons.

CSS Basics: Styling Links Like a Boss is a post from CSS-Tricks

Web Tools

How to Create a Typography Adobe Photoshop Action

15/02/2018 admin

Post pobrano z: How to Create a Typography Adobe Photoshop Action

In this tutorial you will learn how to create an amazing logo typography effect. I will explain everything in so much detail that everyone can create it, even those who have just opened Photoshop for the first time.

The effect shown above is the one I will show you how to create in this tutorial. If you would like to create the even more advanced logo typography effect shown below, using just a single click, then check out my Logo Typo Photoshop Action.

What You’ll Need

To recreate the design above, you will need the following resources:

Logo Template or any vector shape(s) you wish

1. Let’s Get Started

First, go to File > New to create a new file to work with, name it Logo Typography, and use the settings below:

2. How to Create a Background

Step 1

In this section, we are going to create a background. Go to Layer > New Fill Layer > Solid Color to create a new solid color fill layer, name it Background Color, and choose the color #262626 as shown below:

Step 2

Now choose the Horizontal Type Tool (T) and set the font to Arial, font style to Bold, font size to 30 px, alignment to Left, and color to #000000. In the Character panel, check All Caps and set the Leading to 18 px as shown below. Then, click anywhere inside the canvas and go to Type > Paste Lorem Ipsum to paste some random text. Feel free to use your own text and font settings.

Step 3

Right-click on this layer in the Layers panel and choose Convert to Paragraph Text. Then, Double-click on this layer thumbnail and transform the Text Box as shown below:

Step 4

Now go to Type > Paste Lorem Ipsum and repeat this step until you cover the whole canvas with text. Again, you can use your own text—just make sure it covers the whole canvas.

Step 5

Press Control-A on your keyboard to make a selection of the canvas and click on Align Vertical Center and then on Align Horizontal Center to align the text both vertically and horizontally. Then, press Control-D to deselect and name this layer Text.

3. How to Add a Logo

Step 1

In this section, we are going to add a logo. Go to File > Open, select the Learnimo Logo.eps file, choose Open, and enter the settings below:

Step 2

Now choose the Eraser Tool (E), pick a hard brush, and remove Your Slogan Here text of the logo as shown below:

Step 3

Choose the Rectangular Marquee Tool (M) and make a selection around the Learnimo text of the logo as shown below:

Step 4

Now go to Layer > New > Layer Via Cut to cut the selected area of the logo to a new layer. Then, Right-click on this new layer and choose Blending Options. Select the Color Overlay option, and set the Blend Mode to Normal, Color to #ffffff and Opacity to 100% as shown below:

Step 5

Control-click on Layer 1 to select both layers at the same time, Right-click on any of the layers, and choose Convert to Smart Object. Then, name this new layer Logo.

Step 6

Now, using the Move Tool (V), drag this layer to the Logo Typography file. Then, press Control-A on your keyboard to make a selection of the canvas and click on Align Vertical Center and then on Align Horizontal Center to align the logo both vertically and horizontally.

Step 7

Press Control-T on your keyboard and set Width and Height to 200% as shown below:

Step 8

Now press Control-Alt-G on your keyboard to create a clipping mask.

4. How to Add a Focus

Step 1

In this section, we are going to add a focus. Go to Layer > New > Layer to create a new layer and name it Focus.

Step 2

Now press D on your keyboard to reset the swatches. Go to Edit > Fill and set Contents to Foreground Color, Blending to Normal, and Opacity to 100% as shown below:

Step 3

Press Control-A to make a selection of the canvas and go to Layer > Layer Mask > Hide Selection to hide the selected area of the layer.

Step 4

Now click on the link icon between the layer thumbnail and layer mask to unlink them. Then, press Control-T on your keyboard and set Width and Height to 85% as shown below:

Step 5

Go to Filter > Blur > Gaussian Blur and set the Radius to 150 px as shown below:

Step 6

Now change the Opacity of this layer to 50%.

You Made It!

Congratulations, you have succeeded! Here is our final result:

If you would like to create the even more advanced logo typography effect
shown below, using just a single click, then
check out my Logo Typo Photoshop Action.

The
action works so you simply open the logo file and just
play the action. The action will do everything for you,
giving you fully
layered and customizable results. You can also add perspective (you can choose from five different perspectives), focus and lighting.

The action comes with a detailed video tutorial that demonstrates how to use the action and customize the results to get the most out of the effect.