Minor assignment 1

Lecture: Task: Identity, trust, reputation, and the participatory web.

[1] List and briefly annotate all of the social media (social networking) sites on which you have accounts. (If you have none, create some.) During the course of my life, I have come across a lot of different social media sites and have signed up to have my own account. Whilst, some of them I rarely used, some, I used quite extensively and still do. Hence, the ones that I still use and have my accounts on it are as follows: 1. Facebook: As far as I can remember, I became a registered user of the Facebook in year 2008 after one of my closest friends told me about it and ever since I have only grown to appreciate it more. The thing that I like about Facebook is that, over the years, it has managed to attract a huge number of users where almost everyone now has an account on it. With this being said, it has allowed me to keep in touch with some of the long lost childhood friends and families. It has allowed me to share my pictures and videos among them and also vice versa. Moreover, it also has some neat features where I can tag my friends and comment on their activities or press a like button if there is anything that excites me. However, above all the things that I have mentioned, video-calling features is one of my best. Simply because it allows me to have conversation with my loved ones back home in my country in real time. Facebook is very easy to use and also that its page loads faster compared to other social media sites when I am using via mobile devices. 2. Myspace: Myspace is another one of my favorite social networking site. Prior to knowledge that there was Facebook, I was using Myspace. Although it is very similar to the Facebook in a sense that it allows me to send a friend request, share my photos and videos with one another, there is one thing that Ill always like about Myspace, it offers more customization options for the appearance of your profile page and also lets me put various gadgets and widgets. It allows me to decorate the profile page to my taste and even put a song so whenever someone visits my page it will start playing. Myspace also certainly got me interested in the idea about designing websites from scratch. Other thing that I like about Myspace is, there are tons of music artist signed up in the Myspace and you can actually send them a friend request and you can ask them questions or their ideas behind the songs. The only negative about Myspace is that it loads slower than Facebook when I am using via mobile device. 3. eBay: I started using eBay even before Myspace and Facebook and find it to be very useful because it allows me to buy the items that I want without even travelling to shops which saves me a great deal of time and money. Plus, they deliver your items right at the front of your doorstep. I also use it to sell some of the things that I no longer use and make a little money out of it. One of the features that I like about eBay is that before you make a decision to buy anything it allows you as a buyer to check the sellers feedback from their previous customers so that you can be relieved from the fact that any

transactions you make or any items you will be receiving will be safe and in good condition. YouTube: YouTube is one of the social media where I have been using it everyday and is one of my best social media out of all those listed above. I use it to view live concert footage of some of my favourite bands and share my cover songs with other people. I also use it to subscribe to people who have a lesson on things such as playing guitar, web design and programming lessons. Other things that I use it for is to view reviews of items that I am interested in and make decisions as to whether to buy or not. I consider YouTube like a video encyclopedia because it contains everything that you need to know.

[2] Reflect on how your presence on these sites represent you in the world; and, choosing two of these, document the public information you offer on these and describe the person you think is depicted there. My presence on the above sites reflects me as a person who is social, outgoing and talented. It reflects me as a person who is interested in creative things such as music and designing websites but also has love for outdoor activities like sports and going camping. The public information that I offer Facebook and YouTube is somewhat limited. This is because I keep my privacy settings high. In Facebook only my friends can view my pictures, videos, my status and other Facebook features etc. The people outside my friends list can only view my profile picture and name. The same goes with the YouTube as well. People who are outside of my friends list can only see me as a person who is interested in music and no other activities.

[3] Look at the list of social media sites of a friend, and describe the person you think is depicted there. How closely does this converge with the person you know? I just recently checked Facebook and YouTube of a friend Abiral who was introduced to me by my best friend just a few days ago. After going through both, his profile page in the Facebook as well as YouTube videos, he came across to me as someone who is engaged very much in playing football and computer games because his status in the Facebook wall and the videos uploaded in the YouTube would always either be about football or new computer games. I think, by the activities and information provided on those two sites, it seemed to converge quite close and well with him because when I met him personally, I noticed that anything particular about sports and video games would immediately excite him and light his face up. [4] In light of your reflections on [1-3[, describe briefly how social media might be responsibly and productively to promote any small business or organization of your choice. Social media can help my business to reach out, attract and target broader range of customers by keeping the customers posted about new products. Through Facebook ads and YouTube viral videos my business will be known to more and more people and the volume of sales will rise.

Minor assignment 4
Lecture: Working with images Task: Use GIMP (or Photoshop, or any image processing application of your choice) to design a graphic for your web site. This might be e.g. a logo, a banner, a page background image, or a body image. Document in detail the steps you followed to create your image. For this assignment I will be showing the banner that I designed for my website using Photoshop CS6 along with the steps I followed below: Step 1: The first step that I carried in order to create the banner was by going to the Photoshop application. Then going over to the file menu and then clicking on the new option. The image on the left shows the window that appears after clicking the new option. In this window I input the width to be 1000 pixels and height of about 300 pixels so that the background be nice and long like a banner. I then pressed the ok button.

The above screenshot shows the blank white background that appears after I pressed the ok button in the previous window. Also under the layers palette, a small white rectangle icon with the word background has emerged to indicate that I am working on the background layer.

Step 2:

In this second step what I did was fill the empty white background with the black color. This I performed by going over to the edit menu and clicking on the fill option. Then once in the fill window I choose black as a color under the contents section.

The screenshot on the left shows that the background layer has now turned to black color after pressing the ok button in the fill window.

After the background was black, I then grabbed a horizontal type tool from toolbar in the left and wrote a text DOUBLE TROUBLE in a big font size and in white. When I started typing the words, I also noticed that on the right side, under the layer palette, a new layer with icon T had emerged to indicate me that I was now working on the text layer. When I was finished with the writing I then quickly grabbed a move tool to centre align those texts against the black background.

Step 3:

In this third step I needed to make a duplicate of this text layer. Thus, I went to the duplicate layer option under the layer menu and gave a name for this duplicate layer as double trouble text copy.

After giving the name and clicking the ok button in the duplicate layer option window, I noticed that the duplicate text layer was created above the original text layer under the layers palette on the right.

Step 4: Step 4 involved working with the filter to begin creating a wind effect on the text DOUBLE TROUBLE. This would be by selecting the original text layer and then going to filter>stylize>wind.

After selecting the wind option, a dialogue box appeared asking me whether to rasterize this layer or not. I clicked on ok button to rasterize it so that I could begin with the wind effect.

So after agreeing to rasterize the layer, a wind effect window appeared. Next, under the method section I choose wind as an option and under the direction section I selected from the right. I then hit the ok button.

Step 5:

After agreeing with the choices, an effect was beginning to appear. However, the scale of the effect was quite small. So to increase this effect I hit the command + f key twice to repeat the effect twice and it was done.

After increasing its effect, it was time to do the same thing but this time emulating the wind effect from left to right. So again I went to filter>stylize>wind and on the direction section selected from the left option. I then repeated the process of increasing the effect of the wind like I had done earlier.

Step 6:

Up until now the effect were only from side to side. Now it was time to apply on both, upside and underside of the text. So in order to begin doing that I rotated the image 90 degrees clock wise by going to the image>image rotation>90 degrees cw. I then went to the filter and applied the wind effect first from the left. Once the effect was applied I increased its strength as mentioned in previous step.

The image on the left is a close up screenshot of the image after applying the wind effect again using the same process like before but this time the direction would be from the right.

Step 7:

After finishing step 6, I rotated the image back to the original form by going to image>image rotation>90 degrees ccw.

Step 8:

Next I wanted to apply color to this layer. So I went to the layer that I was working on and right clicked on it. After that I went to blending options>layer style. Once I was inside the layer style window I then ticked on the color overlay from the various blending options that was available. From there on I picked my color and applied by clicking ok. Lastly I merged all the layers by selecting all the layers using the command select function and merging it using the shortcut key: command + e.

Final Image:

Hence, this is my final image for the banner. Once it was finished I saved this image as a jpeg format ready to be used in my website.

10

Major assignment 2
Task: Create a web graphic using an image manipulation program such as GIMP or Photoshop. Give a detailed step-by-step account of how you created your image (filters used, etc). An extension of minor assignment 4 above. You are required to submit a significantly more complex web graphic than for the minor assignment, each step in its creation richly and perspicuously documented. Below is my detailed step by step account of how I designed my image using the Photoshop CS6 application. Step 1: The first step taken was by going into the Photoshop CS6 application. Once I was inside the Photoshop application I went to file>new, which then gave me a dialogue box with height and width options. For the width I entered 700 pixels and for the height I entered 450 pixels as shown in the screenshot on the top left. After entering the numbers, I then pressed the ok button in the dialogue box and the result was an empty white canvas like shown in the bottom left.

11

Step 2:

In the second step I started by writing a big text Fleetwood Mac on to the blank white canvass using the type tool. The font type and the font size used were Rockwell Extra bold and 72 pt respectively. I then aligned the text in the middle of the canvas using the move tool like shown in the screenshot above. You can also note that on the layers palette a text layer has now been formed. This indicated me that I was working on the original text layer.

Step 3: In this 3rd step I rasterized the original text layer by going to layers>rasterize>type. You can see from the screenshot on the left that on the layers palette, the original text layer icon has changed. The text is simply sitting on an empty background now.

12

Step 4:

In this step I needed to add a selection only around the text. So, in order to do that, I hovered my mouse directly over the text in the thumbnail for the original text layer that we had rasterized earlier and performed a single click. This I performed using command button + left mouse click.

Step 5: Next I needed to save the selection. So, to do this, I went to select menu>save selection. A dialogue box appeared but I didnt make any changes in it and simply pressed the ok button and now the selection was saved.

However, to make sure that it was saved successfully, I went to the channels palette and saw that the selection was saved as Alpha 1. This was crucial because I would need this saved selection at a later stage of my designing process.

13

Step 6: In this step, I de-selected selection of the text by using the command+ d function. With the original text layer still selected on the layers palette, I went to over to edit>fill and used white as a color in the contents section and multiply as a mode for the blending option. I then hit the ok button.

Step 7:

After completing the step 6, it was now time to apply a blur to the text. So to do that I used filter>blur>Gaussian blur. For the radius value I used 4.5 as you can see from the image above.

14

Step 8: After applying the blur in step 7, I went to the filter>stylize>solarize and the result was the something that looked like the image on the left.

After applying the solarize effect, the text appeared to lack a light on it. So, to increase the level of the light I performed command + l function and it brought me a level dialogue box. Here I moved the right hand white slider to the edge of the histogram. When I was satisfied with the amount of light, I pressed ok.

The screenshot on the left is how the text turned out to be after having done with the levels.

15

Step 9: As shown in the screenshot on the left, in this step I made duplicate of the original text layer.

Step 10:

After making the copy, I selected this duplicate text layer and applied the polar coordinate filter by going to filter>distort>polar coordinate. The setting rectangular. used was polar to

I then rotated the canvas 90 degrees clockwise by going to image>image rotation>90 degrees cw.

16

Step 11: Here I inverted the image using the command + I function. This way anything that was white would now become black and vice versa.

Step 12: In this 12th step, I applied the wind effect to the text by going to filter>stylize>wind. The settings I used were: Method = wind and Direction = From the right. Once the effect was applied, I increased the strength of it by tapping the command + f buttons twice.

Step 13: In the 13th step, I inverted the image again by performing command + I. I then reapplied the wind effect by hitting command + f three times. The result was something like the screenshot on the left.

17

Step 14: In this step here, I thought the light level lacked a little so I brightened it by hitting the shortcut key command + shift + l. Doing this would, not bring me another dialogue box but rather the Photoshop would automatically increase the levels, which was quick. I then rotated the canvas to its original form by going to image>image rotation>90 degrees ccw.

Step 15:

Next, I applied another polar coordinate filter by going to filter>distort>polar coordinates. However, the settings this time would be Rectangular to polar.

Step 16: After having done with step 15, I went to the layers palette and with the duplicate text layer still selected I went over to the blend mode options of and selected it as screen.

18

Result after completing step 16.

Hence, this was the result of turning the blend mode option to screen. What it did was simply revealed the original text layer, which was sitting under this duplicate layer. The text seems more alive now.

Step 17:

In the step 17, I wanted to apply gradient to the duplicate text layer. So in order to do that, I went to the layer> new fill layer> gradient. When the gradient fill dialogue box popped up, I clicked inside the preview area of the gradient to view gradient editor, which is another dialogue box for gradients that allowed me to experiment with more options. Once inside this editor, I choose the first one from the presets section. Then in the gradient type section, my color settings for the first color stops and second color stops were location = 0 with light blue and location = 100 with orange color respectively. After that I clicked ok on all the active dialogue boxes to confirm my choices and exit out of gradient fill effect.

19

Step 18:

After applying the gradient fill on the previous step, I turned the gradient fill layers blend mode to color as shown on the left.

Below is the result after turning blend mode from normal to color.

Step 19:

In step 19, I decided to apply a radial blur to the original text layer. To do this, I went to filter>blur>radial blur. You can see from the screenshot above that the settings are 68 pixels for Amount, zoom for the Blur method and best for the Quality.

20

Below is the image after applying the radial blur:

Step 20: For the final finishing touches of the design, I went back to the channels palette to load the selection that I had saved in the beginning steps of the design. To load the selection I simply hovered my mouse over the alpha 1 channel and performed command + mouse click. Next, I returned back to the layers palette to check.

The screenshot below shows that the selection has been successfully loaded back into the image.

21

Step 21:

In this final step, I filled the selection with the black color. This I did by going to edit>fill. I then deselected the selection by hitting the command + d function. Finally when everything was finished I merged all the layers by using command + e shortcut key and saved the image as in jpeg format.

Below is my final image:

22