Some ideas from the top of my head for an app:
- Simple weather app || Little character switches clothes and expression depending on the weather. E.g. wearing a coat and hat when it's windy and having little swirly wind doodles around the screen with an angry cloud, or eating an icecream when the weather is nice and sunny etc.
- Mini train or car animation || If stuck travelling in the car or bus or train, there could be an app where a little vehicle is driving along on a road or track and you can make it crash, fly, go underwater etc, just in case you were bored.
- Bug squish || See how many bugs you can squish. A never-ending game for bored people.
- Smashing stuff || Inspired by the stress ball, select items to destroy or use your camera to use a person's photo and destroy it.
Web2 Graphics
The term Web 2.0 is associated with web applications that facilitate participatory information sharing, interoperability, user-centered design,[1] and collaboration on the World Wide Web. A Web 2.0 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community, in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them. Examples of Web 2.0 include social networking sites, blogs, wikis, video sharing sites, hosted services, web applications, mashups and folksonomies.
Web 2 tutorials
You’ve seen them everywhere. No self-respecting Web2.0 site would be without them; those little splashes of color that jump out at you and scream “HEY LOOK AT ME! OVER HERE!” Yes, that’s right. We’re talking about perhaps the most over-used trendy little design fad to come out of the two-oh movement-the badge!
Admit it. They’re pretty cool, huh? So let’s make one…
Crack open a new Photoshop file and create a new layer. Call it “badge” or something like that. Now grab the shape tool and select the 8 point star shape from the dropdown palette of available shapes.
Note: If this shape isn’t available for you, you may need to load it into Photoshop by clicking on the options menu icon (>) in that same palette and selecting “shapes” and then when prompted, choose “append.”
Now that you’ve done this, draw a shape the size of your badge. Make sure you’re creating either using either filled pixel shapes or paths, not vector shape layers. For this example, I’m using paths.
Next, Ctrl+Click on the path in your paths palette to load its selection and fill it with a color. Any color will do for now.
Next, hit Ctrl+J to duplicate the layer. Now go up to Edit – Transform – Rotate. Enter a rotation amount of 23 degrees in the rotation options. Alternately, you can just eyeball it if you like. It’s pretty easy to see when everything is lined up correctly. This rotation will finish creating your badge shape, so merge the two layers by hitting Ctrl+E.
Now click on the “Lock transparent pixels” icon in the layers palette for the “badge” layer. Set your foreground color to #ff8400 and your background color to #ff4900. Using the gradient tool, with the foreground to background gradient selected, drag from the top left or your badge to the bottom right. Hold down the shift key to constrain your gradient on a 45 degree downward angle.
Now let’s add some layer styles. Double click on the layer to bring up the layer styles dialog and apply the following:
Now create another new layer and call it “highlight”. Using your circular marquee tool, make a selection just big enough to encompass the badge shape. Fill it with white and move it so that it obscures the upper left half to two-thirds of the badge. Alt+Click between the “badge” and the “highlight” layer in the layers palette to group them together. Now lower the layer’s opacity to 30%.
Now click on the layer mask icon for the “highlight” layer in the layers palette. Select a black to white gradient and drag from the top left of the badge down to the bottom right, just as we did above.
Great! We’re almost done. Let’s add some text. Of course, be sure to use a nice, trendy Web2.- font.
That text looks a little plain. Let’s give it a simple layer style to make it pop out more (or in, in this case). Double click on the text layer and apply the following style.
There you have it, our finished badge!
Step 3: Pick Your Lighter Color
Your foreground color should still be the dark red you selected in Step 1. Click on the foreground square to bring up your color palette, and then select a secondary color that is lighter and slightly less saturated. Keep your second color close to your first, just so your gradient is subtle and not as jarring:
Web 2 tutorials
Three girls posing in the night Illustration
September 15th, 2006 by ART-D Posted in Adobe Photoshop, Drawing Techniques
Three girls posing in the night Illustration
Let’s learn how to create an illiustration. You can get your favorite photo and try to do the same steps.
Let’s learn how to create an illiustration. You can get your favorite photo and try to do the same steps.
Let’s create a new document with dimensions 500×400 and 72 dpi. Using the instrument
, create a triangle (colour code is indicated with red).
, create a triangle (colour code is indicated with red).Continue using the same instrumentand create triangles on all the backgrounds - one triangle to one background:
and create triangles on all the backgrounds - one triangle to one background:All of them having the same colour:
Continue create triangles:
We’ll get the next picture.
We’ll get the next picture.
On a new background create a nice star using this instrument
:
:The colour code is indicated again with red.
Make several stars of different dimensions, but of the same color.
And several stars of different colors:
We’ll combine our stars with the triangles and we’ll have the next picture:
We’ll add some luminescent stars using the instrument Blending Options where we’ll choose Outer Glow and set out like in this picture:
We’ll get luminescent stars:
Add some extra-effects. We’ll use a big brush of white color on a new background and make the upper part of the picture brighter. The brush’s dimensions: hardness – 0% and opacity – 10%:
Also we’ll dark out the edges of the picture by clicking the next instrument and choosing Curves on a new background:
The menu is open and we can install the next parameters. Seizing the left point from the bottom.
If anything is done correctly we’ll see the next:
Let’s take the girl’s photo and using the instrument
, move off the background:
, move off the background:Applying Blending options and parameter Colour Overlay on the girls’ background set out the black colour.
We’ll get the girls’ silhouettes:
Add the girls’ silhouettes to the result we got before and we’ll see:
Add also a shadow under the girls. We need to copy the background with girls’ silhouettes and use Free Transform (by clicking the right button of the mouse on the background) and display the silhouettes on 180* vertically. Don’t forget to change the opacity – 55% on the background.
----
Web 2.0 Text Effect
1. Start a new document 400 x 400. This gives us lots of space, and allows us to crop it later on. Make sure this is filled with white.
2. Grab the text tool and type your word, (I’ve used ‘texteffect’ as an example). Apply the following fonts and settings:
3. Layer > Rasterize > Type (the text is now unscalable so make sure you’ve chosen the right size in the first place!)
4. Hold control and click on the text layer; this selects it all. Go to select > Modify > Expand and apply the following settings.
5. Select black as the background colour on your colour swatch, and hold control followed by backspace. This should fill the area black, like so:
6. Go to blending options (Layer > Layer Style > Blending Options) and select the gradient overlay. Apply the following settings:
7. Stay in blending options but this time select stroke. Apply these settings:
You will be left with this:
Your basic text is complete! A lovely dual coloured, simple text; fitting the new web 2.0 phase! Play around with the colours, remembering to stick with different shades of the same colour for best effect.
-----------
Admit it. They’re pretty cool, huh? So let’s make one…
Crack open a new Photoshop file and create a new layer. Call it “badge” or something like that. Now grab the shape tool and select the 8 point star shape from the dropdown palette of available shapes.
Note: If this shape isn’t available for you, you may need to load it into Photoshop by clicking on the options menu icon (>) in that same palette and selecting “shapes” and then when prompted, choose “append.”
Now that you’ve done this, draw a shape the size of your badge. Make sure you’re creating either using either filled pixel shapes or paths, not vector shape layers. For this example, I’m using paths.
Next, Ctrl+Click on the path in your paths palette to load its selection and fill it with a color. Any color will do for now.
Next, hit Ctrl+J to duplicate the layer. Now go up to Edit – Transform – Rotate. Enter a rotation amount of 23 degrees in the rotation options. Alternately, you can just eyeball it if you like. It’s pretty easy to see when everything is lined up correctly. This rotation will finish creating your badge shape, so merge the two layers by hitting Ctrl+E.
Now click on the “Lock transparent pixels” icon in the layers palette for the “badge” layer. Set your foreground color to #ff8400 and your background color to #ff4900. Using the gradient tool, with the foreground to background gradient selected, drag from the top left or your badge to the bottom right. Hold down the shift key to constrain your gradient on a 45 degree downward angle.
Now let’s add some layer styles. Double click on the layer to bring up the layer styles dialog and apply the following:
Now create another new layer and call it “highlight”. Using your circular marquee tool, make a selection just big enough to encompass the badge shape. Fill it with white and move it so that it obscures the upper left half to two-thirds of the badge. Alt+Click between the “badge” and the “highlight” layer in the layers palette to group them together. Now lower the layer’s opacity to 30%.
Now click on the layer mask icon for the “highlight” layer in the layers palette. Select a black to white gradient and drag from the top left of the badge down to the bottom right, just as we did above.
Great! We’re almost done. Let’s add some text. Of course, be sure to use a nice, trendy Web2.- font.
That text looks a little plain. Let’s give it a simple layer style to make it pop out more (or in, in this case). Double click on the text layer and apply the following style.
There you have it, our finished badge!
---------
If you add together all the “interface tricks” designers use on 1) websites, 2) blogs, and 3) web applications, the one common thread is the idea of manipulation. When we use gloss, gradients, or drop shadows it’s because we’re trying to manipulate your eye into thinking the 2D screen in front of you is a lush 3D landscape filled with volume, depth, and light sources. When you visit a site that looks really sleek and cool, it’s probably because they manipulated your eye correctly and the 3D effect looks “real”, and on sites that look odd or “not as real” it’s because the effects they used didn’t mimic what your eye believes as 3D. Your eyes have been looking at things in the world for a very long time and they’re used to what a shadow looks like, what a light source’s highlight on an object looks like, etc. If you don’t approximate what your eye “thinks” something should look like then your design won’t accomplish the 3D look you’re trying to emulate.
Here are three blocks with various gradients applied, check them out and I’ll go over the differences:
1
Box 1 illustrates a classic problem I see a lot, and that’s the loss of saturation in the image. Saturation is how intense a specific color is, and a less saturated hue is muddy or grey. When light strikes an object it doesn’t make it less saturated, but simply lighter and possibly more saturated (more saturated because the added light counteracts the shadow mixed with the color) so keep that in mind. Note that the box doesn’t look very “rounded” or 3D at all, it just looks flat and uninteresting.
Box 1 illustrates a classic problem I see a lot, and that’s the loss of saturation in the image. Saturation is how intense a specific color is, and a less saturated hue is muddy or grey. When light strikes an object it doesn’t make it less saturated, but simply lighter and possibly more saturated (more saturated because the added light counteracts the shadow mixed with the color) so keep that in mind. Note that the box doesn’t look very “rounded” or 3D at all, it just looks flat and uninteresting.
2
Box 2 shows another type of gradient some designers use, and although it looks better than Box 1 (doesn’t lose saturation) it’s off because it’s not subtle enough. Box 2 looks like a copper panel that has been hit with a flashlight at full blast — not the effect we’re looking for. Tricking eyes into seeing 3D when there’s only two dimensions means reproducing what they see normally, which would be common objects with inside lighting, or outdoor objects with subtle natural lighting. A flashlight or strobe light is not a common light source, so don’t use that metaphor when working with gradients.
Box 2 shows another type of gradient some designers use, and although it looks better than Box 1 (doesn’t lose saturation) it’s off because it’s not subtle enough. Box 2 looks like a copper panel that has been hit with a flashlight at full blast — not the effect we’re looking for. Tricking eyes into seeing 3D when there’s only two dimensions means reproducing what they see normally, which would be common objects with inside lighting, or outdoor objects with subtle natural lighting. A flashlight or strobe light is not a common light source, so don’t use that metaphor when working with gradients.
3
Box 3 is the best out of all. The light source is subtle, the color of the highlight has more saturation than the other two, and the color change is gradual enough to trick your eye into thinking it’s a beveled, 3D panel. If you’re going for a beveled-out look, this is the type of gradient you should be trying to reproduce.
Box 3 is the best out of all. The light source is subtle, the color of the highlight has more saturation than the other two, and the color change is gradual enough to trick your eye into thinking it’s a beveled, 3D panel. If you’re going for a beveled-out look, this is the type of gradient you should be trying to reproduce.
Creating A Gradient In Photoshop
There is a dedicated gradient tool in Photoshop, but just like with anything “obvious” it turns out to be anything but. There are multiple ways of producing a gradient in Photoshop, and I’m going to show you the way I always use because it’s pretty non-technical and produces reliable and reproducible results.
There is a dedicated gradient tool in Photoshop, but just like with anything “obvious” it turns out to be anything but. There are multiple ways of producing a gradient in Photoshop, and I’m going to show you the way I always use because it’s pretty non-technical and produces reliable and reproducible results.
Step 1: Fill Your Base Layer
I like to use a Foreground->Transparent gradient, and to work with that you need a color to show through the bottom transparent area. To start, make a New Layer (Shift+Cmd+N, Mac) and fill it with a color a bit on the dark side. Here’s a screenshot of the color I picked, note how I’m trying to stay closer to the right side of the Hue color square so that my base isn’t muddy (moving farther to the left decreases the Saturation, making it muddy):
I like to use a Foreground->Transparent gradient, and to work with that you need a color to show through the bottom transparent area. To start, make a New Layer (Shift+Cmd+N, Mac) and fill it with a color a bit on the dark side. Here’s a screenshot of the color I picked, note how I’m trying to stay closer to the right side of the Hue color square so that my base isn’t muddy (moving farther to the left decreases the Saturation, making it muddy):
Step 2: Make Your Gradient Layer
Make a New Layer again, name it something different from your base layer, make sure it’s on top of the previous layer.
Make a New Layer again, name it something different from your base layer, make sure it’s on top of the previous layer.
Step 3: Pick Your Lighter ColorYour foreground color should still be the dark red you selected in Step 1. Click on the foreground square to bring up your color palette, and then select a secondary color that is lighter and slightly less saturated. Keep your second color close to your first, just so your gradient is subtle and not as jarring:
Step 4: Make Your Gradient
You now have a solid color base layer, and a highlight color you’re about to use as your gradient. There are many ways to use the Gradient tool, however I highly suggest only using the Foreground->Transparent mode because you can control it the best, and we’ll be using that mode here. Select your Gradient tool (part of the Paint Bucket Fill tool if that’s already selected) and make sure the top toolbar looks like this:
You now have a solid color base layer, and a highlight color you’re about to use as your gradient. There are many ways to use the Gradient tool, however I highly suggest only using the Foreground->Transparent mode because you can control it the best, and we’ll be using that mode here. Select your Gradient tool (part of the Paint Bucket Fill tool if that’s already selected) and make sure the top toolbar looks like this:
These settings mean: 1) Foreground->Transparent gradient type, 2) Linear gradient orientation, 3) Normal mode, 4) Full opacity to start, 5) Transparency is turned On. The two most important are the first and the last: make sure that Foreground->Transparent is selected, and that your gradient is free to turn transparent at the end.
The gradient tool works by dragging a line across the area you want to apply the gradient. In a normal, linear, FG->TRANS gradient, your foreground color will start at your first point and will become transparent by the end point. The longer your line the smoother your gradient will be, but if it’s too long then it’s difficult to see the gradient at all. I normally make my gradient line about 10° past vertical, leaning towards the upper left, because you’re trying to emulate a top-left light source in all user interface design. Varying the length of your gradient, the degree tilt, and the placement of the start will allow you to tweak various parts in order to get it perfect. Here’s a screenshot of my gradient, with the start and end points indicated:
-------------
The iPhone
The iPhone (pronounced /ˈaɪfoʊn/ EYE-fohn) is a line of Internet and multimedia-enabled smartphones designed and marketed by Apple Inc. The first iPhone was unveiled by Apple CEO Steve Jobs on January 9, 2007.[1] The phone was released on June 29, 2007.
An iPhone can function as a video camera, a camera phone with text messaging and visual voicemail, a portable media player, and an Internet client with e-mail and web browsing capabilities, and both Wi-Fi and 3G connectivity. The user interface is built around the device's multi-touch screen, including a virtual keyboard rather than a physical one. Third-party as well as Apple application software is available from the App Store, which launched in mid-2008 and now has over 350,000[2] "apps" approved by Apple. These apps have diverse functionalities, including games, reference, GPS navigation, social networking, security and advertising for television shows, films, and celebrities.
My idea
I have decided to go with the 'smashing' idea, and came up with the name iSMASH. Basically, it is an app which will allow the user to select certain images (or photos from their camera) to bring up on the screen so they can smash it to pieces. It is a take on the traditional stress ball but you have it on your phone wherever you go. This could be an interesting idea because it has been proven a lot of people do get stressed a lot of times in their lives. Be that from work, college, personal issues or other; people stress. I thought this to be an almost fun way of getting rid of any built up anger but also keep it relatively safe.
How it works
The idea of the 'game', is to click and drag around an image; ergo stretching it til it snaps, poking/prodding (smashing) an image (e.g. a glass vase) until it shatters into pieces. The basis of having a photo of say someone you don't like could be a little discriminating, so I will have to think over that part.
What it will look like
Keeping everything simple, including design will be the best option in my opinion. It's not a particularly jaw dropping game with an interesting story or anything so as long as it remains simple, so will the design.
Mock designs
I came up with a few designs of what the app could look like.
This being the main screen...
1st image: I used a simple screen smash effect for the background to emphasise the objective of the app; which becomes pretty obvious when you read the words 'iSmash'. I put a little '...play?' button on the bottom left for the user to click and activate the game. The two smashed pottery images on this image show examples of what the person can select to smash; they are typical 'smashed items'.
2nd + 3rd image: This is a brief example of one of the objects about to be broken. I have chosen a wine glass for this example. The user will tap the screen and the more they tap it, the more the glass will chip until it eventually smashes (see 3rd image).
2nd + 3rd image: This is a brief example of one of the objects about to be broken. I have chosen a wine glass for this example. The user will tap the screen and the more they tap it, the more the glass will chip until it eventually smashes (see 3rd image).
No comments:
Post a Comment