Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat
Photoshop Template for store screenshots - Gideros Forum

Photoshop Template for store screenshots

mertocanmertocan Member
edited August 2017 in Relax cafe
Hi Giderans,

I have created a simple screenshot creator photoshop template. Create required screenshots very quickly without pain :) You don't need a designer.

download from here: github link

Thanks.
Mert
+1 -1 (+4 / -0 ) Share on Facebook

Comments

  • Thanks for sharing!

    Likes: mertocan

    +1 -1 (+1 / -0 ) Share on Facebook
  • That's awesome! Thanks heaps :)

    Likes: mertocan

    +1 -1 (+1 / -0 ) Share on Facebook
  • SinisterSoftSinisterSoft Maintainer
    edited October 2
    I've done something a little different, but similar (!!) on my website:

    https://deluxepixel.com/zombierocks



    2019-10-02_21-28-01.png
    621 x 854 - 420K
    2019-10-02_21-30-23.png
    871 x 720 - 464K
  • SinisterSoftSinisterSoft Maintainer
    Here is a snip from the stylesheet:
    #portrait {
        background-image: url("../images/misc/portrait.png");
        background-repeat: no-repeat;
        height: 800px;
        width: 600px;
        margin: 0 auto 30px;
        position: relative;
    	border: 1px solid black;
    }
     
    #iportrait {
        height: 645px;
        width: 313px;
        position: absolute;
        top: 52px;
        left: 192px;
    }
     
    #portrait2 {
        background-image: url("../images/misc/portrait2.png");
        background-repeat: no-repeat;
        height: 716px;
        width: 28px;
        position: absolute;
        top: 14px;
        left: 185px;
    	border: 0px;
    }
     
    #portrait3 {
        background-image: url("../images/misc/portrait3.png");
        background-repeat: no-repeat;
        height: 716px;
        width: 28px;
        position: absolute;
        top: 17px;
        left: 482px;
    	border: 0px;
    }
     
    #landscape {
        background-image: url("../images/misc/landscape.png");
        background-repeat: no-repeat;
        height: 600px;
        width: 800px;
        margin: 0 auto 30px;
        position: relative;
    	border: 1px solid black;
    }
     
    #ilandscape {
        height: 313px;
        width: 645px;
        position: absolute;
        top: 192px;
        left: 103px;
    }
     
    #landscape2 {
        background-image: url("../images/misc/landscape2.png");
        background-repeat: no-repeat;
        height: 28px;
        width: 716px;
        position: absolute;
        top: 184px;
        left: 70px;
    	border: 0px;
    }
     
    #landscape3 {
        background-image: url("../images/misc/landscape3.png");
        background-repeat: no-repeat;
        height: 28px;
        width: 716px;
        position: absolute;
        top: 482px;
        left: 70px;
    	border: 0px;
    }
     
     
    /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 991 (possibly 1199) pixels */
    <a href="/profile/media">@media</a> screen and (max-width: 991px) {	
     
    	#portrait {
    		background-image: url("../images/misc/portraitc.png");
    		background-repeat: no-repeat;
    		height: 600px;
    		width: 450px;
    		margin: 0 auto 20px;
    		position: relative;
    		border: 1px solid black;
    	}
     
    	#iportrait {
    		height: 484px;
    		width: 235px;
    		position: absolute;
    		top: 39px;
    		left: 144px;
    	}
     
    	#portrait2 {
    		background-image: url("../images/misc/portraitc2.png");
    		background-repeat: no-repeat;
    		height: 537px;
    		width: 21px;
    		position: absolute;
    		top: 11px;
    		left: 139px;
    		border: 0px;
    	}
     
    	#portrait3 {
    		background-image: url("../images/misc/portraitc3.png");
    		background-repeat: no-repeat;
    		height: 537px;
    		width: 21px;
    		position: absolute;
    		top: 13px;
    		left: 362px;
    		border: 0px;
    	}
     
    	#landscape {
    		background-image: url("../images/misc/landscapec.png");
    		background-repeat: no-repeat;
    		height: 450px;
    		width: 600px;
    		margin: 0 auto 20px;
    		position: relative;
    		border: 1px solid black;
    	}
     
    	#ilandscape {
    		height: 235px;
    		width: 484px;
    		position: absolute;
    		top: 144px;
    		left: 77px;
    	}
     
    	#landscape2 {
    		background-image: url("../images/misc/landscapec2.png");
    		background-repeat: no-repeat;
    		height: 21px;
    		width: 537px;
    		position: absolute;
    		top: 138px;
    		left: 53px;
    		border: 0px;
    	}
     
    	#landscape3 {
    		background-image: url("../images/misc/landscapec3.png");
    		background-repeat: no-repeat;
    		height: 21px;
    		width: 537px;
    		position: absolute;
    		top: 362px;
    		left: 53px;
    		border: 0px;
    	}
     
    }
     
    /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 767 pixels */
    <a href="/profile/media">@media</a> screen and (max-width: 767px) {	
      .fnavbar a {
        float: none;
        display: block;
      }
     
    	#portrait {
    		background-image: url("../images/misc/portraitb.png");
    		background-repeat: no-repeat;
    		height: 400px;
    		width: 300px;
    		margin: 0 auto 15px;
    		position: relative;
    		border: 1px solid black;
    	}
     
    	#iportrait {
    		height: 323px;
    		width: 157px;
    		position: absolute;
    		top: 26px;
    		left: 96px;
    	}
     
    	#portrait2 {
    		background-image: url("../images/misc/portraitb2.png");
    		background-repeat: no-repeat;
    		height: 358px;
    		width: 14px;
    		position: absolute;
    		top: 7px;
    		left: 92px;
    		border: 0px;
    	}
     
    	#portrait3 {
    		background-image: url("../images/misc/portraitb3.png");
    		background-repeat: no-repeat;
    		height: 358px;
    		width: 14px;
    		position: absolute;
    		top: 8px;
    		left: 241px;
    		border: 0px;
    	}
     
    	#landscape {
    		background-image: url("../images/misc/landscapeb.png");
    		background-repeat: no-repeat;
    		height: 300px;
    		width: 400px;
    		margin: 0 auto 15px;
    		position: relative;
    		border: 1px solid black;
    	}
     
    	#ilandscape {
    		height: 156px;
    		width: 322px;
    		position: absolute;
    		top: 96px;
    		left: 52px;
    	}
     
    	#landscape2 {
    		background-image: url("../images/misc/landscapeb2.png");
    		background-repeat: no-repeat;
    		height: 14px;
    		width: 358px;
    		position: absolute;
    		top: 92px;
    		left: 35px;
    		border: 0px;
    	}
     
    	#landscape3 {
    		background-image: url("../images/misc/landscapeb3.png");
    		background-repeat: no-repeat;
    		height: 214px;
    		width: 358px;
    		position: absolute;
    		top: 241px;
    		left: 35px;
    		border: 0px;
    	}
     
    }
     
    /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
    <a href="/profile/media">@media</a> screen and (max-width: 500px) {	
      .fnavbar a {
        float: none;
        display: block;
      }
    /*  portrait should be fine at this size
    	#portrait {
    		background-image: url("../images/misc/portraitd.png");
    		background-repeat: no-repeat;
    		height: 200px;
    		width: 150px;
    		margin: 0 auto 8px;
    		position: relative;
    		border: 1px solid black;
    	}
     
    	#iportrait {
    		height: 161px;
    		width: 78px;
    		position: absolute;
    		top: 13px;
    		left: 48px;
    	}
     
    	#portrait2 {
    		background-image: url("../images/misc/portraitd2.png");
    		background-repeat: no-repeat;
    		height: 179px;
    		width: 7px;
    		position: absolute;
    		top: 4px;
    		left: 46px;
    		border: 0px;
    	}
     
    	#portrait3 {
    		background-image: url("../images/misc/portraitd3.png");
    		background-repeat: no-repeat;
    		height: 179px;
    		width: 7px;
    		position: absolute;
    		top: 4px;
    		left: 121px;
    		border: 0px;
    	}
    */
    	#landscape {
    		background-image: url("../images/misc/landscaped.png");
    		background-repeat: no-repeat;
    		height: 150px;
    		width: 200px;
    		margin: 0 auto 8px;
    		position: relative;
    		border: 1px solid black;
    	}
     
    	#ilandscape {
    		height: 78px;
    		width: 161px;
    		position: absolute;
    		top: 48px;
    		left: 26px;
    	}
     
    	#landscape2 {
    		background-image: url("../images/misc/landscaped2.png");
    		background-repeat: no-repeat;
    		height: 7px;
    		width: 179px;
    		position: absolute;
    		top: 46px;
    		left: 18px;
    		border: 0px;
    	}
     
    	#landscape3 {
    		background-image: url("../images/misc/landscaped3.png");
    		background-repeat: no-repeat;
    		height: 7px;
    		width: 179px;
    		position: absolute;
    		top: 121px;
    		left: 18px;
    		border: 0px;
    	}  
     
    }

    Likes: MoKaLux

    rar
    rar
    phones.rar
    936K
    +1 -1 (+1 / -0 ) Share on Facebook
  • SinisterSoftSinisterSoft Maintainer
    edited October 2
    Also in that last post are the images.

    This is the html (using bootstrap 4 + codeigniter) to show the phone's iframe.


    Likes: Apollo14, MoKaLux

    2019-10-02_21-41-25.png
    1582 x 136 - 17K
    +1 -1 (+2 / -0 ) Share on Facebook
  • MoKaLuxMoKaLux Member
    edited October 3
    Thank you for sharing your experience. You have a couple of very nice games and your website is very nice too!

    @SinisterSoft CAESAR is bot please kill it!

    Likes: SinisterSoft

    +1 -1 (+1 / -0 ) Share on Facebook
Sign In or Register to comment.