Tag: Blog Post

Here I discuss how I learned to create different types of images and applied them to my page.

Creating a Favicon

I set out to create a unique site icon know as a “favicon”, its a small symbol that is seen next to the name of the website on the tabs of your browser. I created the image above with the Affinity graphic design software. It took some time to learn, but it functions similarly to most Microsoft programs. If you have used PowerPoint or any other program that allows you to crop, edit, or draw over an image, you’ll be familiar. Before I started to draw anything I created a new square canvas with an aspect ration of 1:1. I chose the 1000-pixel grid and manually adjusted the page height and width to 512px X 512px, this is important or it wont work as a favicon. To make the shape of the radish I used the “Heart Tool” to drag and manipulate the heart until it resembled the classic elongated carrot/radish shape. I used the “Path Brush Tool” to draw on the horizontal accent lines and adjusting the width and color of the stroke. Once the lines were drawn, I used the “Stroke Width Tool” to create the uneven taper for the lines. For the sprouts, I used the Path Brush tool again but this time I only drew a few lines at the top of the sprout. It didn’t look like a leaf until I used the “Blend Tool” to replicate and connect the lines to form the leafy sprouts. When I was finished, I exported the image as a .png file, since this is the recommended file type for a favicon. The software that I used can be downloaded for free here: Affinity Download page.

Header Image

This turned out to be more difficult than I thought it would be, in fact I had to use my “phone a friend” life line. Finding and altering the image was easy enough, I found it on flickr then uploaded it to Canva digital design webpage and applied a filter to increase the color contrast. Now comes the part that tripped me up, editing and creating a custom theme that allows for a banner photo. Once you have entered the editing portion of your WordPress page, on the tool bar on the left of the screen select appearance and then themes. If you have an active theme already, select customize at the bottom of the page. You will be brought to a page that allows you to make edits to your current page, a new set of options will appear on the left, select patterns. It will display a bunch of premade patters (most you have to pay for) but on the left there is a section for headers, that will present you a few options. Pick one that has a header image already. It will open a new editing page, click on the image, then the top tool bar select replace to either upload or open from your media library. I made sure to save my image as a .jpg as WordPress recommends. Now your photo should be in the banner, you can adjust the image focus and width of the header from there. Once saved, check to make sure that this header is displayed throughout your whole page.

For this project, I created two different images for my website using Affinity. The first image was a favicon, and the second image was a header image. For my favicon, I created a blue circle with my initials, FR, and a sine wave. I got inspiration from NASA because I like its simple science and space style. I made my own design in Affinity using the ellipse tool, text tool, and curve tool. I used blue, white, and black so the logo would be easy to see, even when it is small. For my second image, I created a header for my website. I made it by layering different shapes and graphics together in Affinity. I used blue waves, an atom, a coordinate sphere, mountains, and a sunset background because they connect to physics, science, and technology. I also adjusted the size and placement of each layer so the image would fit the header area correctly. I used PNG for the final images because it keeps the graphics clear and works well for websites. PNG also supports transparency, which was useful for my favicon because I did not want a white box around the logo. One difference I noticed between vector and raster images is that vector images are made from shapes and paths, so they can be resized without losing quality. Raster images are made from pixels, so their resolution matters more and they can become blurry if they are enlarged too much. This project helped me understand why choosing the correct image type, size, and format is important for web design.

Favicon

Header Image

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.

Affinity

Images Created

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.

Choices

After reading the requirements for module 6 (no AI-generated images, no stock images, no unedited photos), I decided to create my own digital “artwork” to play things on the safe side. I am by no means an artist so my results aren’t the prettiest– but they get the job done! I plan on revamping them or even replacing them with my own edited photos in the future. I tried to focus on geometric elements within my art, complimenting cool colors, and making text stand out when it needed to– like in my website’s Favicon. Below are the images I created.

The Process

The process for making the Favicon on Affinity involved using the Artistic Text tool to find a font for the initials, as well as further manipulations within the Quick FX tab to outline/adjust the transparency of the letters. The line in the middle was made using the pencil tool and hand drawing it with one of the acrylic path brushes. The semicircles were made using the segment tool– and again, they were outlined/colored/adjusted accordingly within the Quick FX tab. The semicircles were moved to the bottom layers of the canvas to have them behind the FW initials. The second image was made using Canva. I manually adjusted the size of the canvas to fit the header of my site. Using the Elements tab, I inserted and duplicated blue triangles, then thickly outlined a few in a lighter blue color. The background was “filled” with a large rectangle made mostly transparent and moved to the bottom layer of the canvas.

File Types

I chose to have both files exported as PNGs. I knew the Favicon should be a PNG because this article by the CRO:NYX team suggested it was the best file type for that particular part of a website. The second I figured would be best as a PNG as well because the same article suggested that file type is best for “flat-colored graphics”.

This week I want to go over what I have learned in class about copyright, creative commons, and attribution.

What is copyright?

From the reading assignments web article The Cyberlaw Guide to Protest Art: Copyright, an explanation of what copyright is, what I understand copyright to be is the legal protection of a person’s creative works. Those works could be any kind of art; meaning drawings, music, videos, photos, writing, etc. The copy right protection means that only the creator/owner of the work, unless they give permission to someone, has the sole right to sell their work. Preventing someone else from copying their work and selling it for themselves. The purpose is to ensure that people who spend time, money, and effort on creating something will get to make money buy selling their work. If as soon as someone created something new, everyone could just copy it and sell it as their own, the creator would lose a lot of the profit.

What is the Creative Commons?

I chose the creative commons: CC BY-NC 4.0 Attribution-NonCommercial 4.0 International license because the blogs on this subdomain are all projects for the University of Mary Washington Intro to Digital Studies: DGST 101 Course. Since they are all school projects, I chose to make the work in this blog to be the most permissive. By doing so, re-users have the most freedom to, as creative commons summarizes: “to distribute, remix, adapt, and build upon the material in any medium or format, so long as attribution is given to the creator” creativecommons.org summarized explanation of the six types of creative commons licenses.

What about attribution?

Attribution is when you cite the creator when you use, quote, talk about someone’s work. Some people will state on their website how they want to be cited, you will see that on peer reviewed journals also. If they do not specify or you cannot find the original creator, you do you best to cite where you found it. Essentially, you are giving them credit for their work. However, some people will chose not to share their work for free, generally you will see a watermarked or reduced image posted on their website. Some work can be considered “public domain” if the copyright has expired, has been removed by the creator, or was produced by the government. However, it is still good practice to cite whenever possible.

Calvin and Hobbes by Bill Watterson posted on the Screen Rant web article “Calvin & Hobbes Infamous Urinating Decal, Explained” by TJ Mills

What about “fair use”?

This gets tricky, typically you are not allowed to use another person’s work for your own gain. Unless you are criticizing it, because it would be unreasonable to have to ask permission of someone to write negatively about their work. However, using a work and transforming it into something else is generally considered fair use. As well as using it for educational purposes. A good example of fair use is Calvin and Hobbes, a common sticker seen on the back of cars is a depiction of Calvin urinating on a logo. According to the Palette Swap web article by Kevin Podas the creator of Calvin and Hobbes, Bill Watterson did object to the depiction of Calvin Urinating. Only later did he decide to allow that image to be considered fair use. The bottom line is, be sure cite the creators whenever possible and do you due diligence prior to using someone’s work.

Creator unknown. Image found on Screen Rant article: Calvin & Hobbes Infamous Urinating Decal, Explained, by TJ Mills.

Creator unknown. Image is from – giphy.com

Reflection

Before when I thought about copyright, I felt as though it was a nuisance. The reason I felt that way was because I couldn’t do things like use certain music for a YouTube video. I would even witness some content creators unintentionally getting into copyright issues. Over time, however, I started to understand the importance of it and why creators have the right to copyright their work. Through my years in college, I have done a lot of activities in content creation where I show my creativity. Having that experience made me realize how important it is to get your well-deserved credit for you intellectual property.

My CC License

For my CC license, I decided to pick the traditional copyright license which means all rights are reserved to me. My reasons for this is because of the origin of my platform. This is a place where I share my thoughts on my blogs. I just want it to be a platform where people read my thoughts and they can comment on my page to share their thoughts and opinions on my blogs. I don’t mind if it is used for fair use purposes (i.e. video critiquing my blogs), but I don’t feel comfortable with someone taking my blog and reposting it somewhere else or remixing it in anyway.

Creator unknown. Image is from – magnific.com

Using the Works of Others

When using the works of others, it is always important to give them credit. When I think about using others’ work ethically, I think about using it to benefit others. This includes using something from others for educational purposes like using someone else’s research for an essay or educational video while citing them as a source. Another situation is when the work is being used for critique. I support criticism because I feel like is important that certain topics have many different perspectives because it broadens others’ minds and helps avoid narrow thinking. Both of these situations benefit others, so therefore it is ethical in my opinion. Anything that would be under fair use is ethical as long as it is credited to the creator.

Conclusion

In conclusion, learning about copyright was useful, especially for someone like me who is currently creating content in this class. Moving from viewing copyright as restrictive to understanding its importance as a tool to protect my creative work helped me make certain choices for my blog site. By choosing a traditional “All Rights Reserves” license while valuing fair use for critique, I can protect my intellectual property while still giving room for meaningful discussions. Copyright is more than just following rules, it’s also about giving deserved credit to creators as they share their creativity to the world.

Copyright

After completing module 5, I can say I learned much about copyright that I did not previously know. I wasn’t aware that copyright was addressed in the Constitution, for example. I knew that copyright was inherent to most creative works, but wasn’t aware of the alternatives to its traditional form– such as Creative Commons licenses. I had never understood what “CC” meant, and after reading up on it, was intrigued enough to select Creative Commons license for my website. I chose one of the more basic licenses: CC BY 4.0. This license allows for the sharing or adaptation of material in any form as long as attribution is given. I figured I did not need a license with any more restrictions than this, considering nothing on my website is of any significant value to me. The only thing original on the site is my thoughts, and I’m happy to share those with whomever wants to use them. The 4.0 license makes clear that any modifications must be specified, so I’m not worried about anyone changing my words or attributing things I did not say to me.

Attribution and the Ethics of Using What’s Not Yours

Using the work of others ethically is crucial to maintaining the foundation of trust that many creative works are built upon on the web. Attribution is a must in all circumstances– whether legal copyright applies or not. Not crediting people for their work is a violation of the aforementioned trust that a creator puts in the public domain. As a whole, web users should want to incentivize creators to put their work into the public domain/make it free for use, as it benefits all of us. Conducting oneself ethically when sourcing materials, such as media, is a must. For example, using websites such as Pixabay is an easy way to ensure your sources are being used consensually. See below for two copyright-free Pixabay images that demonstrate ethical attribution.

Now that I am thinking about it, I don’t have much of a presence on the internet. Not to date myself but, I started with an America Online (AOL) account, then I made an AOL Instant Messenger (AIM) account. Back then it was THE cool way to message your friends. Then came Myspace, which was basically Facebook before Facebook. Now I have Facebook and Instagram, but I haven’t posted much of anything in years. I mostly surf Facebook Market Place for good deals and message friends from time to time. So I guess I am just a consumer, not a producer.   

Where did the Radish name come from?

I come from a mixed culture family, my mother is Taiwanese and my father is of Anglo-Saxon decent from the Midwest. When I was growing up I would spend my summer vacation months in Taiwan. My Taiwanese grandfather would pronounce my name (Robert) as Rowboáh. As in Chinese culture, whenever dealing with English names, they would try to find Chinese words that sound like the English one and replace it with that. In this case, he quickly found that the words for radish: 蘿蔔 Luóbo, sounded like Rowbo. It stuck. The áh sound at the end is the mixing in of Taiwanese Hokkien, common in Taiwan, to indicate familial endearment.  

Radish vs Carrot

Another interesting play on the words is the difference between how radish and carrot is spoken in Chinese. Unlike in English, how there are different names for each, in Chinese, radish: 蘿蔔 Luóbo, describes what is commonly know as a white radish, and carrot is simply: 紅蘿蔔 Hóng luóbo, red radish. So, it’s indicating that I am of mixed decent, a “white” radish.

What is a radish?

The white radish, also known as the Chinese radish is common in East Asia. Unlike the red radish (not the Hóng luóbo) that we in the U.S. would typically buy at the grocery store, it closely resembles a carrot. It has a long white root that grows underground and large leaves that protrude above ground. It is used to make various dishes throughout East Asia and the style of dish depends on the culture. If you want to learn more, see: Delighted Cooking: What is a White Radish web article.  

Radish cakes

One of my favorite breakfast foods when in Taiwan is the radish cake. It is made with white radish, rice, and water that is ground into a paste. Once it hardens into a gel, almost resembling tofu, it is cut into blocks and pan-fired until golden brown. It is served with various types of sauces but most commonly sweet soy sauce. People also often order eggs or breakfast sandwiches to go with them. If you want to learn more about radish cakes or Taiwanese breakfast foods, check out Taiwan Obsessed: A Taiwanese Breakfast Foods Guide web article.

My Online Identity

To answer the question…

As of right now, I am not much of anybody on the web. Besides a generic LinkedIn page (and now my equally-generic WordPress site) I’ve developed limited formal presence on the internet. My presence on the web is limited to private social media accounts and anonymous website visits. Most of this is simply due to my status as an undergraduate student and non-professional. However, I suspect this will soon change as I take this course– and after I graduate, naturally.

My domain name…

My domain name was not actually created by the Frankie of today. Rather, first-semester freshman Frankie was forced, as part of his FSEM course (with a professor who will not be named), to create a domain with the Domain of One’s Own project. So, naturally, freshman-year Frankie panicked and chose the most generic name he could think of: his own. Hence, frankiewulf.com was born.

Who Will I Be Online?

Becoming someone on the web…

After completing this course, I hope I will be equipped with the tools I need to bolster my professional web presence. I plan on transforming my domain site to act as a growing resume/portfolio documenting the various internships and field work I engage with in graduate school and beyond. This Forbes article explains the benefits of having one’s own website when job-seeking.

Introduction

The Internet is a place where people can connect, share their ideas, and create. It has given us access to a lot of knowledge we might not have known about if it wasn’t so open. Through this course, I learned the impact of the open web and was given numerous opportunities to publish my work to the public. With this type of freedom, there is a lot of responsibility one has to take when posting publicly.

Identity on the Web

When you post something, it can be seen by hundreds, thousands, and even millions of people. With that knowledge, you always have to be careful what you put out to the world because it could define your internet identity forever. Many people have lost jobs or had trouble finding jobs because of what they decided to post on the internet. The internet is supposed to be a place where people have fun, learn, and connect with new people, but people have to protect their online identity or image and also think about how what they post can affect their personal lives. That’s why it is always important to post something that you would be proud of in the future and won’t regret. Take ownership and control how you are seen on the web.

Domain of One’s Own

The name “Domain of One’s Own” was inspired by the title of a feminist essay, “A Room of One’s Own” written by Virginia Woolf in 1929. The essay argued that women should be able to have access to the same amount of resources as men (finance, education, independence) in order to write. Domain of One’s Own was created in the University of Mary Washington to give students access to web hosting. It gives students the opportunity to create their own domain and post what they want (Heywood).

To learn more visit this website:

A Domain of One’s Own

My Domain

For an assignment, I was given the chance to create my own domain using my Domain of One’s Own account. I was supposed to pick a name for my domain and I decide on, “mariamsweb.com”. I added an “s” not because of my last name, but to mean “Mariam’s”. I put it there to showcase that I own the domain. I added “web” there to represent connection like how a spider web is connected. That is also why I chose the image at the top. I want to connect with my classmates by sharing a part of me on the internet.

Conclusion

For this week’s lesson, I learned the importance of having ownership. When I created a name for my domain, I thought hard on what name would not cause me regret and I would be proud of. Through web hosting, I had many challenges and spent hours figuring out what to do, but it was all worth it. These are skills that would be useful for my professional career and I could put on my resume. Ultimately, this project underscored Virginia Woolf’s core lesson: having access to resources and complete ownership over your work are essential to success.