journey through web development

Category: projects (Page 1 of 2)

katvonwiesendorf.com redesign

Hey folks! Long time no see, eh? I have a perfectly good explanation for this dead season here on the blog though. Between work, uni assignments and keeping a 4 year old alive and content, I had barely time to breath.

Anyway, it’s been 5 years since I have created a custom theme for my little photography venture, katvonwiesendorf.com.
It became a bit dated, and I have gained so much more knowledge in the past few years, so I thought I will redesign and redevelop a brand new theme for this website. I also do not post there as often as I did, but don’t have a heart to delete it as it’s still a big part me, therefore I’m planning on changing the purpose of it from a blog, to more of a portfolio site, where anyone can cherish the beautiful memories immortalised in a photograph.

Before

Here are some screenshots of how the website is looking at the moment:

The design is minimal and most elements are working nicely, although under the hood doesn’t look good at all πŸ˜‚ I’ve made it with no prior knowledge on WordPress, so you gotta forgive me that haha.
Saying that, I have learned so much in the past year, I would say it is necessary to amend my past mistakes and create a shiny new theme that would actually show my present abilities.

The Design

The new design has been created in Figma. I got used to be handed a ready made design to develop, so the task of designing everything on my own was a nice way to let the creative juices flow.
I still like the original header, so I have decided to keep it. As mentioned before, the new KVW is more of a portfolio, therefore the blog section and everything that comes with it (archive etc) had to go. In it’s place- a carousel slider with a good selection of shots from all of the categories. Call to action button and a short info about… me πŸ˜€
I use tailwind and tailwindUI components at work all the time (ok, most of the time) and they are so good I could not not add a bit of tailwindUI magic here too πŸ™Š


Design ready, now it’s time to develop! Stay tuned! πŸ”œ

Liked this post? Share:

Give me gif, Slack – case study

The aim of this case study has focused on creating a contemporary design concept that would solve the issue of poor accessibility to gifs on Slack.

Emoji and animated messages have become a part of our writing culture. Sceptics might have thought that it is a step backwards in evolution (back to the time when people use hieroglyphs, perhaps?), but there are a lot of positives about this change. Using emoji can lighten the overall mood of the text, is understood across different languages and adds the ability to quickly express thoughts or emotions. According to Contactually, “your brain processes what it’s seeing on video 60,000 times faster than it processes text.” Sending a gif or a meme can also help improve communication between co-workers and is a great way to tighten the relationships.

“Emojis have become a cultural phenomenon, shaping the way we express ideas and emotions across languages, friends, and generations.” 

Dan Rhatigan

Overview

Let’s start by shining a bit of light on Slack itself. It is a channel-based messaging platform. Create a group or accept an invitation to an existing one, and then send messages, share files, call and connect other apps (e.g Github or DropBox). Mostly used in workplaces to communicate within a team. At the agency I work for, we have one general channel and one for every project we work on. This set up helps us work as a team, whether we are based in the office, working from home or from a different city.
The current situation around the world and increased remote working make platforms like this even more important than ever, enabling communication with other members of the team.

slack desktop window
https://uk.pcmag.com/productivity-2/40141/slack

The challenge

As mentioned in the introduction, short, animated videos have become extremely popular and widely used to quickly express our thoughts and ideas. Instead of writing a long, wordy message that would perfectly describe our feelings, we can send a meme that does just that.
Using gifs and memes on Slack is possible, but extremely time-consuming and not user-friendly at all. Let’s have a look at how to add a gif to a conversation on Slack at the moment:

gifs on slack at the moment screen cast
  1. Click on the lightning icon
  2. Look for Giphy and click the link
  3. Type a word to look for meme
  4. SHUFFLE one gif at a time to find that perfect one

The issue that arises here is when you shuffle too much by mistake. You will have to spend some extra time shuffling and praying for a gif you wanted to reappear again. If you have a slow internet connection, it will elongate the search time too, as, after every shuffle, you have to wait for a gif to load.
No straight-away access to gifs also creates an issue, when the user doesn’t know how to describe the gif he/she has in mind.

Estimated time to find your meme: WAY TO LONG.

Gifs on other platforms

Facebook, WhatsApp or Twitter are only the few that have a messaging feature. All mentioned above have a gif button directly on the message tab, allowing users to quickly browse for a perfect animated message to add to the conversation. General styling and the number of extra features, like a search bar, favourite button, or grouping by a category varies throughout, but the ability to pain-free access to wanted content is present.

facebook gif
whatapp gif
twitter gif

Estimated time to find what you are looking for: approx. 10-30 seconds.

Scope and constraints

The idea that would solve the issue of poor accessibility to gifs on Slack needs to seamlessly fit into the current design of the application. The key constrain is performance. The enhancement should not lower it.
Slack is available for desktop and as a mobile app, therefore the concept needs to take into consideration both window sizes, with the focus on different users’ needs on each.

The solution

The analysis of the current design and how similar platforms are dealing with the issue have clarified, that the solution for observed time consuming and stressful access to gifs and memes should be an enhancement of the current system with a Gif button.
So many applications are using this method for quick, easy access to gifs, and reusing that familiar design is, in my opinion, the way to go.

In design, by making things that behave in a certain way appear as expected, we help our users make the most of their cognitive cache. 
In other words, we don’t make them think.”


Jason Grigsby,  Progressive web apps

The benefits of adding the gif button directly to the message window are enormous. Increased user experience will be visible on multiple spectrums:

  • access to multiple gifs at the same time to allow comparison
  • ability to browse different categories via the search bar
  • shortened time spent on searching
  • gifs visible without typing anything
  • no issue with losing the perfect meme

Design enhancement process

The process of designing the enhancement mentioned above have started from the brainstorming phase. This step is crucial to explore possible options, get inspired, and quickly iterate through different ideas.


Deliverables from this phase are rough sketches of the concept:

desktop window sketches
Desktop window sketches
mobile window sketches
Mobile window sketches

Next, the Slack window has been created in Figma. The overlay technique has been used to ensure the right measurements and spacing of the components.

slack window
Slack window. Image used as a guide from: https://slack.com/intl/en-gb/help/articles/360043092173-The-Slack-experience-for-desktop

Gif button component has been created in the style matching other buttons on the message tab.

gif button design
Gif button design

Gif button was then added onto a base layout, keeping in mind the spacing between the other elements.

base desktop layout enhanced with a gif button
Base layout enhanced with a Gif button

Lastly, the design of the open gif bar has been created for both desktop and mobile windows.

base desktop layout with an open gif bar
Base layout with an open Gif bar
base mobile layout
Base mobile layout
base mobile layout with open gif bar
Base mobile layout with open gif bar

Deliverables from this phase are desktop and mobile designs featuring a gif button.
Click the link below to view the Figma file β¬‡οΈŽ

Results

Completed designs have been enhanced with animated interactions to showcase the envisioned idea. Below, you can click on the Gif button to open up the gif bar or click on the link at the bottom to navigate to the Figma file.

Conclusions

The finished product is an enhancement of the current design, solving the problem of poor accessibility to gifs on Slack. User experience has been improved by introducing quick and easy access to gifs straight from the message tab.


Positive outcomes:
β†’ Users can now see and scroll through multiple gifs, even without typing a phrase to search for.
β†’ Functionality similar to those found in other messaging platforms means less time spent by a user figuring out how the new feature works.
β†’ The issue of losing the perfect gif or meme have been eliminated.
β†’ Time spent searching for a gif has been dramatically reduced.


Do you use Slack?

What do you think of my idea to enhance the current design and functionality of Slack with a Gif button? Let me know in the comments! πŸ‘‡

Liked this post? Share:

Create a simple toggle switch in React

Dark themes have become really popular in the recent years, and a lot of websites have given their users the ability to choose between light and dark mode. This personalisation also increases accessibility, as some people struggle to read black letters on white background, and prefer to switch to light letters on a dark background.
Toggle switch is, in my opinion, the best way to incorporate light/dark mode feature. Today I’m gonna show you how to create a simple, yet effective toggle switch.

The first thing we need is a design of your toggle.
I’ve made mine using Figma. The sun and moon icons are from Iconify plugin, and gradients were made with uiGradients plugin. When you’re happy with your design, save your file and export the icons (if your have them of course, as they are not mandatory).

Now open the editor of your choice, I’m using Visual Studio Code on my personal computer. Open the folder in which you would like your project directory be. Then, open the terminal and type:

npx create-react-app toggle 
# toggle is the name of your project

when your react app is created, go to your project’s directory using:

cd toggle 
#again, toggle is the name of your project

the last step before we can start our application is starting the server:

npm start

Your project should now open up in your browser, and you should see generic React app page.

We will be using styled-components, so we need to install it in our project. Open a new terminal window and type:

npm install-s styled-components

Ok, so let’s have a look at our project’s folders. We have node_modules, public, src, .gitignore, package-lock.json, package.json and README.md. In the src folder, if your have any icons, create a folder for your assets and them here. Create a folder callled components, in which add a new file: toggle.js

Now, open App.js file and delete everything from inside the div className=”App”. This was what you saw in the generic React page in your browser. We won’t be needing in. Ok, now we need to import our component. At the top of the file, type:

import ToggleComponent from './components/toggle';

Now we can add this component inside the div, and this is how our App.js file should look like now:

import './App.css';
import ToggleComponent from './components/toggle';
function App() {
  return (
    <div className="App">
        <ToggleComponent />
    </div>
  );
}
export default App;

Save and then open toggle.js file. At the top of the document, import React, useState, useEffect and also styled (our styled-components) and keyframes for animations.

import React, { useState , useEffect} from "react";
import styled, { keyframes } from 'styled-components';

To help us out later on, let’s create few const’s that will keep some of our values:

const time = '0.1s';
const lightBackground = 'linear-gradient(90deg, #EAC29C 0%, #EDE8CF 100%)';
const darkBackground = 'linear-gradient(90deg, #46517F 0%, #8DA5B4 100%)';
const setAnimation = (from, to) => keyframes({from: from, to: to});

Components can have one default function, and many regular ones. Let’s create our default one, which will be exported so we can use it in App.js

function ToggleComponent() {
 
    return (
        <OuterWrapper>
            <StyledWrapper>
                <Header>
                    Toggle Switch
                </Header>
                <Toggle />
            </StyledWrapper>
        </OuterWrapper>
      
)}
export default ToggleComponent;

Inside the return braces we will code our component, just like you would code in HTML, but with a twist of styled components.
Styled components let you write CSS inside the .js file, so you don’t have to go back and forth between files and those styled will only apply for that specific component.

To create a styled component, above the function type:

const OuterWrapper = styled.div`
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: ${lightBackground};
    animation: ${time} ${({ showBackground }) => showBackground && setAnimation({ background: 
    lightBackground }, { background: darkBackground })} linear;
    animation-fill-mode: forwards;
`;

this is my styled div named OuterWrapper. You can see, inside is just a regular CSS values. Ok let’s create const’s for all divs, h1 and span. All the changes will be showing in your browser straight away, so don’t be afraid to use Inspect tab and play around with different values!

const OuterWrapper = styled.div`
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: ${lightBackground};
    animation: ${time} ${({ showBackground }) => showBackground && setAnimation({ background: 
    lightBackground }, { background: darkBackground })} linear;
    animation-fill-mode: forwards;
`;
const StyledWrapper = styled.div`
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 50vh;
    margin:0 auto;
    z-index: 10000;
`;
const Header = styled.h1`
    color: #333333;
    animation: ${time} ${({ showLightfont }) => showLightfont && setAnimation({ color: 
    '#333333' }, { color: '#ffffff' })} linear;
    animation-fill-mode: forwards;
    position: relative;
    font-size: 40px;
    font-family: 'Raleway Dots', cursive;
    display: flex;
    align-items: center;
    margin-bottom:40px;
`;
const StyledToggle = styled.div`
   border-radius: 50px;
   background:  linear-gradient(90deg, #FFA751 0%, #FFE259 100%);
   animation: ${time}  ${({dark}) => dark && setAnimation({background: lightBackground}, 
   {background: darkBackground})} linear;
   animation-fill-mode: forwards;
   height: 32px;
   width: 58px;
   display:flex;
   position: relative;
   align-self: center;
   z-index:100;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px 
   rgba(0, 0, 0, 0.04);
`;
const StyledSwitch = styled.span`
   background: #ffffff url('./assets/smiley-sun.svg') no-repeat center;
   z-index: 101;
   width:28px;
   height: 26px;
   border-radius: 50px;
   display:flex;
   justify-content:center;
   align-self: center;
   margin-left: 3px;
   margin-top:0.5px;
   z-index: 10000;
   animation: ${time}  ${({dark}) => dark && setAnimation({marginLeft: '3px', background: 
   '#ffffff url(\'./assets/smiley-sun.svg\') no-repeat center'}, {marginLeft: '26px', 
   background: '#ffffff url(\'./assets/smiley-moon.svg\') no-repeat center'})} linear;
   cursor: pointer;
   animation-fi

Ok let’s create a Toggle component function! Having it separate from the default function, we will be able to use our toggle anywhere else in the app, and have multiple different toggles. DRY coding! (don’t repeat yourself)

const Toggle = (props) => {
    const [dark, setDark] = useState(false);
    const {onDark, onNotDark} = props;
    useEffect(() => {
        if (!dark) {
            onNotDark();
            return;
        }
        onDark();
    }, [dark])
    const handleClick = () => {
        setDark(!dark)
    }; 
    return (
        <StyledToggle dark={dark}>
            <StyledSwitch dark={dark} onClick={handleClick} />
        </StyledToggle>
    )};

In our toggle, we are using states for light and dark setting. We have also added an onClick event to the StyledSwitch span.

We need to remember that any change of state can only go down from a parent to the child element. A child component cannot be responsible for those (because kids aren’t responsible, right? πŸ˜‚) To make our toggle work, we need to give a parent (our default ToggleComponent) some responsibility.

function ToggleComponent() {
    const [showBackground, setShowBackground] = useState(false);
    const [showLightfont, setShowLightfont] = useState(false);
    const handleNotDark = () => setShowBackground(false) & setShowLightfont(false);
    const handleDark = () => setShowBackground(true) & setShowLightfont(true);
    
    return (
        <OuterWrapper showBackground={showBackground}>
            <StyledWrapper>
                <Header showLightfont= {showLightfont}>
                    Toggle Switch
                </Header>
                        <Toggle onNotDark= {handleNotDark} onDark= {handleDark} />
            </StyledWrapper>
        </OuterWrapper>
);
}

This is how our parent looks like now.

import React, { useState , useEffect} from "react";
import styled, { keyframes } from 'styled-components';
const time = '0.1s';
const lightBackground = 'linear-gradient(90deg, #EAC29C 0%, #EDE8CF 100%)';
const darkBackground = 'linear-gradient(90deg, #46517F 0%, #8DA5B4 100%)';
const setAnimation = (from, to) => keyframes({from: from, to: to});
const OuterWrapper = styled.div`
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: ${lightBackground};
    animation: ${time} ${({ showBackground }) => showBackground && setAnimation({ background: 
    lightBackground }, { background: darkBackground })} linear;
    animation-fill-mode: forwards;
`;
const StyledWrapper = styled.div`
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 50vh;
    margin:0 auto;
    z-index: 10000;
`;
const Header = styled.h1`
    color: #333333;
    animation: ${time} ${({ showLightfont }) => showLightfont && setAnimation({ color: 
    '#333333' }, { color: '#ffffff' })} linear;
    animation-fill-mode: forwards;
    position: relative;
    font-size: 40px;
    font-family: 'Raleway Dots', cursive;
    display: flex;
    align-items: center;
    margin-bottom:40px;
`;
const StyledToggle = styled.div`
   border-radius: 50px;
   background:  linear-gradient(90deg, #FFA751 0%, #FFE259 100%);
   animation: ${time}  ${({dark}) => dark && setAnimation({background: lightBackground}, 
   {background: darkBackground})} linear;
   animation-fill-mode: forwards;
   height: 32px;
   width: 58px;
   display:flex;
   position: relative;
   align-self: center;
   z-index:100;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px 
   rgba(0, 0, 0, 0.04);
`;
const StyledSwitch = styled.span`
   background: #ffffff url('./assets/smiley-sun.svg') no-repeat center;
   z-index: 101;
   width:28px;
   height: 26px;
   border-radius: 50px;
   display:flex;
   justify-content:center;
   align-self: center;
   margin-left: 3px;
   margin-top:0.5px;
   z-index: 10000;
   animation: ${time}  ${({dark}) => dark && setAnimation({marginLeft: '3px', background: 
   '#ffffff url(\'./assets/smiley-sun.svg\') no-repeat center'}, {marginLeft: '26px', 
   background: '#ffffff url(\'./assets/smiley-moon.svg\') no-repeat center'})} linear;
   cursor: pointer;
   animation-fill-mode: forwards;
`;
const Toggle = (props) => {
    const [dark, setDark] = useState(false);
    const {onDark, onNotDark} = props;
    useEffect(() => {
        if (!dark) {
            onNotDark();
            return;
        }
        onDark();
    }, [dark])
    const handleClick = () => {
        setDark(!dark)
    }; 
    return (<StyledToggle dark={dark}>
        <StyledSwitch dark={dark} onClick={handleClick}></StyledSwitch>
    </StyledToggle>
    )};
function ToggleComponent() {
    const [showBackground, setShowBackground] = useState(false);
    const [showLightfont, setShowLightfont] = useState(false);
    const handleNotDark = () => setShowBackground(false) & setShowLightfont(false);
    const handleDark = () => setShowBackground(true) & setShowLightfont(true);
    
    return (
        <OuterWrapper showBackground={showBackground}>
            <StyledWrapper>
                <Header showLightfont= {showLightfont}>
                    Toggle Switch
                </Header>
                        <Toggle onNotDark= {handleNotDark} onDark= {handleDark} />
            </StyledWrapper>
        </OuterWrapper>
);
}
export default ToggleComponent;

And that is our complete component file. If your would like a nice fonts, either import the font into your project, or add a link into the head of index.html file.

OK time to deploy your project and publish it! Github pages will be the best option for our needs today.
Commit your work, then go into your github account and create a new empty repository. Follow the steps to add existing repository:

git remote add origin https://github.com/your-username/name-of-your-project.git
git branch -M main
git push -u origin main

Now we need to install gh-pages package. In your terminal, type:

npm install gh-pages --save-dev

In package.json file, add:

"homepage" : "http://katwlodarczyk.github.io/toggle-switch-react" 
#add this after name of the project. this is your github pages url

and lastly, we need to add some new scripts:

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

Ok. let’s deploy! In the terminal, type:

npm run deploy

Wait and…. viola!

You can see my finished project here:

https://katwlodarczyk.github.io/toggle-switch-react/

GitHub repository to see the whole code:

https://github.com/katwlodarczyk/toggle-switch-react

Toggle switch project on Behance:

https://www.behance.net/gallery/108743485/Toggle-switch


If you’ve done your very own awesome toggle, share the link with me!

Liked this post? Share:

Raspberry Pi scroll bot- soldering, building, coding

Although I am a frontend developer with all my heart, I was always fascinated by how to build robots or wearable technology.

I haven’t done anything about it until I’ve seen a post on Twitter about some guy who has built a little display unit to show his family whether he has a meeting or is free to bother (anyone WFH and with kids out of school will understand the need for stuff like this :D) Anyway, the display looked really cool, I retweeted, and my good friend sent me a link to a Raspberry Pi shop (PiHut) and encouraged me to buy something and start building.

I needed something relatively simple for my first project, so products from Kits/Bundles tab seemed perfect.
I decided on this little scroll bot:

The package came super-quick, within 24 hrs.

Beware, this is a soldering project (😱 ), but you can also buy no-solder hammer headers to complete it.
My friend Jack has a soldering iron, which he kindly agreed to lend me. (Thank you!)
I have never soldered before, and it’s been nerve-racking activity, but after a quick youtube tutorial, I managed to solder both raspberry pi zero and scroll phat hd boards. (spoiler-alert! I have not messed up this step and everything works perfectly! So if I could do that, there is a high chance that you can do it too!)

The next step was to build the orange robot frame, and here I have followed the original assembly instructions, which you can access via this link.

My robot was complete, but with the end of instructions, ended my knowledge on what to do next πŸ˜‚
Do not worry though, as every programmer’s best friend aka Google helped me out. I plugged in HDMI cable into a mini-HDMI connector (included in the bundle) and onto my Raspberry Pi Zero board. I plugged in a USB for the wireless keyboard and mouse ( there is only one USB port, thankfully my keyboard and mouse set use the same USB, but if you have separate ones, you will need a USB hub to connect both to the Pi). Lastly, I inserted a micro SD card and plugged the whole thing to power.

The result…..nothing happened! 😱

I googled some more and realised I slotted an empty SD card, so of course, nothing could have happened. I tried adding a raspbian image downloaded from the internet straight onto the card, but it didn’t work for me. Raspberry Imager came to the rescue. This utility downloads the right file for you, and it’s really straightforward. I recommend this way if you are not entirely sure what you’re doing.

I tried again, the LED light on Pi Zero went on, and I saw a lovely Raspberry logo on the monitor. Victory! πŸ†

The first step was to install the scroll phat hd python library. For this step and few of my first coding tests, I followed this tutorial from Pimoroni website (CLICK HERE for tutorial)

At that point, I still had no idea whether my scroll phat hd board works, so when I tried one of the examples (downloaded with the library) and my robot came alive, I was really proud of myself and my soldering skills (haha).
The first little projects I did were a simple clock and displaying different strings, both static and scrolled ones.

For example, to code the clock you can see in the picture above, simple type:

As this post turned out quite lengthy, I will go in-depth about the final project for my little scroll bot later this month.
Let me know if you have ever done anything with Raspberry Pi, or maybe if you would like to in the future!

*Featured Photo by Harrison Broadbent on Unsplash

Liked this post? Share:

How to create a digital portrait in adobe illustrator

A few days ago, while I needed a little break from my database assignment, I created this digital portrait of my daughter, Hannah.

Everyone seemed to really like it, so I decided to share my knowledge and create a tutorial on how to do those cool portraits using any photograph.

All you need is Adobe Illustrator and a photograph! No skills required and it’s really easy to do!

Watch a video tutorial or follow my written instructions below!

How to create a digital portrait using Adobe Illustrator:

  1. Choose a photograph you would like to use for this project. It can be literally anything you want! I chose this cute photograph of Hannah-ballerina:
  2. Open Adobe Illustrator, click a New File and choose the size of your canvas. For this project I chose A4, but you can choose a different size.
  3. Click the Window tab and then select Layers. This step is really important as layers are crucial!
  4. Click File tab and Place, to place a chosen photograph onto Layer 1. Next, place the image on the canvas.
  5. Lock the Layer 1, add a new layer, zoom in onto the face (or any other part you want to start with) so you can see the area better, and using the Pen tool, start outlining the shape of the face.

    Remember to change the size and style of the brush! I like to outline the skin with the smallest brush size (0.25) and hair and clothes with a slightly bigger one (0.5) Play with different brush styles and choose the one you like the most.

  6. Β 
  7. Name a layer accordingly, and lock the layer using the lock icon in the layers tab.
  8. Add another layer and outline the left ear. Name a layer and then click the down arrow to open this layer, and lock the one inside (not the whole layer)
  9. Outline the shadows inside the ear outline. Lock the whole layer and outline the other areas following the same rules.
    One area= one layer. Lock layers when you finish them.
    For this photograph, I have layers for: face, left ear, right ear, hair, neck, top of the dress, tutu skirt, left hand, right hand, and legs.
  10. When you finish outlining, you can unclick the eye icon next to the Layer 1 (with the original photograph) to see how you’re doing.
  11. You’re halfway there!
  12. Ok now click the eye icon on Layer 1 again to bring back the original photo, if you would like to use color from it. If you choose to have custom colors, this step is not necessary.
  13. Unlock the first layer (in my case, it’s a face layer) and using the Eyedropper tool, select the color of your liking from the original image. Then select the outline of the face layer and click on the color swatch you just chose.
  14. Lock the layer again and fill in other skin areas, like ears(just the main outline), neck and hands.
  15. Unlock the ears layer, and select the inside outlines, color them with the same color and then double-click on the color swatch (big color square in the left side menu) and select a darker shade. Fill with the same color other inside ear’s outlines.
  16. You may want to take the stroke of the outlines out if you wish (in the right-hand side menu).
  17. Color other layers the same way.
  18. Now create a new layer for the background. Place it on the bottom of the layers (so it’s in the back of your portrait) Using the rectangle tool, select the area of your canvas and fill with the color of your liking.
  19. Add another layer, place it on top of the background layer, and using the Curvature Tool, draw a “blob” around your portrait. It doesn’t have to be perfect so play with it πŸ™‚ Again, fill with any color you like.
  20. Add a new layer and using the Text tool, add a text. I like to separate lines of text to have more control over the alignment of the lines. Choose your font and the size of the text.
  21. Voila! You have just created a digital portrait!

I would love to see your creations, so please tag me on Twitter @kat_wlodarczyk and use the #katstutorials
so I can see them! You can also comment or email me!
I hope you liked this tutorial!
✌️

Liked this post? Share:
« Older posts

© 2021 KAT CODES

Theme by Anders NorenUp ↑