Pet Nativa Pet Food: Mail Box

Post pobrano z: Pet Nativa Pet Food: Mail Box
Print
Pet Nativa

Your order has shipped. Pescription pet food they’ll go crazy for.

Advertising Agency:Area 23 FCB, New York, USA
Evp:Tim Hawkey
Managing Director:Tim Hawkey
Svp:Bernardo Romero, Jesse Kates, Bruno Brasileiro
Group Creative Director:Bernardo Romero
Creative Director:Jesse Kates, Bruno Brasileiro
Associate Creative Director:Mathieu Vinciguerra, Guillermo Aracena
Vp:Mathieu Vinciguerra
Senior Copywriter:Clay MacGuire

International Artist Feature: Hong Kong

Post pobrano z: International Artist Feature: Hong Kong

Welcome back to our International Artist Series.

Today
we’re catching up with six incredible artists from Hong Kong, home of incredible history, a bustling skyline, and the talented people of East Asia. I
asked each artist how
their country and culture inspired their work, and they delivered great
responses.

Panyeung Chan

Panyeung is a designer and illustrator from Hong Kong. Full of culture and dynamic scenes, his work reflects his real-life experience as an artist living in this energetic city.

See more in his portfolio and follow him on Instagram!

Leaving Hong Kong

Living in Hong Kong, the most fascinating thing is definitely its multi-cultural environment. When you walk down the street, you can
easily find everything in your surroundings, from architecture, to food and language—all hugely influenced by different cultures.

Leaving Hong Kong
Leaving Hong Kong

The 14th Guangdong Dance Festival

Hong Kong is such a small place that people are living here in a crowded
condition so most buildings along the main avenue
combine their list of functions. Inside one building alone you could find
that there is a wet market, a library, a gym room, or a gallery separated on a different floor.
Those crowded and detailed images stay deep in my
mind and I’ve always wanted to reflect this kind of impression in my work.

The 14th Guangdong Dance Festival
The 14th Guangdong Dance Festival

The 12th Guangdong Dance Festival

The 12th Guangdong Dance Festival
The 12th Guangdong Dance Festival

Aging Population in Hong Kong

Many internationally well-known galleries create their branches here in Hong
Kong. That is really good news for any art lover! Although art is not a mainstream industry in Hong Kong, people interested in art can really
enjoy living or visiting this city.

Aging Population in Hong Kong
Aging Population in Hong Kong

Claire O’Brien

Claire is a creative illustrator currently living in Hong Kong. Her joyous illustrations are not only sweet and beautiful but full of color and life.

See more in her portfolio and follow her on Instagram!

Little Bear Blu

Even though I’ve been here for only five
years, to me it’s still very exotic and I find it incredibly
interesting. I love the way the traditional culture spills out into the street in Hong Kong. It’s not uncommon to see
offerings of oranges and incense sticks nestled in and around the feet
of skyscrapers.

In the village near my studio, there are mini street
temples with little green tiled roofs, and I really
love watching the older generation going about their daily lives with woven wicker hats, sampan and even hanging
fish out to dry.

Little Bear Blu
Little Bear Blu

Hmong Woman and Child

I’m passionate about folk-art and ethno-cultural art forms. Hong
Kong has really beautiful folk arts and crafts, and my favorite
time of year is the Mid-Autumn festival. The colors are so inviting and
cheerful—it’s really magical to me.

I also came across embroidered bags
woven by the Miao and Hmong tribes in Northern China, Laos and Thailand
being sold in the markets here. That introduced me to a whole other world of
amazing inspiration and I really fell in love with the motifs and
traditional dress. Hong Kong is such a great place that just sets you off on a new journey of inspiration.

Hmong Woman and Child
Hmong Woman and Child

Year of the Rooster

Year of the Rooster
Year of the Rooster

Neon Koi

The art community here is small but vibrant. In the studio where I work, there are textile artists, ceramic
artists, graphic artists, and oil painters. We
all sort of influence one another back and forth, and I’ve also met some
lovely illustrators on Instagram. It’s quite hard to socialize or find other like-minded creatives in such
a business-oriented place. But yet we thrive!

Neon Koi
Neon Koi

Dixon Chan

Dixon is a talented graphic designer based in Hong Kong. His work features fantastic graphic design work with stunning visuals of design packages and more.

See more in his portfolio!

Paradox – Mid-Autumn Moon Festival

I love that it is always convenient to get around here and that nothing is ever too far away.
I get so spoiled sometimes that I once felt a 20 minute walk to a live house was too much when I was touring with other bands in Taipei.

Paradox - Mid-Autumn Moon Festival
Paradox – Mid-Autumn Moon Festival

LAVA

Like a lot of Hong Kong kids, I was taught it’s
better to be as multi-talented as possible. So I like trying out different
styles, tricks or gimmicks here and there in my design work.

In the area, there are mostly busy colors, overloaded
neon signs, too many adverts everywhere, and color themed subway stations. So I guess it’s in my subconscious to
use vibrant colors.

LAVA
LAVA

The Joker – Tuxedo

The Joker - Tuxedo
The Joker – Tuxedo

Avengers: Age of Ultron

The art community is pretty small here, I think, but closely knit. There are lots of
indie or small scale collaborations between people of different fields
and disciplines. It’s a nice little self-sufficient scene.

Avengers Age of Ultron
Avengers: Age of Ultron

April Y. – Leafbear Studio

April is an artist who creates whimsical illustrations in Hong Kong. With a specialty in watercolor paintings, her work is delightfully unique with many pieces dedicated to fairy tales and yummy cuisine.

See more in her portfolio and follow her on Instagram.

Watercolor – Into the Maze

I love the convenience of living in HK. Everything is so accessible
as the transport system is very efficient. Also the food in HK is simply
amazing. You can find all sorts of different types of cuisine here.

Watercolor - Into the Maze
Watercolor – Into the Maze

Watercolor Doodles – Once Upon A Time

I draw my inspiration from what I see and experience daily. Hong Kong is
a very lively city where the Eastern and Western cultures truly blend.
There are always new discoveries to be made when you walk on its streets
and experience the energy and colorful life of the city.
It also
has a very unique cityscape filled up with skyscrapers. So both the culture
and the urban street scenes serve as a source of inspiration for me.

Watercolor Doodles - Once Upon A Time
Watercolor Doodles – Once Upon A Time

The Towers Series

The Towers Series
The Towers Series

Watercolor Doodles – Once Upon A Time

Apart from the
increasing number of international art shows and exhibitions being held
in Hong Kong, there are regular open studios, events, and weekend art markets for
independent artists to showcase their work and to connect with other
independent artists.

Watercolor Doodles - Once Upon A Time
Watercolor Doodles – Once Upon A Time

Kitty Wong

Our next amazing feature is Kitty, a traditional artist living in Hong Kong. With a fondness for the beauty and skill of pen and ink illustrations, her work spills into elaborate swirls of unique compositions.

See more in her portfolio!

Face

Hong Kong has such a strong mix of Chinese and Western culture that it
shows in everyday living and provides open minded thinking. We may not
have the best environment for creativity and opportunity, but it
certainly has room for those who strive to be persistent as creatives.

Face
Face

Chinese Zen Flower Doodle

In the past 20 years, I’ve worked with many talented creative
people and launched fantastic projects in top international advertising agencies. Hong Kong’s mix of culture provides constant stimulation and
collaboration. So having new ideas is everyday practice. I only started creating four years ago and I’ve already had tremendous opportunities while having a full time
marketing job in a new cultural destination.

Chinese Zen Flower Doodle
Chinese Zen Flower Doodle

Morning Charm

Morning Charm
Morning Charm

Face

In Hong Kong, like-minded artists become close and form collaborative projects, and art is very subjective in a way. But it’s a global market and
platform for many galleries, auction houses, and exhibitors. So international art events have been stimulating public interest in
the recent years.

Face
Face

Ophelia Pang

Our last artist is Ophelia, an imaginative illustrator living in Hong Kong. Her simplistic use of color and texture is absolutely intriguing, as she creates charming illustrations of the world around her.

See more in her portfolio!

A Cloudy Day

I love that Hong Kong is such a compact place where doing anything is very convenient.

We have food and cuisine from around the world and all types of services are just fast and efficient.
People work hard and play hard. It is a city that never sleeps.

A Cloudy Day
A Cloudy Day

The Place That I Used to Know

I admire Matisse, Egon Schiele, Van Gogh, as well as Chinese artists such as
Qi Baishi and Wu Guanzhong. I myself learnt
Chinese sumi painting when I was small and then Western watercolor and oil painting
when I grew older. My artistic styles are influenced by all of them.

The Place That I Used to Know
The Place That I Used to Know

The Place That I Used to Know 2

The Place That I Used to Know 2
The Place That I Used to Know 2

Paris

We have all sorts of design communities here, many of them are
active groups on Facebook where artists and designers share their work
and advice.

Paris
Paris

Many thanks to the artists who took time to answer my
questions and share a bit about themselves and how their country and/or culture
has affected their work. You can check out more of their work in the links
below:

Flora Tristán: The Honest Proposal

Post pobrano z: Flora Tristán: The Honest Proposal

Media, PR
Flora Tristan

Advertising Agency:Circus Grey, Lima, Peru
Chief Creative Officer:Juan Carlos Gomez De La Torre
Creative Director:Carlos Tolmos, Celso Zelaya
Art Director:Luigi Rissi
Copywriter:Alejandra Jordán, Nicolás Soto
Account Supervisor:Sandra Alfaro
Illustrator:Erick Cusihuallpa
Producer:Gabriel Cano
Director:Dragon
Photographer:Daniel Bengoa, StereoFoto
Music & Sound effects:Sin Anestesia
Retouch:Monica Oyarce, Carlos Torres
Additional Credits:Sangre

How to Create a Sci-Fi, Robot Photo Manipulation in Adobe Photoshop

Post pobrano z: How to Create a Sci-Fi, Robot Photo Manipulation in Adobe Photoshop

Final product image
What You’ll Be Creating

Test out your skills and build a sci-fi scene from scratch!

In this tutorial, I’ll show you how to make a cool 80s-inspired photo manipulation using free stocks and 3D assets in Adobe Photoshop.

Get inspired! Find more stocks for your manipulations on Envato Market.

Tutorial Assets

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

Finding Sci-Fi Inspiration

I’ve been wanting to make a sci-fi manipulation for a while now. So I was super happy when I stumbled across this Robot stock, modeled after the ED-209 machine in the movie, RoboCop.

So with this in mind, I’ll be going for a total 80s sci-fi look, complete with body armor, an 80s droid, and a night-time city scene. Though it’s not based on the movie, this photo art can still be made by finding inspiration about the series online.

Just check out the background characters and story for more ideas.

Let’s take a look at the before and after, featuring some of the stocks used:

Before and After manipulation

Pretty cool! We’ll learn how to build the entire scene from scratch, using a couple of free stocks and 3D assets from Envato Elements.

Let’s get started!

1. How to Build the Sci-Fi Scene

Step 1

Start by creating the general composition.

Open a New Document in Photoshop at 2000 x 1500 pixels and 300 dpi.

Copy and Paste the Robot Stock onto a New Layer. Resize it with the Free Transform Tool (Control-T) and position it to hug the right side, as shown below.

Feel free to delete the original white background layer.

Add the robot

Step 2

In order to make the most out of this image, we need to cut it up.

We’re still going to use the dark gradient background and flat ground, so we just have to separate the robot onto a New Layer.

Use the Polygonal Lasso Tool (L) to make a selection around the robot. It’s okay if the selection is imperfect. Once it’s selected, hold Control-J once to create a new Duplicate onto a New Layer.

cut out the robot

Step 3

Now add the city.

Copy and Paste the City Stock onto a New Layer above the original Robot layer. Free Transform (Control-T) to resize the city picture and fill up the background.

But make sure the bottom floor from the robot stock is still visible!

Add the city stock

Step 4

Let’s add the model next!

Copy and Paste the Model Stock onto a New Layer above the robot copy (Layer 2).

Add the model
  1. Resize the picture (Control-T) to fill the document as shown.
  2. Then add a Layer Mask to the model and use a Hard Round Brush (100% Hardness, 100% Opacity) to paint black onto the mask until the entire background is removed.
  3. Right-click the Layer Mask to Apply Mask when you’re through. Then rename the layer „Model.”

Step 5

For more style, let’s add the glasses and armor.

Download this angle of the Sunglasses 3D Stock. (Feel free to use your own stock, or just omit the glasses entirely.)

Copy and Paste the glasses onto a New Layer above the Model layer. Resize (Control-T) the glasses so that they fit the model’s face better.

Add the glasses

Now add the armor.

Use the Polygonal Lasso Tool (L) to select these highlighted areas one at a time from the Armor Stock.

Add the armor

Step 6

Copy and Paste each piece onto a New Layer and position them to fit onto the model. Use the Eraser Tool (E) to erase any areas you don’t want showing. Once they’re positioned, Merge all the armor layers together.

For a little extra length in her hair, add some extensions to the ponytail!

Lengthen the hair

Simply select the ponytail with the Polygonal Lasso Tool (L). Copy and Paste it onto a New Layer, and then use the Free Transform Tool (Control-T) to make the hair longer.

Erase any areas you don’t need before Merging the layer with the original Model layer.

Step 7

The next thing we’ll add is the Earth patch.

We’re going to apply this to her outfit to add to the visual story. Creating a quick embroidered patch will help cover the red flower shown on the model’s chest, which is currently a little distracting.

Open the Earth Stock in Photoshop.

Create the earth patch

Then go to Filter > Filter Gallery.

Select Rough Pastels and add the following values:

  • Stroke Length: 6
  • Stroke Detail: 6
  • Scaling: 100%
  • Relief: 20

When you’re finished, Copy and Paste the Earth patch onto a New Layer above the model. Use the Free Transform Tool (Control-T) to change the perspective so that it’s resting on her chest.

Add the patch and stroke

Then Right-click the patch layer and go to Blending Options. Add a quick blue #031030 Stroke with the options shown above.

Here’s the result so far.

Step 8

The last piece of this puzzle is the moon.

Copy and Paste a selection of the Moon Stock onto a New Layer above the others.

Add the moon

Add a Layer Mask to the layer and use a Soft Round Brush (0% Hardness, 100% Opacity) to mask away the harsh edges of the picture.

Here is the composition so far.

Composition result

2. How to Create Depth of Field

Now that we have all the elements in place, we can move on to creating depth of field.

Depth of field will give us that realistic look by making sure that the objects look more blurred as they move farther away in the distance.

Step 1

Start with the robot.

Select the robot copy (Layer 2) and hold Control-J to create another Duplicate. Temporarily hide the copy, and then go to Filter > Blur > Gaussian Blur. Add a Radius of 5 pixels and hit OK.

Blur the robot

This second copy of the robot will help bring some of the details back.

Unhide the robot copy (Layer 2 copy) and Right-click to set it as a Clipping Mask to Layer 2. Now lower the Opacity to 50%. Now that the robot shows much clearer, Erase any areas you prefer to stay blurred with the Eraser Tool (E).

Mask the robot

You can also take this time to refine the original robot. Add a Layer Mask to mask away any remaining parts that are showing above the city.

Step 2

Move on to the City layer.

Select the layer and go to Filter > Blur > Gaussian Blur. Add a Radius of 6 pixels and hit OK.

Blur the city

Step 3

Lastly, we’ll blur the moon.

Select the layer and change the Layer Blend Mode to Screen. Then go to Filter > Blur > Gaussian Blur. Add a Radius of 4 pixels and hit OK.

Blur the moon

3. How to Adjust the Lighting

To make this scene more realistic, we’ll need to adjust the lighting extensively for a beautiful night scene.

Try not to get too distracted by the color changes; we’re just focusing on the shading values for now.

Step 1

Let’s start with the background.

Create a New Layer below the robot copy (Layer 2) and fill it with blue #111146 using the Paint Bucket Tool (G).

Set the Layer Blend Mode to Difference.

Add a difference layer

Step 2

Create another New Layer, this time below the blue layer.

Use a Soft Round Brush (0% Hardness, 70-80% Opacity) to paint greenish-black #020811 along the bottom of the ground. Allow a single bit of light to appear below the robot’s right foot.

Set the Layer Blend Mode to Multiply.

Make the ground darker

Step 3

Let’s adjust the robot.

Create another New Layer, set as a Clipping Mask to the robot copy (Layer 2).

Set the Layer Blend Mode to Multiply and use a Soft Round Brush to paint dark blue #151b31 all over the left side of the robot and brown #38150c towards the top.

Make sure to get into those crevices too!

Our light source is coming from the right, so make sure the robot is mostly shaded behind the model.

Shade the robot

To make the robot even darker, add an Adjustment Layer.

Set a New Color Lookup Adjustment Layer as a Clipping Mask to the robot copy (Layer 2).

Set the 3D LUT File to NightFromDay.Cube. Then set the Layer Blend Mode to Darken and the Opacity to 65%.

Darken the robot more

Step 4

Let’s continue to darken the background.

Create a New Layer above the robot copy. This one shouldn’t be clipped.

Use the Gradient Tool (G) to create a blue #131a33 to transparent Linear Gradient moving upwards from the ground. Set the Layer Blend Mode to Difference and the Opacity to 78%.

Darken the background

Step 5

Light up the city!

Create a New Layer underneath the Dark Green and Blue layers.

Use a Soft Round Brush (0% Hardness, 70% Opacity) to paint yellow #e0e0ad onto the city lights. Set the Layer Blend Mode to Overlay and the Opacity to 61%.

Light the city

Step 6

Now let’s shade the model.

Create a New Layer and set it as a Clipping Mask to the model. Set the Layer Blend Mode to Multiply and use a dark blue #0e1328 to paint soft shadow onto the model with a Soft Round Brush.

Paint shadow on the model

We’ll need to color/darken the glasses separately.

Create a New Layer above the Glasses layer and set it as a Clipping Mask to the glasses. Use a Hard Round Brush to paint blue #0a206c all over the glasses, and then set the Layer Blend Mode to Darken.

Color the glasses

Step 7

Take this moment to clean up any areas or add extra details with a Hard Round Brush.

Here I added an earpiece (with highlights) for the glasses, a rectangular bar on her shirt, and painted away the original earpiece that covers her eye. Just use the Eyedropper Tool (I) to sample colors from these areas to add these details on a New Layer.

Add more details

4. How to Finish the Manipulation

Great job so far!

Here is what the composition currently looks like.

current composition

For the final stages of this manipulation, all we need to do is add a little more lighting and tweak the final colors with Adjustment Layers.

Let’s do it!

Step 1

Temporarily Hide the detail layers.

Create a New Adjustment Layer of Curves above the Model layer. Set the curves like the ones shown below for the RGB and Blue Channels. This will make the whole scene a little darker.

Add a curves adjustment

Step 2

Now light up the armor and robot!

Create a New Layer above the rest. Use a pale green #b6d6be to paint light on the armor and robot with a Soft Round Brush (0% Hardness, 50% Opacity).

Then set the Layer Blend Mode to Vivid Light.

Make sure that some of the light is reflected onto the model’s skin, hair, and outfit.

Add light to the girl and robot

Step 3

For more style, add a dramatic lip color.

Unhide the detail layers. Create a New Layer set to Multiply. Paint blue #283d89 onto the model’s lips for an intense, stylish look!

Add a blue lipstick

Step 4

Continue to tweak the lighting. Add a quick vignette!

Create a New Layer set to Soft Light. Use the Gradient Tool (G) to create a blue #010228 to transparent Radial Gradient, making sure the Reverse option is checked.

Lower the Layer Opacity to 50%.

Add a vignette

Step 5

Almost there!

Now adjust the color scheme with a New Adjustment Layer of Levels above the rest. Set the values for the RGB, Red, and Blue Channels to the following:

Add a levels adjustment

Here’s the result.

Result after levels

Step 6

Now let’s make this composition black and white!

Because the colors in each stock are so different, this ends up being a much better option than leaving it in color. But feel free to experiment!

Create a New Adjustment Layer of Gradient Map above the rest. Add a black to white Linear Gradient, and then set the Layer Blend Mode to Color.

Add a gradient map adjustment

Step 7

For a slightly blue hue, fill a New Layer with blue #00183b above the rest, using the Paint Bucket Tool (G).

Then set the Layer Blend Mode to Lighten and the Opacity to 15%.

Add a blue hue

Step 8

Time for the highlights!

For this last step, all we need to do is use a tapered Hard Round Brush to paint crisp white highlights around the scene. Do this on one last New Layer.

Make sure the highlights reflect both the moon and city as potential light sources.

Add highlights

That’s it! Check out the final result below!

All Done! Great Job!

Have fun making your very own sci-fi manipulations by using free stocks and 3D assets. In this tutorial, not only were we able to create an entire scene from scratch, but we also made it look as if it came straight from a movie!

I hope you’ve enjoyed this tutorial! How’d you do? Share your comments and results below.

For more photo manipulation tutorials like this one, check out these links:

Sci Fi Photo Manipulation Photoshop Tutorial by Melody Nieves

Managing State in React With Unstated

Post pobrano z: Managing State in React With Unstated

As your application becomes more complex, the management of state can become tedious. A component’s state is meant to be self-contained, which makes sharing state across multiple components a headache. Redux is usually the go-to library to manage state in React, however, depending on how complex your application is, you might not need Redux.

Unstated is an alternative that provides you with the functionality to manage state across multiple components with a Container class and Provider and Subscribe components. Let’s see Unstated in action by creating a simple counter and then look at a more advanced to-do application.

Using Unstated to Create a Counter

The code for the counter we’re making is available on GitHub:

View Repo

You can add Unstated to your application with Yarn:

yarn add unstated

Container

The container extends Unstated’s Container class. It is to be used only for state management. This is where the initial state will be initialized and the call to setState() will happen.

import { Container } from 'unstated'

class CounterContainer extends Container {
  state = {
    count: 0
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 })
  }

  decrement = () => {
    this.setState({ count: this.state.count - 1 })
  }
}

export default CounterContainer

So far, we’ve defined the Container (CounterContainer), set its starting state for count at the number zero and defined methods for adding and subtracting to the component’s state in increments and decrements of one.

You might be wondering why we haven’t imported React at this point. There is no need to import it into the Container since we will not be rendering JSX at all.

Events emitters will be used in order to call setState() and cause the components to re-render. The components that will make use of this container will have to subscribe to it.

Subscribe

The Subscribe component is used to plug the state into the components that need it. From here, we will be able to call the increment and decrement methods, which will update the state of the application and cause the subscribed component to re-render with the correct count. These methods will be triggered by a couple of buttons that contain events listeners to add or subtract to the count, respectively.

import React from 'react'
import { Subscribe } from 'unstated'

import CounterContainer from './containers/counter'

const Counter = () => {
  return (
    <Subscribe to={[CounterContainer]}>
      {counterContainer => (
        <div>
          <div>
            // The current count value
            Count: { counterContainer.state.count }
          </div>
          // This button will add to the count
          <button onClick={counterContainer.increment}>Increment</button>
          // This button will subtract from the count
          <button onClick={counterContainer.decrement}>Decrement</button>
        </div>
      )}
    </Subscribe>
  )
}

export default Counter

The Subscribe component is given the CounterContainer in the form of an array to its to prop. This means that the Subscribe component can subscribe to more than one container, and all of the containers are passed to the to prop of the Subscribe component in an array.

The counterContainer is a function that receives an instance of each container the Subscribe component subscribes to.

With that, we can now access the state and the methods made available in the container.

Provider

We’ll make use of the Provider component to store the container instances and allow the children to subscribe to it.

import React, { Component } from 'react';
import { Provider } from 'unstated'

import Counter from './Counter'

class App extends Component {
  render() {
    return (
      <Provider>
        <Counter />
      </Provider>
    );
  }
}

export default App;

With this, the Counter component can make use of our counterContainer.

Unstated allows you to make use of all the functionality that React’s setState() provides. For example, if we want to increment the previous state by one three times with one click, we can pass a function to setState() like this:

incrementBy3 = () => {
  this.setState((prevState) => ({ count: prevState.count + 1 }))
  this.setState((prevState) => ({ count: prevState.count + 1 }))
  this.setState((prevState) => ({ count: prevState.count + 1 }))
}

The idea is that the setState() still works like it does, but this time with the ability to keep the state contained in a Container class. It becomes easy to spread the state to only the components that need it.

Let’s Make a To-Do Application!

This is a slightly more advanced use of Unstated. Two components will subscribe to the container, which will manage all of the state, and the methods for updating the state. Again, the code is available on Github:

View Repo

The container will look like this:

import { Container } from 'unstated'

class TodoContainer extends Container {
  state = {
    todos: [
      'Mess around with unstated',
      'Start dance class'
    ],
    todo: ''
  };

  handleDeleteTodo = (todo) => {
    this.setState({
      todos: this.state.todos.filter(c => c !== todo)
    })
  }
 
  handleInputChange = (event) => {
    const todo = event.target.value
    this.setState({ todo });
  };

  handleAddTodo = (event) => {
    event.preventDefault()
    this.setState(({todos}) => ({
      todos: todos.concat(this.state.todo)
    }))
    this.setState({ todo: '' });
  }

}

export default TodoContainer

The container has an initial todos state which is an array with two items in it. To add to-do items, we have a todo state set to an empty string.

We’re going to need a CreateTodo component that will subscribe to the container. Each time a value is entered, the onChange event will trigger then fire the handleInputChange() method we have in the container. Clicking the submit button will trigger handleAddTodo(). The handleDeleteTodo() method receives a to-do and filters out the to-do that matches the one passed to it.

import React from 'react'
import { Subscribe } from 'unstated'

import TodoContainer from './containers/todoContainer'

const CreateTodo = () => {
  return (
    <div>
      <Subscribe to={[TodoContainer]}>
        {todos =>
          <div>
            <form onSubmit={todos.handleAddTodo}>
              <input
                type="text"
                value={todos.state.todo}
                onChange={todos.handleInputChange}
              />
              <button>Submit</button>
            </form>
          </div>
        }
      </Subscribe>
    </div>
  );
}

export default CreateTodo

When a new to-do is added, the todos state made available in the container is updated. The list of todos is pulled from the container to the Todos component, by subscribing the component to the container.

import React from 'react';
import { Subscribe } from 'unstated';

import TodoContainer from './containers/todoContainer'

const Todos = () => (
  <ul>
    <Subscribe to={[TodoContainer]}>
      {todos =>
        todos.state.todos.map(todo => (
          <li key={todo}>
            {todo} <button onClick={() => todos.handleDeleteTodo(todo)}>X</button>
          </li>
        ))
      }
    </Subscribe>
  </ul>
);

export default Todos

This component loops through the array of to-dos available in the container and renders them in a list.

Finally, we need to wrap the components that subscribe to the container in a provider like we did in the case of the counter. We do this in our App.js file exactly like we did in the counter example:

import React, { Component } from 'react';
import { Provider } from 'unstated'

import CreateTodo from './CreateTodo'
import Todos from './Todos'

class App extends Component {
  render() {
    return (
      <Provider>
        <CreateTodo />
        <Todos />
      </Provider>
    );
  }
}

export default App;

Wrapping Up

There are different ways of managing state in React depending on the complexity of your application and Unstated is a handy library that can make it easier. It’s worth reiterating the point that Redux, while awesome, is not always the best tool for the job, even though we often grab for it in these types of cases. Hopefully you now feel like you have a new tool in your belt.

The post Managing State in React With Unstated appeared first on CSS-Tricks.

​Build a realtime polling web app with Next.js

Post pobrano z: ​Build a realtime polling web app with Next.js

(This is a sponsored post.)

Learn to build a webapp that accepts user votes, using Next.js and Chart.js. Users can vote for their favorite pet, and the results are displayed in realtime on a graph in their browser using Pusher Channels.

Direct Link to ArticlePermalink

The post ​Build a realtime polling web app with Next.js appeared first on CSS-Tricks.

How to Create a Quick 3D Botanical Letter Effect in Adobe InDesign

Post pobrano z: How to Create a Quick 3D Botanical Letter Effect in Adobe InDesign

Final product image
What You’ll Be Creating

Often seen across advertising and poster artwork, this eye-catching effect gives an immersive, natural look to any letter. As well as being a quick tutorial, this is also a great introduction to some more advanced techniques in Adobe InDesign. 

If you’re on the hunt for more great fonts to use in your text effects, head on over to Envato Elements to browse a huge range of display typefaces.

Ready to get started? Awesome, let’s go!

What You’ll Need to Create Your Text Effect

For this tutorial, you’ll need access to both Adobe InDesign and Adobe Photoshop. You’ll also need to download the following images and font files:

1. How to Map Out Your Text Effect

Step 1

Open up Adobe InDesign and go to File > New > Document. You can set up your page to any size, but here I’ve set it up as Portrait A3. When you’re ready, click Create

Expand the Layers panel (Window > Layers) and double-click on Layer 1 to rename it as Background.

Create four new layers above this, in this order: Type, Leaves Inside, Shadow, and finally Elements in Front at the top. 

Then lock all layers except Background.

background layer

Step 2

Use the Rectangle Frame Tool (F) to create an image frame across the whole page. 

File > Place, navigate to the pink paper background image, and click Open, allowing it to fill the frame completely (without the gift box in the corner visible).

paper background

Step 3

Lock the Background layer and unlock the layer above, Type.

Create a large text frame on the page using the Type Tool (T), and type in a single letter*. From the Controls panel at the top of the workspace, set the Font to Nista International Bold, and make the Font Size nice and generous.

* Note that this effect works much better with completely angular letters, like ‘F’, ‘L’, and ‘T’, but is much trickier to achieve with letters with rounded elements like ‘O’ or ‘P’.

type tool

2. How to Edit and Add Leaves to Your Letter

Step 1

Minimize the InDesign window briefly and open up the green leaves image in Photoshop.

Duplicate the Background layer to preserve a copy of the original image, and switch off the visibility of the original layer. 

background copy

Go to Select > Color Range and click anywhere onto the white background of the image. In the Color Range window that opens, increase the Fuzziness slider until most of the white is selected. Then click OK.

color range

Click on the Refine Edge button on the top Controls panel, and check Smart Radius. Increase the Radius and Shift Edge sliders until you’re happy with the accuracy of the selection. 

refine edge

Then click OK and hit Delete on your keyboard to delete the white area.

delete area

Step 2

Use the Lasso Tool (L) to isolate one of the leaves on the image, and then Edit > Copy the selection.

lasso tool

Create a new Photoshop document, and Edit > Paste the leaf onto this new canvas. 

Switch off the visibility of the Background layer and then File > Save As the document as a Photoshop (PSD) file. Name it ‘Leaf1.psd’.

isolated leaf

Repeat the process for each leaf, looping it off, copying and pasting it onto a new document, switching off the Background layer, and saving it as an individual Photoshop file. Name each leaf image in a sequence, e.g. ‘Leaf2.psd’, ‘Leaf3.psd’, etc.

looped off leaf
isolated leaf

Step 3

When you’ve saved all the leaves as Photoshop files, head back over to your InDesign document. 

Lock the Type layer and unlock the Leaves Inside layer above.

Use the Rectangle Frame Tool (F) to create a small frame somewhere over the top of your letter. Go to File > Place, choose one of your leaf images, and Open.

leaf psd image

With the image frame selected, go to Object > Effects > Drop Shadow. Switch the Effect Color to a pink swatch (here, I’ve added a new CMYK swatch from the Swatches panel, C=13 M=60 Y=48 K=2, beforehand, to make a good match to the pink paper background), and adjust the options in the Effects window until you have created a subtle shadow for the leaf. 

effect color

Step 4

Select the leaf’s image frame and Edit > Copy, Edit > Paste, moving it over to cover another section of the letter. 

place image

With the copy selected, go to File > Place and choose a different leaf PSD image.

placed leaf image

By adding the leaves this way, you can preserve the drop shadow settings for the image frame.

drop shadow leaf

Continue to Paste new image frames onto the page, and File > Place to replace each frame with a different leaf image. Build the leaves up across the stem and arms of the letter.

leaves inside

Step 5

Once you’ve built up a dense range of leaves across the letter, unlock the top Elements in Front layer.

Then expand the Leaves Inside layer to view all the leaf PSD images sitting on that layer. Highlight the top four or five leaves.

leaves moved in layer

Then drag these up, dropping them onto the Elements in Front layer. 

expanded layer

Step 6

Lock the Leaves Inside layer, and switch off its visibility. Keep the Elements in Front layer unlocked and active. 

elements in front

Now we want to create blocks of pink texture on this top layer, to overlap some of the edges of the leaves and create the desired peekaboo effect. 

Use the Pen Tool (P) to mark off a section of the background, running the edges along the letter’s edge. Here, I want to disguise the top edge of the leaf pictured here, so that’s my focus for this block.

pen tool

Then unlock the Background layer and double-click inside the large image frame sitting on this layer, to directly select the pink paper image. Then Edit > Copy the image. 

copy image

Lock the Background layer and go back to the shape you created on the Elements in Front layer. From the Swatches panel (Window > Color > Swatches), make sure the Fill and Stroke Color of the shape is set to [None]. 

Then select the shape and Right-Click > Paste Into, dropping the pink paper image into the shape at the same scale as the background image.

paste into
pasted paper

Step 7

Repeat the process for another section of background. 

Use the Pen Tool (P) to loop off another area on the Elements in Front layer, before Right-Clicking > Paste Into the paper texture image into the shape, and then setting the Fill and Stroke of the shape to [None].

elements in front
paste into

Keep building up shapes around the perimeter of the letter, and pasting in copies of the paper image. Do each bit in small sections, until the whole page is covered around the edge of the letter. 

elements in front

Step 8

Now you can start to experiment with moving some paper-filled shapes in front of or behind the leaf shapes sitting on this layer. 

Expand the Elements in Front layer and try setting the group of leaves in the middle of two sections of paper shapes, allowing some of the tips of the leaves to poke out. 

layer expanded

This will take a bit of experimenting, so keep checking the result as you work. 

Eventually, you’ll end up with a 3D effect like this:

effect so far

3. How to Add Depth to Your Text Effect

Step 1

Lock the Elements in Front layer and unlock the Shadow layer. 

Use the Rectangle Tool (M) to create a rectangle shape over one edge of the letter, setting the Fill Color to [Black].

shadow layer

Step 2

With the black rectangle selected, go to Object > Effects > Transparency. Set the Mode to Multiply and bring the Opacity down to 75%.

transparency

Click on Gradient Feather at the bottom of the window’s left-hand menu. Keep the settings as they are, only reversing the gradient if needed, to allow the shadow to move from more opaque closer to the edge of the letter and more transparent towards the center of the letter.

gradient feather

Step 3

Select the rectangle shape and Edit > Copy, Edit > Paste it. You might need to Right-Click > Rotate it and resize it to position it along another edge of the letter.

transform rotate
rotate shadow

Continue to paste more rectangles along the edges of your letter, rotating and resizing each to fit. 

shadow rotated

Eventually, you’ll have a shadow running along each edge of the letter, adding depth and drama to the whole effect.

shadow shape

Your Finished Text Effect

And your text effect is finished! Awesome job!

final effect

You can now incorporate your text effect into other InDesign work, or go to File > Export to create a JPG, PNG, or PDF version of your effect. 

On the lookout for more great fonts to use in your text effects? Head on over to Envato Elements to browse a huge range of awesome display typefaces.

Looking for more quick InDesign text effects? Make sure to check these out: