Free App Screenshot Template for AppStore

There is a saying that says “Don’t Judge A Book By Its Cover” but that problem is, that most prospective customers will judge your app, by its first impression of the App Icon and Screenshots. This article will introduce you to a simple Photoshop template, that will let you create beautiful, simple and quick screenshots for your apps.

As App Developer I love to spend all my time writing code and trying to make my apps run smooth and fast on users devices. And sometimes we just can’t wait to ship our app and get it out to the AppStore or Google Play, that we forget one of the most important things about app marketing which is: “We all want to sell our apps or want as many user as possible to download it”.

The most common mistake we often make, is to not think about the first impression of our app. What we often do is just take 5 in-app screenshots of our main functions and upload them to the AppStore or Google Play, hoping that our users will find them interesting enough. But looking at one Screenshot that show our settings view isn’t that sexy as we think .

To find a simple solution to this issue I asked myself what the main issue is here. And ofc. I’m an App Developer and not an App Designer, and therefor don’t think about how my screenshots look. And if we find the time to do something about it, we often spend hours of trying to create new screenshots from the bottom, each and every time. So what we App Developers need is a simple template that will stop us from uploading boring in-app screenshots and actually create screenshots that will help us to sell more apps.

I got inspired by danish designer Michael Flarup who created App Icon Template, to create a App Screenshot Template with a basic and simple design, that will make your app look more professional.

The idea is to take 5 in-app screenshot, write 2 lines about each screenshot and to present them on a more simple, beautiful and professional way. I got a nice iPhone 5 psd with Flat Design Mockup created by Pixeden. The App Screenshot Template will automatically generate screenshots for the 3.5 and 4 inch retina screens and export your final screenshots into a folder, ready to be uploaded to AppStore or Google Play.

Download App Screenshot Template

Click here to download the App Screenshot Template ( PSD + Actions )

License: The purpose of this template is to help you create beautiful screenshots, so everything you create with the templates is completely royalty free.

Some examples

Below you can see some examples of App Screenshots that I’ve created for 3 of my apps:

ScreenExamples

Conclusion

Creating Screenshots for your upcoming best selling app, doesn’t have to be a pain anymore, when you don’t have a designer on your project. If you find this App Screenshot Template helpful, then please do share this article with your friends, or follow me on Twitter: @Saucerdk . You can also leave a comment below with your thoughts.

Template

Sunshine Weather App is Now Optimized for iPad

The Simple Weather Forecast app Sunshine just got optimized and available on iPad

It’s been a long wait, but it’s finally here. Sunshine has been optimized for Landscape and Portrait orientation view. That way the app will alway look smooth and show you the most needed weather forecast. Along with the iPad optimization 10 extra dynamic colors have been added, to brighten up your screens

The iPad optimization is only available on the paid version of the app. If you are still using Sunshine Free, well now is the time to upgrade and get rid of those ugly ads.

I would love to hear your thoughts on this latest update of Sunshine – Simple Weather Forecast.

Titanium

| Forecast iOS iPad iPhone Lukic Titanium Weather

Recreating Google’s Ripple Effect for iOS

Google’s new Material Design UI comes with many new interaction effects. One of them is this sweet touch ripple effect. This tutorial will show you how to make your own recreating of this effect for Titanium.

When designing an app, it’s always a good thing to let your users know that your app have received users input. It could be as simple as changing the color on your button to indicate that button has been activated. Here I’ll show you how to make a simple commonJS module to handle the Google Material Design Ripple Effect for iOS.

Basic thoughts

To make this animation we’ll need a handler that can receive the clicked view, and add the animation on top of it, based on users click position. Now enough talk, lets see some code.

Filename: RippleEffect.js

function create(e){
	// Width and Height of our clicked view.
	// This way we can make the circle big enough to fit the view.
	var rippleWidth = e.source.width*2;
	var rippleHeight = e.source.width*2;
 
	// Our circle that will be scaled up using 2dMartix.
	// We'll position the view at the center of the click position, by using (clickPositin - (clickedViewWidth / 2)).
	var ripple = Ti.UI.createView({
		top:(e.y-(rippleWidth/2)),
		left:(e.x-(rippleWidth/2)),
		width:rippleWidth,
		height:rippleHeight,
		borderRadius:(rippleWidth/2),
		backgroundColor:"rgba(255,255,255,0.40)",
		transform:Titanium.UI.create2DMatrix().scale(0),
		zIndex:999,
		opacity:0
	});
 
	// Add the ripple view inside the clicked view
	e.source.add(ripple);
 
	// Our animation that will set the opasity from 0 to 1, and scale our view to 50% of max size.
	ripple.animate({
		opacity:1,
		transform:Titanium.UI.create2DMatrix().scale(0.5),
		duration:200,
		curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
		},function() {
 
			// When the first animation is finish we'll scale up to 100% while we fade the opacity to 0.
			ripple.animate({
				opacity:0,
				transform:Titanium.UI.create2DMatrix().scale(1),
				duration:200,
				curve:Titanium.UI.ANIMATION_CURVE_EASE_OUT_IN
				},function() {
 
					// At the end we'll remove our ripple view from the clicked view.
					e.source.remove(ripple);
					ripple=null;
				});
		});
};
exports.create = create;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

function create(e){

// Width and Height of our clicked view.

// This way we can make the circle big enough to fit the view.

var rippleWidth = e.source.width*2;

var rippleHeight = e.source.width*2;

// Our circle that will be scaled up using 2dMartix.

// We'll position the view at the center of the click position, by using (clickPositin - (clickedViewWidth / 2)).

var ripple = Ti.UI.createView({

top:(e.y-(rippleWidth/2)),

left:(e.x-(rippleWidth/2)),

width:rippleWidth,

height:rippleHeight,

borderRadius:(rippleWidth/2),

backgroundColor:"rgba(255,255,255,0.40)",

transform:Titanium.UI.create2DMatrix().scale(0),

zIndex:999,

opacity:0

});

// Add the ripple view inside the clicked view

e.source.add(ripple);

// Our animation that will set the opasity from 0 to 1, and scale our view to 50% of max size.

ripple.animate({

opacity:1,

transform:Titanium.UI.create2DMatrix().scale(0.5),

duration:200,

curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT

},function() {

// When the first animation is finish we'll scale up to 100% while we fade the opacity to 0.

ripple.animate({

opacity:0,

transform:Titanium.UI.create2DMatrix().scale(1),

duration:200,

curve:Titanium.UI.ANIMATION_CURVE_EASE_OUT_IN

},function() {

// At the end we'll remove our ripple view from the clicked view.

e.source.remove(ripple);

ripple=null;

});

};

exports.create = create;

So now that we have a handler, all we need to do is to create our views and attach the click event. In this example I’ve added one extra attribute to our view objects called rippleEffect. That way I can check if the click event should call the Ripple Effect animation. You can also attach the addEventListener to each view if that suits my needs.

Filename: app.js

// First we need to require our commonJS module.
var RippleEffect = require("RippleEffect");
 
// Yeah we need a window :)
	var win = Ti.UI.createWindow({
		backgroundColor:"#000"
	});
 
	// Lets add some views that will get the RippleEffect on click event.
	var redView = Ti.UI.createView({
		width:320,
		height:150,
		backgroundColor:"red",
		top:0,
		left:0,
		rippleEffect:true
	});
 
	var blueView = Ti.UI.createView({
		width:160,
		height:150,
		backgroundColor:"blue",
		top:150,
		left:0,
		rippleEffect:true
	});
 
	var greenView = Ti.UI.createView({
		width:160,
		height:150,
		backgroundColor:"green",
		top:150,
		right:0,
		rippleEffect:true
	});
 
	var purpleView = Ti.UI.createView({
		width:320,
		height:150,
		backgroundColor:"purple",
		top:300,
		left:0,
		rippleEffect:true
	});
 
 
	win.add(redView);
	win.add(blueView);
	win.add(greenView);
	win.add(purpleView);
 
	win.addEventListener("click",function(e){
		if(e.source.rippleEffect){
// Here we'll pass the clicked object to our animation handler.
			RippleEffect.create(e);
		}
	});
 
	win.open();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

// First we need to require our commonJS module.

var RippleEffect = require("RippleEffect");

// Yeah we need a window :)

var win = Ti.UI.createWindow({

backgroundColor:"#000"

});

// Lets add some views that will get the RippleEffect on click event.

var redView = Ti.UI.createView({

width:320,

height:150,

backgroundColor:"red",

top:0,

left:0,

rippleEffect:true

});

var blueView = Ti.UI.createView({

width:160,

height:150,

backgroundColor:"blue",

top:150,

left:0,

rippleEffect:true

});

var greenView = Ti.UI.createView({

width:160,

height:150,

backgroundColor:"green",

top:150,

right:0,

rippleEffect:true

});

var purpleView = Ti.UI.createView({

width:320,

height:150,

backgroundColor:"purple",

top:300,

left:0,

rippleEffect:true

});

win.add(redView);

win.add(blueView);

win.add(greenView);

win.add(purpleView);

win.addEventListener("click",function(e){

if(e.source.rippleEffect){

// Here we'll pass the clicked object to our animation handler.

RippleEffect.create(e);

}

});

win.open();

Conclusion

As you can see the implementation of this effect is pretty simple and straightforward. Now its up to you to create some awesome apps with cool UI feedback.Any suggestion will be welcomed, so don’t hesitate by posting a comment below this article.

Demo

screen_demo

Titanium

| Animation Google Material Design Ripple Effect UI UX

Facebook Paper menu button animation for Titanium

Your menu button icon doesn’t have to bee borking or just a static image. When Facebook released Paper app, it was full of sweet UI animations. Here is a quick tutorial on how you can make your own Facebook Paper menu button animation.

facebook_paper

To make this animation, we’ll create 3 views and use them as lines. When we receive a click event, we’ll have to hide the line in the middle and rotate top and bottom line.

Our CommonJS Module looks like this:
Filename: Ti.PaperMenu.js

function createPaperMenuButton(args){

// Button container
var self = Ti.UI.createView({
width:30,
height:25,
_isOpen:false
});

// Top line
var lineTop = Ti.UI.createView({
width:26,
height:5,
backgroundColor:"#333",
top:0,
anchorPoint: {x:0, y:1}
});

// Middle line
var lineMiddle = Ti.UI.createView({
width:26,
height:5,
backgroundColor:"#333",
});

// Bottom line
var lineBottom = Ti.UI.createView({
width:26,
height:5,
backgroundColor:"#333",
bottom:0,
anchorPoint: {x:0, y:0}
});

self.add(lineTop);
self.add(lineMiddle);
self.add(lineBottom);

// We'll call this function to make the animation.
// All we need to do is to send "degrees" as param.
function animateLines(degrees){
var t = Ti.UI.create2DMatrix();
t = t.rotate(degrees);
var a = Titanium.UI.createAnimation({
anchorPoint: {x:1, y:1},
transform:t,
curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT,
duration:300
});

return a;

t=null;
a=null;
}

// We'll add a click event to our button container'
self.addEventListener("click",function(){

// Check to see if the button is active
if(self._isOpen){
lineTop.animate(animateLines(0));
lineBottom.animate(animateLines(0));

// We'll use opacity to fade out/in the middle line
lineMiddle.animate({
opacity:1,
duration:100
});

self._isOpen=false;
}
else{
lineTop.animate(animateLines(45));
lineBottom.animate(animateLines(-45));
lineMiddle.animate({
opacity:0,
duration:200
});
self._isOpen=true;
}

// Finally we'll send our stage value back to our creator :)
args.clickEvent(self._isOpen);

});

return self;
};

exports.createPaperMenuButton = createPaperMenuButton;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

function createPaperMenuButton(args){

// Button container

var self = Ti.UI.createView({

width:30,

height:25,

_isOpen:false

});

// Top line

var lineTop = Ti.UI.createView({

width:26,

height:5,

backgroundColor:"#333",

top:0,

anchorPoint: {x:0, y:1}

});

// Middle line

var lineMiddle = Ti.UI.createView({

width:26,

height:5,

backgroundColor:"#333",

});

// Bottom line

var lineBottom = Ti.UI.createView({

width:26,

height:5,

backgroundColor:"#333",

bottom:0,

anchorPoint: {x:0, y:0}

});

self.add(lineTop);

self.add(lineMiddle);

self.add(lineBottom);

// We'll call this function to make the animation.

// All we need to do is to send "degrees" as param.

function animateLines(degrees){

var t = Ti.UI.create2DMatrix();

t = t.rotate(degrees);

var a = Titanium.UI.createAnimation({

anchorPoint: {x:1, y:1},

transform:t,

curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT,

duration:300

});

return a;

t=null;

a=null;

}

// We'll add a click event to our button container'

self.addEventListener("click",function(){

// Check to see if the button is active

if(self._isOpen){

lineTop.animate(animateLines(0));

lineBottom.animate(animateLines(0));

// We'll use opacity to fade out/in the middle line

lineMiddle.animate({

opacity:1,

duration:100

});

self._isOpen=false;

}

else{

lineTop.animate(animateLines(45));

lineBottom.animate(animateLines(-45));

lineMiddle.animate({

opacity:0,

duration:200

});

self._isOpen=true;

}

// Finally we'll send our stage value back to our creator :)

args.clickEvent(self._isOpen);

});

return self;

};

exports.createPaperMenuButton = createPaperMenuButton;

Now that we have our commonJS module done, all we need to do is to call it through our main window.

Filename: app.js

Titanium.UI.setBackgroundColor('#fff');

// First we need to require our module.
var TiPaperMenu = require("Ti.PaperMenu");

var win = Titanium.UI.createWindow({
title:'Facebook Paper menu',
backgroundColor:'#fff'
});

// Now we can create a new menu button like this.
var menuButton = TiPaperMenu.createPaperMenuButton({
clickEvent:function(stage){
// Based on true/false, you can now open and close your windows.
Ti.API.log(stage);
}
});

win.add(menuButton);
win.open();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

Titanium.UI.setBackgroundColor('#fff');

// First we need to require our module.

var TiPaperMenu = require("Ti.PaperMenu");

var win = Titanium.UI.createWindow({

title:'Facebook Paper menu',

backgroundColor:'#fff'

});

// Now we can create a new menu button like this.

var menuButton = TiPaperMenu.createPaperMenuButton({

clickEvent:function(stage){

// Based on true/false, you can now open and close your windows.

Ti.API.log(stage);

}

});

win.add(menuButton);

win.open();

Video demo

Here is a video showing the module in action.

Titanium

| Animation Button Facebook iOS Navigation