S2C is more than PSD to HTML

Here in Creiden, and since the beginning, We always look to the clients’ perspective. Not just to get a full understanding of their needs and demands, but to provide and cover all the services they require. That is what drove us to launching one of our greatest projects; Sketch2Code. Sketch2Code is our newest project, created to end the headache of website development by making it easily possible, and affordable for anyone between a freelancer, agency, or a small-medium enterprise to have a fully customized website.

This is more than a PSD to HTML service.

Sketch2Code covers a wide spectrum of services that gives you the choice between the different ways websites can be developed. You can choose between the following services: PSD to HTML/WordPress Conversions: Offering Pixel-Perfect conversions, with a clean code structure. You can choose between three different packages, starting at $99. We also offer designs in case you don’t have your own design. WordPress or HTML Theme Customization: Pick the theme that you would like us to customize for your website. You can choose between our themes and get a 10% discount on the service fees, or any other WordPress theme. Website Customization: Have a general website that needs customization?. No problem at all. Our professional team can also handle your request In addition to all the basic features, like W3C validation, embracing all HTML5 features, cross browser compatibility, SEO compatibility, and more…..etc., Sketch2Code offers RTL support service in three different ways. You can either have your website in RTL languages, Create Multilingual websites, or include WPML plugin within your add-on features. We see Sketch2Code as a core unit in Creiden that will definitely comfort many clients through a wide field of services to cover all needs and demands, in addition to a Milestone payment policy that requires only 30% upfront payment. In other words, you won’t pay all costs until we deliver a part of the job, so take a quick visit to see of our work examples, and use the “SpringBreak ” coupon to get 20% discount.

start your first project now!

free avatar vectors

Looking for unique & free avatar vectors?

I bet you are! We all try to add some creativity in our designs and websites. That is what I put in mind when I created my previous freebies: 15 Islamic Vector Illustrations &  14 Flat Business Vector Icons

Today, I bring you a full set of free avatar vectors that varies between males and females features. Feel free to use the vectors for your personal or commercial purpose. You can use it in your blog, your website, your designs or any other. I did my  best to provide different faces and expressions for both genders to meet all your needs, so I wish they do. You will find PNG files for direct usage and also an illustrator file for ease of customization if you would like. Enjoy!

internal page


This work is licensed under a Creative Commons Attribution 4.0 International License. Did you like the set? then don’t forget to share it, so others can benefit as much as you did. Also, Suggest what should be our next freebie.


Following on with the previous post: 9 Free Hover Effects with CSS3 Transitions , I developed this Free WordPress image hover plugin. Simply, install it through an easy to use shortcode, as described below. Go ahead and download this freebie to give your WordPress images a unique style.




src:  Add your image link , preffered images to be square  --- {default: ""} 

size:  Write number to be the width and height for this image  --- {default: "250"}

overlay  style1 , style2 , none  --- {default: style1}

center_link  Add link for center icon  --- {default: ""}

center_animation  slide , scale  --- {default: slide}

center_icon  link , share  --- {default: link}

top_left_link  Add link for top left icon  --- {default: ""}

prettyphoto  Add image link or leave empty to be off  --- {default: off}


[cr_image src="http://creiden.com/crdn/wp-content/uploads/2014/10/8.jpg" overlay="style1" center_link="themes.creiden.com/circleflip/" center_animation="slide" center_icon="link"]

[cr_image src="http://creiden.com/crdn/wp-content/uploads/2014/10/8.jpg" overlay="style1" center_link="themes.creiden.com/circleflip/" center_animation="scale" center_icon="link"]

[cr_image src="http://creiden.com/crdn/wp-content/uploads/2014/10/8.jpg" overlay="style2" center_link="themes.creiden.com/circleflip/" center_animation="scale" center_icon="share" prettyphoto="http://creiden.com/crdn/wp-content/uploads/2014/10/8.jpg" top_left_link="themes.creiden.com/circleflip/"]
Image Hover Freebie

This image hover animation set is created with an intend to offer users, like me, smooth animation for their designs. As you would see in the live preview, the set has 2 overlay style and 3 buttons animations that are described in details below to guide you for ease of application. This is my first set of freebie, so I will appreciate your feedback, guys. Hope you like them.

Live Preview


Overlay Example 1 :

It’s a rectangle shape which separated to 2 triangles with different colors.

<li class="imgHover triangleScale style1">
 <img src="img.jpg"/>
.imgHover.triangleScale.style1:before, .imgHover.triangleScale.style1:after {
 border-width: 250px; /* Image Width */


Overlay Example 2 :

It’s the same rectangle shape, but shifted from the side by 20px.

<li class="imgHover triangleScale style2">
 <img src="img.jpg"/>
.imgHover.triangleScale.style2:before, .imgHover.triangleScale.style2:after {
 border-width: 210px; /* Image Width - Shifted space * 2 */
.imgHover.triangleScale.style2:hover:before {
 left: 20px;
 top: 20px;
.imgHover.triangleScale.style2:hover:after {
 right: 20px;
 bottom: 20px;


Button Example 1 :

This button starts from the upper right corner to the center of the image.

<li class="imgHover">
 <img src="img.jpg"/>
 <a href="#" class="cornerLink"><span class="cr-icon-link"></span></a>


Button Example 2 :

This button will scale from 0 to 1 in the center of the image.

<li class="imgHover">
 <img src="img.jpg"/>
 <a href="#" class="scaleLink"><span class="cr-icon-link"></span></a>


Button Example 3 :

This is 2 buttons triangle shaped, in 2 opposite corner.

<li class="imgHover">
 <img src="img.jpg"/>
 <a href="#" class="topLeftLink"><span class="cr-icon-link"></span></a>
 <a href="#" class="bottomRightLink"><span class="cr-icon-search"></span></a>
No matter how many years you’ve worked as a designer with Photoshop being your workflow’s main tool, you will always be surprised by the number of little hidden features that would vastly boost your workflow and make your life easier. I have been working on Photoshop for about 11 years now, and I am still discovering new features every now and then.


1- Collapse/Expand all layers groups at once.

Don’t know when this feature was added; maybe years ago. But it never came across my mind that it would exist. You face it many times when you are working on a large project PSD which have many layers and groups, and you want to collapse all the groups/effects all at once:



Expand/Collapse all layer groups nested within the current one:

Alt+click the arrow next to the group. You will use this when you want to expand/collapse nested groups without affecting other layers that lay outside the clicked group.


To open/close all layer groups: CTRL+ALT+Click any top level group to expand/collapse all file groups (even nested). This will help you see the final bird-view structure of your file.










2- Shapes extra options

Ever wanted to create a shape like this without any added shapes?


When you choose any shape from the tools bar on Photoshop a small Gear icon gear will appear above. Click on it and you will find some different options for each shape. For the line tool, it will contain adding arrows and so on.

line       hexagon


3- Convert text layers either to Paragraph text or to Point text

It has been there for a while I guess. Photoshop allows 2 types of text layers; either the Paragraph text that you create by dragging the type tool OR the Point text by just clicking while the type tool is selected.


paragraph         point


Each type of those has its usage. Photoshop allows you to change the type of a text layer after creating it. Right click on the text layer and choose “Convert to Paragraph/point”



4- Paste “Lorem Ipsum” in Photoshop

Nowadays, most designers use  “Lorem ipsum” generators to fill the content within their design areas. Usually you open a website, Chrome Extension or even a text file you created to copy and paste text into your design. Well, Photoshop made it easier for you. Just select your text layer, in the edit mode, open Type menu, you will find “Paste Lorem Ipsum” and let the magic happens.



There is a lot to learn while you go on working with Photoshop, but these four tips, I believe, are very critical to any designer. If you’re interested to learn more about these tips, you can watch this video, that was created by my fellows at Webucator.


Here in Creiden, we, designers, keep on searching for the tiniest tools that would save any web designer’s time to do it him/ her self. That’s how we come up with ideas for our sets of freebies. while searching, we found that the Islamic community is increasingly joining the web nowadays, so we thought about inspiring the designers of these websites. This time our set includes 15 incredible Islamic vector illustrations that would add a lot to the world of Islam on the web. Enjoy!


Pixel Perfect

fully customizable

This work is licensed under a Creative Commons Attribution 4.0 International License.
Did you like the set? then don’t forget to share it, so others can benefit as much as you did.


We keep on studying the field of web design and development to find out the most needs of designers that would help them through designing  websites. Previously, we found a need for eCommerce icons, so my talented teammate, Sara created a set of pretty awesome flat icons set for eCommerce use. Today we discovered another group of icons that you, designers, might need for your business website. Enjoy this set of 14 free flat business vector icons, and remember, a little comment with your opinion will definitely help me in my next set.


This work is licensed under a Creative Commons Attribution 4.0 International License.
Did you like the set? then don’t forget to share it, so others can benefit as much as you did.

Win Circle Flip for free

If you’ve read our latest blog article, then you’ve heard all about our latest wordpress theme on Themeforest. Circle Flip is our newest piece of creativity that gives you an exclusive opportunity to full demo access before buying the theme. Today we celebrate 100+ happy sales and an update that provides one click installation feature, and more of what will make you forget the headache of building a website through a clean website builder. As a result, we thought we should shift our enthusiasm to you. Join our competition to win a FREE version of Circle Flip Theme. All you have to do is click on the tweet button below and tweet the text as it appears to you.

This competition ended and the winner was announced on September 22nd. Congratulations to @DietrichMichael

Circle Flip

Did you ever notice that all brilliant things are made out of circular shapes?

Nasa, Mercedes-Benz, Timberland, Google Chrome, Pepsi, the Olympics symbol and even WordPress, all of them are having their designs based on circles, from their logos to the designs and products. It seemed to be a secret of success!

Circular designs have been some of the most popular trends especially in web design. A circle is timeless, simple and memorable. So, what about having your website based, not only on circles, but also Circles that Flip?

Circle Flip is the new creative, elegant, and user friendly corporate WordPress theme, which our team of developers and designers dedicated their time and effort to deliver you a set of features that satisfy your demand and exceed your expectations. One of the most amazing, exclusive options in Circle Flip is “Try It Before You Buy It!”  which gives you the opportunity to try the theme, modify in it, and preview these changes, before you even buy it.

The clean, responsive design of Circle Flip is following the flat trend, in addition to unique animations and techniques. The theme is fast, with WPML and RTL ready, and in this package you will find the theme WooCommerce ready which means that you can create your unique shop there.

Based on your continuous demand of customization, Circle Flip empowers you with a well documented, easy to use Theme Options. You can easily build the website you have in mind among the different styles of colors and fonts, provided. Set how your pages will look like in page settings, easily add sidebars, enjoy Creiden’s sliders central, and customize your website’s header, footer, site logo and more.

We seek to make website building easier for you, and through the content builder, you needn’t to be a code developer or a programmer to be able to modify in the theme. You will be dealing with a very simple user interface where you will totally control your website content. Simply drag and drop the elements that you want and resize them as well as editing their content in a very neat popup. To save time for you, you can easily type the name of the required element in the live search box instead of searching manually between many blocks.

Simply, Circle Flip is bringing you all the creativity and customization, along with uniqueness in one theme. Buy Circle Flip WordPress theme and Get Ready to be impressed!

We hardly believe that the core of progress is considering clients’ feedbacks, so don’t forget to leave us a comment below.

View theme