Wszystkie wpisy, których autorem jest admin

How to Create a Sliced Mountain Effect Using Adobe Photoshop

Post pobrano z: How to Create a Sliced Mountain Effect Using Adobe Photoshop

Final product image
What You’ll Be Creating

In this tutorial, you will learn how to create a sliced effect in Photoshop by mimicking a 3D shape on a 2D image to give an object the illusion of being cut in pieces.

What You’ll Need

In order to complete this project, you will also need the following image:

1. How to Prepare the Image

Step 1

Open the Faraglioni rocks image in Photoshop. We want to remove the background before using the rocks in the poster. To do this, in the Layers panel, Duplicate the Background layer by pressing Command-J, and Hide the visibility of the original Background layer. 

Open the rocks image and duplicate the background layer

Step 2

While selecting the new Layer 1 on the Layers panel, click on the Vector Mask button to add a Layer Mask to the Background copy.

Hide the background layer and add a layer mask to the new duplicated layer

Step 3

We will use the rock on the right side as it is solid compared to the one on the left. Let’s crop the image using the Crop Tool (C). I am maintaining the height and only closing in horizontally, as shown in the image below. Hit Enter to apply the crop.

Crop the image

Step 4

Select the Magic Wand Tool (W) and head over to the Options bar to make sure the Contiguous option is unchecked. For this specific tutorial we need to delete the sky, so click on a white part of the sky, which will select parts of the sky. In order to add to the selection, hold down Shift and click on the blue parts of the sky.

Using the Magic Wand Tool select the sky

Step 5

Once all of the sky is selected, head over to the Layers panel. Select the Layer Mask we created for the new layer and hit Backspace on the keyboard to delete the parts we selected. You should have something like the image below. To deselect the parts we selected with the Magic Wand Tool (W), press Command-D.

Delete the selected sections on the Layer Mask

Step 6

Now we need to remove the water. Using the Brush Tool (B) and black as the Foreground Colour on the Tools panel, you can hide parts of the image. If you use white as the foreground colour, you will instead reveal parts of the image. Make sure you have the Layer Mask selected on the Layers panel.

Right click to set the brush to a Size of 150 px and Hardness of 100% and start brushing parts away from the image. I like to do the big parts first, before zooming in and concentrating on the details later. 

A great tool that helps here is using the backslash key (\) to get a red tint behind the image and see what parts need to be perfected.

Remove the water under the rock using the Brush Tool

Step 7

To soften the edges of the image, we can use the Refine Mask option. Using the Zoom Tool (Z), zoom in on the image. Head over to the Layers panel and right click on the Layer Mask > Refine Mask, and a new window will pop up. Under the Adjust Edge option, set the Feather to 2 px and Shift Edge to -30%. Click OK.

Refine the edges on the Layer Mask through the Refine Mask option

2. How to Create a New Document and Guides

Step 1

In Photoshop, go to File > New. Name the document Sliced-v1, and set the Width to 1275 px and Height to 1650 px, with Background Contents white. I am keeping the poster digital, so I will work with 72 dpi. Click OK to create the document.

Create a new document

Step 2

Let’s create guides in our document to make sure things are aligned. My ruler measures in inches; you can change this in Photoshop > Preferences > Units and Rulers. Head over to View > New Guide, where a new window will pop up. We want to make all of our Guides 1 inch from each edge. Select Horizontal and under Position type 1 in. Click OK

We will do the same for the Vertical option. To add a guide to the bottom and the right side of the page, subtract 1 inch from the overall dimensions of the page. To hide and show the guides, hit Command-;.

Add a 1 inch margin around the document

3. How to Duplicate Layers and Add a Gradient Background

Step 1

Let’s duplicate the Layer 1 from the rocks file into our new Sliced-v1 file. To do so, Right Click > Duplicate Layers. Under As:, rename the layer to Rock, and under Destination select Document > Sliced-v1. Click OK to continue.

Duplicate the rocks to the newly created file

Step 2

In the Sliced-v1 file, resize the Rock layer by hitting Command-T to activate the Transform Tool. Resize the image to fit within the margin. Alternatively, you can head to the Options bar and set the Width and Height to 58%, making sure to activate the Maintain Aspect Ratio button. Hit Enter to proceed. 

Resize the rock image to fit within the margin

Step 3

Head over to the bottom of the Layers panel, and click on Create a New Fill or Adjustment Layer > Gradient. A new Gradient Fill window will pop up; click on the Gradient color space.

Add a gradient layer and move under the rock layer

Step 4

Go to Gradient Editor > Gradient Type, double-click on the left color swatch, and use the following color code: #c5c5c5. Click OK. Double-click on the right color swatch and set the following color code: #f1f1f1. Click OK in all three windows to go back to the page. Let’s move the Gradient Fill layer under the Rock layer.

Choose gradient colors from medium grey to light grey

4. How to Convert a Single Layer to Black and White

Step 1

Before we start to create the effect, let’s turn the Rock layer into black and white. Select the Rock layer on the Layers panel and head over to Image > Adjustments > Black and White. An option window will pop up; click on Auto and then OK. 

Convert the rocks into a Black and White layer

Step 2

The photo looks dull, so let’s add some contrast. Go to Image > Adjustments > Brightness/Contrast and set the Brightness to 35 and Contrast to 65. Click OK.

Edit the Brightness and Contrast of the rock layers

5. How to Create a Sliced Effect

Step 1

We need to cut our image into five pieces. We will be using the Pen Tool (P) to draw through the rock to create a mask. Try to follow the surface of the rock to make the effect credible.

Select the Pen Tool (P). Head over to the Options bar and make sure that Fill has no color selected. We can choose white as the Stroke at 1 pt. This is so we can see where we are slicing. Now we are all set! 

Start by making the first point on the left side of the rock, and try to follow the form of the rock. You will notice I did about eight points, the last point being on the edge of the right side of the rock. Close the shape by going around the rock either around the top or bottom—I chose the top. Close the shape by clicking on the first point again. This new shape will be a new layer.

Using the Pen Tool draw around the top of the rock

Step 2

Let’s go ahead and do the same step three more times, but lower on the rock. You can do as many points as you like with the Pen Tool (P). We should have four layers, each containing a shape like the image below. 

Repeat the same step as above with the rest of the rock Divide into 5 sections

Step 3

On the Layers panel, right click on the Rock Layer Mask thumbnail and select Apply Layer Mask to delete all of the background we had on the rock layer.

On the rocks layer apply the layer mask on the original image

Step 4

We will use the shapes we created as masks to duplicate the different parts of the rock and convert them into separate layers. On the Layers panel, press Command and click on the Shape 1 thumbnail, which will select only the shape. Click on the Rock layer and press Command-X to cut, followed by Shift-Command-V to paste in place. This will create a new layer with the first shape we created. Below, I’ve deactivated the layer so you can see which part I’ve cut from the original image.

Use the sections divided previously to cut and copy in place the rock

Step 5

Repeat the same step with the other shapes. Select all the Shape layers and drag them towards the folder icon on the Layers panel to group them. Deactivate them so we don’t get confused. Below I have moved the layers to show you how they should be separated and how the Layers panel should be looking.

Repeat the same step above resulting in a total of 5 layers containing pieces of the rock

Step 6

Now that we have the rock as puzzle pieces, we will create the 3D effect. I am moving the Rock layer off the bottom margin to give space for the other rocks. We will work our way up. Select Layer 4 or the second layer from the bottom. Using the Pen Tool (P), we will draw on the bottom of the rock to form a 3D look. Click on the very edge of the left side, giving shape to the rock all the way to the edge of the right side (image on the left). To close the shape, this time go through the rock (right image)

If you want to change the shape, simply select the Direct Selection Tool (A) and click on the shape to bring up the points and edit. There is no right or wrong, so you can edit as much or as little as you want! 

Draw the 3D part effect for each division using the Pen Tool

Step 7

Drag the shape under Layer 4. Head over to the Options bar and select Fill > Gradient and Stroke > None. We will worry about the color of the gradient later. Group these two layers to avoid confusion.

Fill the shape with a gradient

Step 8

Do the same step as above for the other rocks. I will organize the layers by grouping the shapes layers with their correspondent rock layers to avoid confusion and naming them numerically. You should have something like the image below.

Organize the layers by grouping them in folders

Step 9

We want to create the illusion that the slices are falling on top of each other. In this specific image, our eyesight is at a low angle as we are looking up at the rock. The 3D parts we created need to be behind each other from bottom to top. 

Let’s switch the order of the layers. Instead of going from 1 to 5, we will have 1 to 5 starting from the top. In other words, the gradient shapes we created need to be behind the rock. Below is an image of the order of the layers and how the file should be looking.

Organize the layers so the bottom of the rock is forward and the top is at the very back

Step 10

Now that we have the layers in the right order, let’s give them a spontaneous look. Select different sections and use the Transform Tool (Command-T) to rotate them slightly. There is no right or wrong—you can move them as much as you like and resize as you wish! 

Using the Transform Tool rotate the shapes to add movement

Step 11

On the Layers panel, expand one of the folders. I will be expanding Rock 5, so double-click on the Shape 5 layer to bring up the Gradient Fill window. Here we need to change the Angle of the gradient; mine is at -100. The darker color we will choose later on needs to go on the side closest to the bottom rock, and the brighter side on the side that is farthest from the rock. On this specific layer, the closest point is on the left side, while the farthest is on the right. This will be different on all the layers. Feel free to use this as a reference.

Double-click on the Gradient color swatch. In the new Gradient Type window, double click on the left color swatch. I am using an orange color with the following code: #ef8d00. Click OK.

Double click on the right color swatch and choose a darker color than the one above; I am using #412701. Click OK on all the windows. 

Color each of the shapes we created for each rock piece using the Gradient Tool

Step 12

Now let’s do the same for the other shapes! I am using the following codes for bright and dark shades respectively:

  • Purple: #5700e6 and #1a0145
  • Pink: #e600e6 and #49014a
  • Green: #0ebb98 and #004134

The image should be looking like the one below.

The gradient should be a lighter shade on one side and a darker shade on the side closes to the bottom rock

Congratulations! You’ve Done It!

In this tutorial, you learned to:

  • Create the illusion of a 3D object on a flat image.
  • Use the Pen Tool to create shapes that can be used as Masks on an image.
  • Use the Gradient Tool to create the illusion of light and shadow.
End Result

Stunning 3D graffiti by Peter Preffington

Post pobrano z: Stunning 3D graffiti by Peter Preffington

For the past twenty years, Peter Preffington (aka Pref) has been creating art that he published in his homeland, Great-Britain, or abroad. On top of the prints he exhibits in art galleries or online, the British artist also creates stunning street art that plays with type.

Playing with letter and dimensions, the street artist designs words that can be read in two ways. His multi-layered typography is not only fun and clever, it also looks great. You can obviously not purchase the designs that lay on walls, but you can buy some of his artworks as prints on his online shop.

Just a Couple’a Fun Typography Links

Post pobrano z: Just a Couple’a Fun Typography Links

The post Just a Couple’a Fun Typography Links appeared first on CSS-Tricks.

How to Create a Sci-Fi Scan-Line Text Effect in Adobe Photoshop

Post pobrano z: How to Create a Sci-Fi Scan-Line Text Effect in Adobe Photoshop

Final product image
What You’ll Be Creating

This tutorial will show you how to use layer styles to create a super quick and easy sci-fi scan-line inspired text effect. Let’s get started!

This text effect was inspired by the many Layer Styles available on GraphicRiver.

Tutorial Assets

The following assets were used during the production of this tutorial:

1. How to Create a Simple Gradient Pattern

Step 1

Create a new 500 x 104 px document, and double-click the Background layer to unlock it.

Unlock the Background Layer

Step 2

Double-click the Layer 1 layer to apply a Gradient Overlay effect with these settings:

  • Check the Dither box.
  • Use the faucet 150 gradient fill.
Gradient Overlay

Step 3

Pick the Single Column Marquee Tool and click once anywhere to select a single vertical line.

Then, go to Edit > Define Pattern, and set the Name to Lines.

Define Pattern

2. How to Create a Background Texture

Step 1

Create a new 850 x 588 px document with the Resolution value set to 300, place the Black grunge wall texture image on top of the Background layer, and resize it as needed.

Add the Background Texture

Step 2

Go to Image > Adjustments > Levels, and change the Gamma value to 1.10.

Levels

Step 3

Double-click the texture layer to apply a Color Overlay effect with these settings:

  • Color: #3b7aab
  • Blend Mode: Overlay
Color Overlay

This will add a blue color to the texture.

Colored Texture

3. How to Create and Style Text Layers

Step 1

Create the text using the font Kenney Future, and set the Size to 50 pt.

Duplicate the text layer and change the copy‚s Fill value to 0%.

Create the Text Layers

Double-click the original text layer to apply the following layer style:

Step 2

Add a Bevel and Emboss with these settings:

  • Style: Stroke Emboss
  • Technique: Chisel Hard
  • Depth: 550
  • Size: 6
  • Uncheck the Use Global Light box
  • Angle: -169
  • Altitude: 37
  • Gloss Contour: Ring
  • Check the Anti-aliased box
  • Highlight Mode: Color Dodge
    • Opacity: 75%
  • Shadow Mode: Linear Burn
    • Opacity: 40%
Bevel and Emboss

Step 3

Add a Contour with these settings:

  • Contour: Cone – Inverted
  • Check the Anti-aliased box.
  • Range: 100%
Contour

Step 4

Add a Stroke with these settings:

  • Size: 3
  • Position: Outside
  • Fill Type: Gradient
  • Angle: 90
  • Click the Gradient box to create the gradient
Stroke

Create the Gradient by adding alternating Color Stops of the Colors #1b5ad3 and #6db7fd.

Gradient Fill

Step 5

Add an Inner Shadow with these settings:

  • Blend Mode: Color Burn
  • Color: #0886f1
  • Opacity: 60%
  • Uncheck the Use Global Light box
  • Angle: 90
  • Distance: 0
  • Choke: 25
  • Size: 9
Inner Shadow

Step 6

Add an Inner Glow with these settings:

  • Blend Mode: Vivid Light
  • Opacity: 70%
  • Color: #7ffffd
  • Choke: 30
  • Size: 16
  • Check the Anti-aliased box
  • Range: 100
Inner Glow

Step 7

Add a Gradient Overlay with these settings:

  • Check the Dither box
  • Blend Mode: Linear Burn
  • Opacity: 75%
  • Scale: 109%
  • Create the Gradient using the Colors #145190 to the left and #9517ff to the right.
Gradient Overlay

Step 8

Add a Pattern Overlay with these settings:

  • Pattern: Lines
  • Scale: 7%
Pattern Overlay

Step 9

Add an Outer Glow with these settings:

  • Blend Mode: Overlay
  • Opacity: 75%
  • Color: #dd69ff
  • Spread: 10
  • Size: 30
  • Check the Anti-aliased box
Outer Glow

Step 10

Add a Drop Shadow with these settings:

  • Opacity: 100%
  • Uncheck the Use Global Light box
  • Angle: 90
  • Distance: 10
  • Spread: 30
  • Size: 15
Drop Shadow

Step 11

Add another instance of the Drop Shadow effect with these settings:

  • Opacity: 70%
  • Uncheck the Use Global Light box
  • Angle: 90
  • Distance: 20
  • Size: 35
Drop Shadow

This will create the main effect.

Main Effect

4. How to Add More Layer Effects

Double-click the copy text layer to apply the following layer style:

Step 1

Add a Bevel and Emboss with these settings:

  • Size: 49
  • Uncheck the Use Global Light box
  • Angle: 58
  • Altitude: 21
  • Gloss Contour: Cone – Inverted
  • Check the Anti-aliased box
  • Highlight Mode: Vivid Light
    • Opacity: 77%
  • Shadow Mode:
    • Opacity: 0%
Bevel and Emboss

Step 2

Add a Contour with these settings:

  • Contour: Rolling Slope – Descending
  • Check the Anti-aliased box.
  • Range: 100%
Contour

Step 3

Add an Inner Shadow with these settings:

  • Blend Mode: Soft Light
  • Color: #ab2eec
  • Opacity: 100%
  • Uncheck the Use Global Light box
  • Angle: 90
  • Distance: 0
  • Size: 21
Inner Shadow

Step 4

Add an Inner Glow with these settings:

  • Blend Mode: Vivid Light
  • Opacity: 25%
  • Gradient: Use the Colors #3b5e7e to the left, #588b8a in the middle, and #c5c396 to the right
  • Source: Center
  • Size: 51
  • Check the Anti-aliased box
  • Range: 100%
Inner Glow

Step 5

Add a Gradient Overlay with these settings:

  • Check the Dither box
  • Blend Mode: Linear Light
  • Opacity: 50%
  • Scale: 109%
  • Create the Gradient using the Colors #98addc to the left and #9e727f to the right.
Gradient Overlay

Step 6

Add a Pattern Overlay with these settings:

  • Blend Mode: Multiply
  • Pattern: Paper 2
Pattern Overlay

Step 7

Add an Outer Glow with these settings:

  • Blend Mode: Color Dodge
  • Opacity: 75%
  • Color: #88621f
  • Spread: 10
  • Size: 20
Outer Glow

This will finish off the text effect.

Finished Text Effect

5. How to Add Finishing Touches

Step 1

If you want to add more than one line of text, just duplicate both styled text layers, and change their contents.

Add More Text

Step 2

Click the Create new fill or adjustment layer icon at the bottom of the Layers panel and choose Color Lookup.

Choose the Fuji REALA 500D Kodak 2392 (by Adobe).cube table from the 3DLUT File menu, and change the layer’s Opacity to 35%.

Color Lookup

Congratulations, You’re Done!

In this tutorial, we used textures, patterns, and layer styles to create a quick and easy tech-inspired scan-lines text effect.

Please feel free to leave your comments, suggestions, and outcomes below.

Final Result

Learning Gutenberg: A Primer with create-guten-block

Post pobrano z: Learning Gutenberg: A Primer with create-guten-block

Welcome back! We’ve just taken a look at what Gutenberg is and how it operates from the admin side. Gutenberg is certainly going to have a massive impact on the WordPress world. If you are just arriving here and have no idea what we’re talking about, I recommend at least skimming Part 1 to make sure you have the appropriate background.

Let’s create a custom block with a bit of help from a wonderful tool called create-guten-block. Onward!

Article Series:

  1. Series Introduction
  2. What is Gutenberg, Anyway?
  3. A Primer with create-guten-block (This Post)
  4. Modern JavaScript Syntax
  5. React 101 (Coming Soon!)
  6. Setting up a Custom webpack (Coming Soon!)
  7. A Custom „Card” Block (Coming Soon!)

Blocks live in plugins

To create a Gutenberg block, you create a WordPress plugin. Anything that affects *content*, like a Gutenberg block certain will, needs to be a plugin so that it remains active even as you change themes. Something that is very theme-specific or just affects how your site looks can be part of the theme files or functions.php file in your theme. Read more about this distinction in our article about WordPress Functionality Plugins.

That said, the blocks in themes issue is a hot topic. The WordPress Theme Review Team is discussing whether or not to allow blocks in themes at all as part of themes. A post, “Getting Ready for Gutenberg”, on the Theme Review Team’s Make page posed this question, and was met with strong opinions from both sides. The general consensus, however, is that blocks are plugin territory.

WordPress.org is comprised of various teams, each with their own homepage at make.wordpress.org/team-name, channel in the WordPress Slack, and a weekly meeting. If you are interested in getting involved in WordPress or curious about how it operates, I highly recommend browsing through a list of the teams here, joining a Slack channel, and popping into a weekly meeting to see how it all happens.

In the far future, it’s possible that themes will consist of *just a stylesheet*, while all custom functionality and content structure come from blocks in plugins. I’m paraphrasing the words of Tammie Lister, Gutenberg’s design lead, on this episode of Shoptalk Show. Very much worth a listen!

Taking a setup shortcut… for now

What’s kept me from diving head first into modern JavaScript is the dang configuration. The transpiling, the bundling, the code splitting, the tree shaking… yeesh, I’m busy! I love learning new things, but there’s a limit to my patience and, apparently, configuring a build process for a small test project is my limit.

It’s this sentiment that led to the development of a tool called create-react-app, zero-configuration build setup for, you guessed it, creating React apps. It’s brilliant. Assuming you have a functioning node and npm installation, you can run a single command and you have a project ready for you to start coding in React. The transpiling, bundling, and tree shaking is set up for you.

But wait… can we use create-react-app for Gutenberg blocks? No, but the aforementioned create-guten-block, developed and beautifully documented by Ahmad Awais, does pretty much the same thing for us! That’s what we’ll be using for our block.

create-guten-block is not the only block generating tool at our disposal! You can scaffold a block using WP-CLI, but I have chosen not to because the default setup is for ES5 (for now) and does not give us what we need for our journey into modern JavaScript. That being said, I found it helpful to dig through the ES5 implementation of a block as a way to reinforce the core concepts, so maybe give it a go after you finish here!

Yes, this is a shortcut. We are choosing to avoid understanding the core concepts of a technology by using a tool. We’ll have to learn these concepts someday. But for now, I’m totally fine bypassing this configuration step. My philosophy about using tools such as this: use them, but do so with the understanding that it *probably* won’t save you time or effort in the long run.

It’s worth noting that, like create-react-app, create-guten-block allows you to npm eject your configuration. This means exposing all of the settings the tool has created for us and making them available for customization. Note, however, that this is irreversible; if you eject and then make a mistake, you’re on your own to fix it! Like I said, you’ll have to learn it someday 🙂

Step 1: Install create-guten-block

We will first install create-guten-block globally, like so:

npm install -g create-guten-block

In theory this should work no problem, but that’s not realistic. create-guten-block requires a minimum of Node version 8 and npm 5.3, so if you haven’t updated either of them for a while, that’s one possible error (and here’s one possible solution).

I always start by pasting my console error into a search engine and removing line numbers and file names to keep my query general. In the interest of improving this tutorial, however, I am curious to hear about what went wrong so feel free to post your issue in the comments as well.

Step 2: Create that guten-block

It’s time! Let’s do it! You know what? I’m not going to tell you how because Ahmad’s documentation is so good and there’s no sense in replicating it.

Go here and follow Ahmad’s instructions to create that guten-block in your command line.

A screenshot of the integrated terminal showing the build process has started
You should see something like this when running the command, create-guten-block test, where “test” is the name of my block.

Step 3: Activate the plugin

Go to your Plugins screen, activate your new block plugin — it should be called something like test-block — CGB Gutenberg Block Plugin where „test-block” is what you named your block when creating it.

Screenshot of the Plugins screen of the WordPress admin showing the create-guten-block plugin is active

Step 4: That’s it! Let’s use our custom block!

So easy! Now, go to the editor view of a post or page, locate your block, and insert it.

Animated GIF showing the selection and insertion of the default block from create-guten-block

Although I named my block “test”, searching “test” in the block selector yielded the wrong result as you can see in the gif above. The default name of the block is instead “CGB Block” — we will change this very soon!

Text editor setup (optional)

I’ve found it very helpful to have a specific text editor setup for developing blocks. I use Visual Studio Code for my text editor, but I’m sure you can figure out something similar with whatever editor is your preference.

Here are the key ingredients:

  1. Easy access to the command line to keep an eye on build errors (there will be build errors)
  2. A copy of the Gutenberg source from GitHub for code reference (download or clone it here)
  3. Easy access to both your plugin’s directory and Gutenberg’s source directory from #2
A screenshot of the VS Code text editor, showing the integrated terminal and sidebar of folders
​​My VS Code setup for Gutenberg development. Notice the integrated terminal and multiple source directories on the right.

In VS Code, I accomplish this using the following features:

  1. The integrated terminal — open with Command + ~ on Mac, or from the menu bar with View > Integrated Terminal
  2. A Workspace containing folders for both your plugin and Gutenberg’s source from GitHub. You can doing this by opening your plugin directory in VS Code, then choosing File > Add Folder to Workspace and selecting the Gutenberg directory you downloaded from the GitHub repo. You can then save the Workspace for easy access with File > Save Workspace As (I called mine “Blocks” in the image above).

This part is optional, and you don’t have to use VS Code. The important thing is having ready access to the command line, your plugin’s source, and the Gutenberg plugin’s source for reference. You can totally reference the source on GitHub if you like, but I enjoy having the files in the same environment for side-by-side comparison and easy searching with Find In Folder.

We are using Gutenberg from the plugin repository for the actual functionality, but that instance only includes the compiled files. We want to reference the source files, so we need to use the codebase directly from GitHub. If you’d like to access updates before they are released in the plugin, you can clone the repository. It would be totally possible to build and work from the GitHub version, but for simplicity’s sake, we are using the plugin version in this tutorial.

Once you are ready to go, make sure you are cd‚d into your block’s plugin folder and run npm start. You should see a satisfying message indicating the process has started:

A screenshot of the integrated terminal showing the build process has started
After running npm start in our plugin folder, we are officially “Watching for changes…” (and we didn’t have to touch any config! Cheaters…)

I’m using Wes Bos’s theme for Cobalt 2 in VS Code as well as the same theme for ZSH in my Terminal and iTerm. This makes absolutely no difference in how the technology works, but it does make a difference, on a personal level, to customize your workspace and make it feel like your own (or Wes Bos’, in my case).

What’s what

Now that we are in code mode, let’s take a look at the files we’ll be working with. I’ll borrow this from the create-guten-block Readme for reference:

└── test-block
  ├── plugin.php
  ├── package.json
  ├── README.md
  |
  ├── dist
  |  ├── blocks.build.js
  |  ├── blocks.editor.build.css
  |  └── blocks.style.build.css
  |
  └── src
     ├── block
     |  ├── block.js
     |  ├── editor.scss
     |  └── style.scss
     |
     ├── blocks.js
     ├── common.scss
     └── init.php

For the purposes of this tutorial, we are only concerned with what is inside the src directory. We will not touch anything in dist (those are compiled files), plugin.php, or any stragglers such as package.json, package-lock.json, or.eslintignore.

plugin.php officially alerts WordPress of our plugin’s existence. It requires src/init.php, which is where we’ll write any PHP we need for our block(s). In general, we won’t write anything in plugin.php — out of the box, the only code it contains are the comments to register our plugin.

Let’s drill into src:

└── src
   ├── block
   |  ├── block.js
   |  ├── editor.scss
   |  └── style.scss
   |
   ├── blocks.js
   ├── common.scss
   └── init.php

The block directory contains files for single, individual block. This includes:

  • block/block.js — All the JavaScript for the individual block.
  • block/editor.scss — Sass partial for styles specific to the editor view,
  • block/style.scss — Sass partial for styles specific to the front-end view, i.e. what you see when you view your page/post.

Now, open up src/blocks.js:

A screenshot of the contents of blocks.js showing a single line importing the file blocks/block.js

I think of src/blocks.js as a table of contents for blocks, similar to the role of an index.scss or main.scss in a Sass project structure. If we wanted to include two blocks in our plugin — let’s say this was a suite of custom blocks — we could, in theory, duplicate the block directory, rename it, and add something like this to src/blocks.js:

import 'new-block/block.js';>

Then, whatever create-guten-block has prepared for us behind the scenes would know to include our new block’s block.js in the main script file compiled into dist (now is a good time to take a peek into dist, if you haven’t already).

Not too bad so far, right? We still haven’t really gotten to any JavaScript…

A challenge!

Okay, now it’s time for a challenge! Open up src/block/block.js and take a couple of minutes to read through the author, Ahmad’s, excellent comments.

Then, see if you can figure out how to*:

  1. Change the name of your block, that is, the one that shows in the block selector
  2. Change the icon of your block (❤ Dashicons)
  3. Change the text that displays on the front end i.e. when you “View Post”
  4. Change the text that displays on the back end i.e. editor view
  5. Give the front end view a border radius of 30px
  6. Give the editor view a gradient background
  7. Make the text in first paragraph tag editable

* You should be able to work through (almost!) all of these in about 10 minutes. 😉


How was that?

What problems did you run into? Did you get tired of reloading the editor? Did you see the “This block appears to have been modified externally” message more often than you’d like? I sure did, but such is life with new technology — there’s a lot to be desired in the developer experience, but this isn’t a priority for the team at present and will come in the later stages of Gutenberg’s planned development.

Most importantly, did you get #7?

If you did, then you should be writing this tutorial! That one was a gotcha. I hope you felt at least a little confused and curious because that’s how we learn! We’ll get to that in Part 3.

Now that we have our bearings, let’s dig deeper into this notion of a block.

Skeleton of a block

Here is block.js with the comments stripped out — what we might call the skeleton of a static block:

// Stripped down version of src/block/block.js

// PART 1: Import dependencies
import './style.scss';
import './editor.scss';

// PART 2: Setup references to external functions
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;

// PART 3: Register the block!
registerBlockType( 'cgb/block-test', {
  
  // Part 3.1: Block settings
  title: __( 'test - CGB Block' ),
  icon: 'shield',
  category: 'common',
  keywords: [
    __( 'test — CGB Block' ),
    __( 'CGB Example' ),
    __( 'create-guten-block' ),
  ],
  
  // PART 3.2: Markup in editor
  edit: function( props ) {
    return (
      <div>You’ll see this in the editor</div>
    );
  },
  
  // PART 3.3: Markup saved to database
  save: function( props ) {
    return (
      <div>This is saved to the database and returned with the_content();</div>
    );
  },
} );

Let’s do a side-by-side comparison with another static block, the “Separator” block from the default blocks included in Gutenberg. That file is is located in gutenberg/blocks/library/separator/index.js. If you have the folder open in either VS Code or Sublime, you can use the shortcut Command + Option + 2 on a Mac, or View > Split Editor to get the files side-by-side.

If you are following the text editor setup outlined previously, you should have something like this:

Side-by-side block.js files in VS Code — one side the block.js from create-guten-block, the other from the separator block in the Gutenberg library

In this image, I copy/pasted the above stripped-down version of the block into an empty file to compare it without the comments. That’s optional!

What similarities do you notice? What differences? Open up a few of the other block directories inside gutenberg-master/library/, and take a peek into their files, comparing them to our block skeleton. Spend a few minutes reading the code and see if you can spot some patterns.

Here are a few patterns I noticed:

  1. There are curly braces in variable declarations and function arguments all over the place.
  2. Markup appears inside of return statements and often contains made-up tag names (you might recognize these as React components).
  3. All blocks seem to have a settings object containing entires for title, icon , category, etc. In the library blocks, they appear in an export const settings = ... object, whereas in our plugin block, they are part of an argument for registerBlockType.
  4. All blocks have functions for edit and save as part of the settings object.
    • The syntax for the functions is slightly different than our block’s editand save functions:
      • edit( { className } ) { ... } in separator/index.js
      • edit: function(props) { ... } in our block.js
    • The library blocks appear to reference attributes and instead of props
  5. All blocks in the library contain an index.js. Some contain a block.js or other files that appear to contain a definition for a class extending a Component, e.g. class LatestPostsBlock extends Component { ....

What did you find? Feel free to contribute in the comments (but don’t stop reading here!).

A somewhat brief and relevant tangent

You probably noticed a statement importing @wordpress/i18n in every index.js and block.js file in the library, as well as a reference to wp.i18n in our plugin’s block.js. i18n stands for internationalization just like a11y stands for accessibility. Internationalization refers to the practice of developing your application to be easily translated to other languages. Since we want to prepare all static text in our blocks for translation, we assign wp.i18n to an alias of __for brevity, very much like we use the $ as an alias for good ‘ol jQuery. Read more about i18n for WordPress here

It’s also worth mentioning where that wp in wp.i18n is coming from and why it’s referenced as @wordpress/i18n in the Gutenberg source. wp is a global object — global meaning a variable available everywhere — containing all of WordPress’ publicly available JavaScript API methods. To demonstrate this, open up the console while on a page within the WordPress admin. Type wp and hit Enter. You should see something like this:

Animated GIF showing the response object when wp is typed into the console

So, anytime we reference something within that wp object, all we are doing is accessing some functionality the WordPress JavaScript API provides us. @wordpress/i18n in the Gutenberg source is doing the same thing, but its importing the functions from an npm module rather than the global object. The functions in the wp global have been intentionally exposed to the public API by the WordPress core developers for use in themes and plugins.

If you are anything like my internal critic, you might be thinking, “Whatever, Lara, I don’t care about those details. Just tell me how to make a cool block with all the JavaScript already!” To which I would reply:

There are so many moving parts and new concepts in this environment that, I’ve found, the more code I take for granted, the more frustrating and time-consuming the process becomes. Approach every line of code with curiosity! If you don’t know what it does, do a Find in Folder in the Gutenberg source and see if you can find a trail to follow. For me, at least, this has been a much more enjoyable way to approach unfamiliar code than trying to build something haphazardly with copy and paste.

And with that, let’s wrap up Part 2!

Homework

What? Homework? Heck yes, there is homework! In Part 3, Andy 🍉 will dive into modern JavaScript goodies: React, JSX, and ES6 syntax. Although our series is written for those relatively new to JavaScript, it is helpful to learn the code and the concepts from many different angles and resources.

In an effort to introduce some concepts early on, here is an outline for some “Homework” prior to Part 3:

1. Spend some time (1-2 hours) on a React tutorial, or until you can explain in your own words:

  • The render method in React
  • JSX and that those made-up tag names map to JavaScript functions
  • Why React uses className instead of class

Recommended resources:

I’d also recommend reading React State from the Ground Up here on CSS-Tricks, by Kingsley Silas, because it specifically dives into state in React. If you are brand new to React, this will be a lot to digest, but I think it’s worth getting it into your brain ASAP even if it doesn’t make sense quite yet.


2. Understand ES6 Destructuring and find a few examples of it in both the Gutenberg source and our plugin (that won’t be hard).

Recommended resources:


3. Be comfortable with conditional or ternary operators.

In a sentence, ternary operators are shorthand for if...else statements. You’ll see these all over the Gutenberg source — find some simple examples that provide a fallback for a string’s value, as well as more robust uses like in blocks/library/paragraph/index.js, for example.

Recommended resources:

  • The MDN article is very good.
  • Also look into the not not operator — here is a Stack Overflow post about it.
  • Not to get too far down this rabbit hole, but if you are extra ambitious, do some research about type coercion in JavaScript. This article on FreeCodeCamp and this chapter from You Don’t Know JS by Kyle Simpson are solid starting points.

Okay! Thank you so much for reading, and see you in Part 3 for React, JSX, and other goodies.

Comments

Was there any part of this tutorial that didn’t make sense? Did you get lost anywhere? We’d love to keep making this better, so please let us know if any part of this was hard to follow or if any information is incorrect or out of date.

Thank you, again, and good luck!


Article Series:

  1. Series Introduction
  2. What is Gutenberg, Anyway?
  3. A Primer with create-guten-block (This Post)
  4. Modern JavaScript Syntax
  5. React 101 (Coming Soon!)
  6. Setting up a Custom webpack (Coming Soon!)
  7. A Custom „Card” Block (Coming Soon!)

The post Learning Gutenberg: A Primer with create-guten-block appeared first on CSS-Tricks.

​Build live comments with sentiment analysis using Nest.js

Post pobrano z: ​Build live comments with sentiment analysis using Nest.js

(This is a sponsored post.)

Interestingly, one of the most important areas of a blog post is the comment section. This plays an important role in the success of a post or an article, as it allows proper interaction and participation from readers. This makes it inevitable for every platform with a direct comments system to handle it in realtime.

In this post, we’ll build an application with a live comment feature. This will happen in realtime as we will tap into the infrastructure made available by Pusher Channels. We will also use the sentiment analysis to measure whether comments are positive or negative, and display this information on an admin panel.

Direct Link to ArticlePermalink

The post ​Build live comments with sentiment analysis using Nest.js appeared first on CSS-Tricks.

How to Create a Vector T-Shirt Mockup Template in Adobe Illustrator

Post pobrano z: How to Create a Vector T-Shirt Mockup Template in Adobe Illustrator

Final product image
What You’ll Be Creating

In this tutorial, you will learn how to use the Mesh Tool in Adobe Illustrator to create a vector T-Shirt mockup template!

If you want to skip the tutorial and just use these shirts in your work, purchase the T-Shirt Design Template from GraphicRiver!

You can also a try a similar tutorial of mine, where you can learn how to apply patterns to these T-Shirt mockup templates!

Mens T-Shirt Design Template
T-Shirt Design Template

1. How to Draw a T-Shirt Mockup Template

Step 1

Let’s learn how to use the Mesh Tool while creating a photo-realistic T-shirt!

Begin by drawing the shape of half of a shirt with the Pen Tool (P). Fill it in with #F3F3F3.

Create a copy of the shape! Put it aside—we will need it later.

Let’s start using a Mesh! Take the Mesh Tool (U)
and start creating a Mesh grid on the object by placing nodes.
Afterwards, select the nodes on the left edge of the shirt and
change their color to #B7B7B7.

Add some more nodes, as indicated in the screenshot below, and color the selected nodes with #F4F4F4, adding wrinkles to the shirt.

mesh shirt

Step 2

Continue coloring the nodes as indicated below. Use these colors:

  1. #DFDFDF
  2. #E3E3E3
  3. #F7F7F7
  4. #B9B9B9
gradient mesh template

Step 3

Take the second copy of the shirt, reflect it, and continue coloring.

  1. #F3F3F3
  2. #B7B7B7
  3. #D9D9D9
  4. #EEEEEE
vector t-shirt template mockup

Step 4

Finish the second half.

  1. #CFCFCF
  2. #C4C4C4
  3. #B9B9B9
  4. #E3E3E3
how to use gradient mesh

Step 5

Draw a sleeve.

  1. #EAEAEA
  2. #BDBDBD
  3. #B6B6B6
  4. #CFCFCF
  5. #DADADA
  6. #BDBDBD
how to draw with gradient mesh

Step 6

  1. #E9E9E9
  2. #C0C0C0
  3. #F4F4F4
vector t-shirt

Step 7

Bend the Mesh into a collar with Effect > Warp > Arc, using -85% Bend.

Object > Expand Appearance of the result.

t-shirt mockup template

Step 8

Draw the second part of the collar.

  1. #6A6A6A
  2. #979797
gradient mesh

Step 9

Combine the collar parts.

photo-realistic vector mesh

Step 10

Assemble the T-shirt mockup!

photo-realistic t-shirt mockup template

2. How to Recolor the T-Shirt Mockup Template

Step 1

To get all the colors you can see in the thumbnail, create three more copies of the white shirt we just made.

Grab a copy and proceed to Edit > Edit Colors > Adjust Colors. Change the tab to Greyscale and apply 32% Black. Don’t forget to tick the Convert box.

recoloring shirts

Step 2

Create two more copies of the grey shirt mockup we just made. Grab the original and recolor it with Edit > Edit Colors > Adjust Colors.

This time, change the tab to RGB and apply 18% Red, -30% Green, and -26% Blue. Don’t forget to tick the Convert box.

how to recolor a t-shirt template

Step 3

Take another copy and essentially repeat the last step by going to Edit > Edit Colors > Adjust Colors, changing the tab to RGB and applying 6% Red, 13% Green, and -60% Blue.

green t-shirt mockup

Step 4

Take the final copy and convert it to orange with 27% Red, -5% Green, and -41% Blue.

orange vector t-shirt template

Step 5

Grab one of the original white T-Shirts and convert it to Grayscale with 40% Black.

how to recolor mesh t-shirt

Step 6

Recolor the grey template to cyan with -9% Red, 20% Green, and 16% Blue.

colorful vector t-shirt mockups

Step 7

Take the last white copy and turn it black with 63% Black.

black t-shirt mesh template

Step 8

Create a copy of the black T-Shirt mockup and recolor it to dark red with 9% Red, -9% Green, and -7% Blue.

set of colorful shirts

Step 9

Congratulations! Your colorful set of T-Shirt mockup templates is done!

white vector mesh t-shirt mockup template

Awesome Work!

What now? You can try any of my other tutorials from my profile, or check out my portfolio on GraphicRiver, as well as the original shirts collection we recreated in this tutorial.

You can also try a similar tutorial of mine, where I show a way to apply patterns to these T-Shirt mockups!

I hope you enjoyed the tutorial, and I’ll be extremely happy to see your results in the comments below!

Mens T-Shirt Design Template
Men’s T-Shirt Design Template