My favicon is a fun piece I created in Affinity. It is a vector image. I created this to play with various tools in the app. I have used Adobe InDesign, Illustrator, and Photoshop in the past; it’s been a while, though. Affinity looks very similar to InDesign and Illustrator. Certainly looks very intentional by Canva. I created the header image in Canva. I used the spiral graphic to reflect the spiral used in the favicon image.
The Creation Process
For my favicon, I used Affinity and started with an A4 document in landscape orientation. I used the pen tool to make the scribble, made the line very wide, and chose black. Then I chose the Spiral tool on the Shapes menu to create the spiral, which I changed to pink. I wanted to add my initials, so I chose the Text tool and used the Bauhaus font. I used the QuickFX tab to add the Bevel/Emboss effect. I discovered my design size was incorrect after I exported the file. I went back to Affinity, resized the image to 512×512, and exported it again.
The header was created in Canva. I checked the required header size and set the design size from the beginning. I chose a spiral black-and-white graphic. I made the graphic smaller, copied and pasted it below, then copied the two pieces, made a set of four, and copied the set of four to fill the header. One thing I really like about Canva is that when you use a graphic like that, the edges match easily, so duplication is simple.
File Types Chosen and Why
I exported each image as a JPG because it was the required image type for the favicon and the header.
Image By Dena Subhi using Affinity Image By Dena Subhi using Affinity
The images I made
For my website icon, I decided to make a simple but pretty design that could easily be tied to my website. I decided to make pink and purple flowers with my initials in the middle of the largest flower. For my header, I decided to keep a similar theme by using the flowers above my name. I decided to make these images because I thought a simple floral design would fit my website well.
How I made these images
I made both of these images with the same software, Affinity, since I found the software to be the easiest to use. I created my site icon with Vector Studio and my website header using Pixel Studio. I decided to export these files into PNGs since I felt this would give me the best quality. I used a fill tool to give the flowers a gradient effect. I also slightly changed the shape of the flower to give me a flower with five petals instead of twelve. I also used the teardrop shape to make the leaves in the header.
Vector vs Raster images
I made my site icon a vector image and my website header a raster image. Vector images use lines, equations, and curves to make their designs. Raster images use pixels and are great for creating highly detailed photos. Raster images can also become pixelated after being enlarged too much. However, vector images often maintain their quality even when they’re resized.
A site icon serves the purpose of representing a website by a simple logo. With every tab you open, a new icon is there to help you recognize the different sites. For mine, I put “DL Creations” with a smaller monogram underneath. I wanted to something that was easy to spot while also having something connected to me.
How it was Made
I used Canva to help create my designs. Canva gives different options and tools to help create images or in this case, logos for free. When making my designs, I wanted to incorporate colors from the website, so I used blues and greys primarily. First, I started with the background; to create a more vibrant, bold logo I decided to use a gradient color rather than a regular color. Next, I went into signatures to get a different font for the logo and then used a textbox for the monogram. Lastly, I wanted something that was going to centralize everything but not be generic so I used a gear cog to create a border. After that, all I had to do was download it as a PNG image to preserve the image quality and then import it into WordPress.
My File Type
For the site icon, I chose to use a vector file type as they can be altered in terms of size and not lose quality. This allows vector images to get used on multiple ways from creating multiple websites under the same domain name to creating personalized letters or business cards.
My Header
Creator: Dominic Lucas, Using Canva
The header is one of the first impressions of your site when someone visits your site. It is important to have something that captures the audience. When creating my header, I wanted to do something that brings my site together; from my tagline, my site logo, my colors, and overall, something that would be simple yet clever. So, I used my initials again but instead of just using regular text, I decided to use my tagline literal as I aligned my initials with stars and put the tagline on the moon. Something that I felt fit the overall color story of my site as well as something clever to tie everything together.
How I Made It
For my header, I also decided to use Canva. Once I determined my dimensions, I filled the background with a dark navy again, to continue the color story. Then, I used the shapes to fill the corner to resemble the moon. I added the stars to create my initials and then added my tagline in the moon. Then, I uploaded it as a PNG as I wanted to maintain the image quality then put it into WordPress.
When deciding on how to personalize my website, I wanted to connect back to some of my favorite things: the color pink and books. As such, I felt like my website header and WordPress “Favicon”, or site icon, should reflected this. Firstly, for my Favicon, I kept it simple but still me. I made a minimalistic, pink book icon, with the “title” being “La Journale D’Arianna”. The title was also simple, as I wanted to keep up with the (Americanized and dumbed down) French theme. However, I made my header more detailed. I wanted it to be borderline tacky, with a pink border, flowers, books, and bows covering the entire header. Again, in continuation with the phony French theme, I put a very corny French saying, “C’est La Vie” in the middle of the banner. I felt that since I was given such creative freedom, I wanted to take full advantage and create something that represented me.
Image by Arianna Salvador by CanvaImage by Arianna Salvador by Vectorpea
The Process And Software I Used To Create My Header And Favicon
When creating my Favicon and Header, I used Vectorpea for the former and Canva for the latter. While I planned to use Affinity to create my Vector image, my computer did not support the software. Using Vectorpea was generally easy. I primarily used the line tool to create a simple outline of a book, and used the color-picker to make the lines pink. Using Canva to make my Header was even easier. I first used the shape tool to place a pink border and a white background. I then used the Elements section to search for specific graphics for my theme and dragged into the desired place in my Header.
The File Types I Chose For These Images And Why
Lastly, the file types I used were .PNG for both the Favicon and the Header. I used .PNG for both because it produced the best quality images. My images were clear and detailed, with no pixelation.
I would like to assume, that most of you by now have heard or seen the meme, “Graphic Design is my Passion”. It was the only thing in my head throughout this entire unit. Not to show my age, but I just learned this meme originated on Tumblr around 2014…
A bit about my process
I will not lie, this was a learning curve for sure. I have a bit of past experience with Lightroom and photo editing software, but this is a completely different beast. I found that my specific template on WordPress gave me the exact size for my head and even recommended the size for my icon. For both of these I saved them as JPEG’s.
Image created in Canva by Morgan Cook
For my banner and raster image I used Canva. I actually love canva software and found this part pretty easy. I use Canva alot for posters and projects with other classes, and even in my personal life. What I like about their site is it is incredibly beginner friendly and easy to navigate once you’ve gotten the hang of it.
I usually start with a template I vaguely like and then throw my own spin on it. I thought it would be fun to show off some of my photos on this one as well.
Image created in Affinity Software by Morgan Cook
Now, the Vector software on another hand, was a different kind of evil. I used Affinity, thinking since there are videos on how to use it, surely that would be easier to understand. WRONG. I struggled and struggled with this part of the assignment. In the end, I went with something incredibly simple and sleek. I have never used a software quite like this and it took my a couple hours of playing around to figure of how to even get to this point.
I found the their shape tool was easy to use and effective. At the point I was, effective was what mattered the most.
Graphic design is important because we judge based on appearance a lot of the times. For example, when we go to a library to pick out a book, we choose the book that has a front cover illustration that catches our attention. The images and colors used for a brand is as important for it’s advertisement as the product itself. When we see the logo design for Apple it gives us a high-class, futuristic feel. When we see the logo design for Adidas, we know it’s Adidas by the black and white stripes formed as a triangle. The propose of graphic design is to create images that grab people’s attention, evoke emotion, and is memorable.
Affinity
The software I used to create my favicon and header was Affinity. After watching the videos that were inserted in the module, I learned a lot about the software and wanted to try it for myself. The platform seemed to have a variety of editing tools that would be useful for my creations. The platform was also easy to download and access with it being free of charge. Even though I had some difficulties using Affinity, it had a help tool and feature finder that was of great help throughout my process of creation.
At first I wasn’t sure what theme I wanted to go for. It was especially challenging because this was the first time I used Affinity and didn’t fully know how to navigate the tools. I honestly just went in and did some experimenting with the tools then decided it was way easier dealing with the shapes than the pencil, pen or paint tool. For a beginner, I think that was the best option for me.
Favicon
For my favicon, I decided on a dreamy-like theme. It was pretty different from my site’s theme before which was more of a calm, mysterious-like theme. The reason I decided to have this type of theme for my favicon was because in my website, I showcase my thoughts, ideas, and creations which is from my imagination. I relate imagination with dreams because both rely on the brain’s power to produce images, stories, and thoughts. I started out with two hearts and decided to add clouds over them and a crescent moon on the side. This made it look dreamy and magical at the same time. Afterwards, I still felt like something was missing, so I finally decided to add a big sparkle on one of the hearts to give it more detail.
Header Image
Making my header image took way longer because I was initially trying to use different tools. I started out using the pencil tool to create mountains because I wanted to make something more artsy. However, it ended up not looking good. I started to accept that as a beginner, I should stick to something easier so that my website doesn’t end up looking messed up. I then decided to use different shapes like the spiral shape for my image because I wanted my header to look interesting and a little unique. When I finished and edited it on my website front page, I realized that my image looked too different from my favicon and lacked visual harmony. I hated how it looked so I decided to delete it and create a header image that looked more similar to my favicon so the theme would be cohesive. Even though I stuck to shapes, I still used new features I didn’t use before for my favicon like the knife tool. I used that tool to help create the crown. I also used the frame text tool to type, “Welcome to Mariam’s Blog Page” in the center.
Process
Like I stated before, I only used shapes to create my images. However, I used other tools and techniques in Affinity to get my end results. For the favicon, I changed the sizes of the shapes and used the “arrange” tool to put some shapes behind or in front of each other. For the crescent moon, the app gave me the ability to edit the curves on the moon so I took advantage of that to make the moon look the way I wanted it to look. For the sparkle, I used two diamonds, narrowed them, changed the lengths, rotated one and put it on top of the other one. I used the same technique for the sparkles for my header image. And of course I used the color feature to choose the colors of my shapes. I used two tools on my header image that I didn’t use on my favicon: the knife tool and the frame text tool. I used the knife tool to cut a star in half then deleted the bottom part of it and added two triangles to it to create a crown. The frame text tool was used to put “Welcome to Mariam’s Blog Page” and I also changed the font. I ended up transferring both the images into PNG because it just turned out looking better that way. When I tried JPEG it looked a little blurry to me. When making sure the images came out clear and the right size, I just experimented with the pixels. In the end, my favicon was 512px x 512px and my header image was 1200px x 1200px.
Conclusion
This assignment definitely showed me how hard and time consuming digital creation can be. Finding the best platform and also navigating it for the first time was challenging. Throughout the creation, I had to keep in mind of my website’s appearance and how it would be perceived by others. My goal was to make my website look nice and become memorable, not only for my posts, but for the design as well. Experiencing graphic design taught me the importance of images, colors, sizes, and pixels and how that can really effect how something is perceived.
A site icon (favicon) is one that represents my own identity and is a small image or icon that represents a website. For my own site icon, I chose to create a plus sign and put in my first initial (X). I chose that because to me, it was a simple way to represent my website. I colored them green and blue because they’re my favorite colors, and I added a moon to the X’s and the middle since I’m prefer darkness over sunshine. A header is the first thing that someone should see when they open a webpage and should appeal to them. For my own header, I put in my full name (Xavier Opare-Kumi). The reason for that is because I wanted to do a creative styling by making the font into a comic book style.
Created by Xavier Opare-Kumi on Affinity.Created by Xavier Opare-Kumi on Affinity.
How They Were Made
I created the favicon image using Affinity, which is a vector design software. I used shape tools like rectangles to create the shapes, colored in the shapes using the Fill and Stroke settings, and positioned the objects using the mouse in order to make them into the shapes they are now. When I was done, I exported the design as a PNG file.
For the header, I also created it using Affinity. I changed the dimensions since it was wider. I filled the page using a rectangular shape, decided on the colors by using the Fill and Stroke settings, typed in my full name, stylized the name into Comic Sans, and colored in the name. Like the favicon image, I exported the design as a PNG file.
A site icon is a small image or icon that represents a website. It’s the small box to the right you see in places like browser tabs or bookmarks. It’s similar to a trademark and is different for everyone. For my site icon, I chose to use my initials (EM). I wanted to keep it simple and still have it tie into my browser handle.
How I Made It
I used Affinity to create my icon. It is an app that helps you to create all kinds of images or logos for free. I decided before making my site icon, I decided that I wanted to use pink. I started by choosing my dimensions, then using the rectangular tool, I filled in my square with pink. I then used the text box tool to add my lettering and decided to use white lettering to help contrast the pink, making it easier for viewers. All I had to do after that was export and upload my image here on WordPress.
Vector Image
For my site icon, I chose a vector file type. I did this because vector graphics are ideal for site icons; you can resize them as much as you like without losing image quality. Because of this, once you make one icon, you can use it on so many different web pages or for other uses, like business cards.
A header is one of the first things someone sees when they open your webpage. It should be inviting and appealing. For my header, I wanted it to tie into both my handle and site icon I already created. I didn’t want to do anything too crazy and chose to keep it simple. I went with my name, and to keep it in theme, I used similar colors to my site icon.
How I Made It
I also used Affinity to create my header. I started by choosing my dimensions, but this time I was going for a more rectangular shape. Once I had that, I used the rectangle tool to fill in my rectangle with a similar shade of pink to my site icon. I then used the text box to add my name. I also chose white for my name to stay on theme. After that, all I had to do was export the image and upload it here to WordPress.
Raster Image
For my header, I chose a raster image because I wanted it to function more like a digital photo. Raster graphics are special because they are made up of individual pixels that come together to make one image. The only downside to this is that the more you enlarge an image, the more you start to see these pixels. Despite this, I preferred raster graphics for my header because it is so similar to a digital photo.
These images are built on some of my favorite things. Firstly, the key part of my logo is the deep, dark red heart with the spiked ends coming out of it diagonally. My favorite shape is the heart because it represents love and life, while the spikes coming from it represent defenses. Then, there are the crescent moons that represent eyes and are capable of carrying emotion. The speech bubble shows the power of speech and contains the name of my online persona, Glar5. The tear drops and spirals were fun little shapes that I wanted to include and the “3” used for the mouth is my favorite emoticon. I decided on the combination of all of these because these shapes have meaning to me, and together they become part of a bigger picture.
Behind the Scenes: Software and Processes
The software I used was Affinity, which was created by Canva. It was a really simple, easy to learn application that allowed me to create my entire logo and header in one place. Specifically, I used the shape tools to make the base of my idea. Then, I used the color tool to find the perfect colors for each shape. The text tool allowed me to add my name, Glar5. Further, I was able to use the grouping tool to combine all of the heart’s details for easy copy and pasting. Lastly, the tool that definitely brought it together the most, was the measuring tools to ensure that everything was lined up properly.
What File Types and Why?
For my file types, I chose PNG for my logo and WebP for my banner/heading. My logo is a PNG file because it is best suited for logos or icons, which is my primarily application for it. I want to use it as a branding, therefore the best choice was PNG. As for my banner, I used WebP because it is optimized to support higher loading speeds. This will help my website load faster which keeps users staying on the page longer since they aren’t waiting a while.
My favicon is a simple icon that represents my website and interests. Because I am involved in sports and soccer, I chose a design that incorporates a soccer-related graphic. A favicon needs to be recognizable even when displayed at a very small size in a browser tab, so I kept the design simple and clean. For my header image it is a soccer themed graphic that includes a soccer ball, goal, grass, sun, and clouds. I made this design because it immediately communicates the sports theme of my website. The image connects to my personal interests and provides visitors with a clear visual representation of the site’s content.
Creator by Jack Sturman, using Affinity DesignerCreator by Jack Sturman, using Affinity Designer
Process and Software used to Make Images
I created the favicon image using Affinity Designer, which is vector design software. I used shape tools to create the basic design elements, adjusted colors using the Fill and Stroke settings, and aligned the objects using the software’s positioning tools. Because vector graphics are made from mathematical paths, the image remained sharp while I edited and resized it. The original file was created as a vector graphic. Since WordPress does not accept vector files such as SVG for site icons, I exported the final design as a PNG file. PNG preserves image quality and supports transparency, making it a good choice for a favicon.
Now for my raster image used as my header I also created the header image using Affinity Designer. I used several tools within the software to build the image. I used the shape Tools to create the soccer ball, goal, sun, and clouds. Then I used the fill tool to apply colors to different objects. Next was the gradient tool to create the blue-sky background. After that I used the layers Panel to organize the design elements. Finally, I used the drawing and brush tools to add grass details and additional visual elements.Once the design was complete, I exported it as a PNG image and uploaded it to WordPress as my site’s header image. I exported the header image as a PNG file because PNG files maintain image quality and display simple graphics clearly. This file format works well for web graphics containing solid colors, text, and illustrations.
