Microsoft "Expression Web" is now freely available for download!

What once used to cost quite a bit is now available for free - which makes MEW one of the few split view web editors available at no cost:

http://www.microsoft.com/expression/

Apparently, the only thing that differs from the full version is that there is no company support for the free product. However, there is a community forum that you can access from the link above; and many tutorial videos can be found on YouTube, here:

http://www.youtube.com/user/Expressionweb2?feature=watch

Also check out Microsoft "Expression Design" (now also free) which you can download from the link above as well.

:)

.................................................................................................................................  

blogspot template modification - shoezznutzz

http://shoeznutz.blogspot.com/

I indulged my love of weird shoes in order to make another template modification. ;-)

There isn't too much to tell with this one except that I like the menu on the bottom and worked quite a bit on getting that to sit right. The header text was created in photoshop, using layer styles. Although I am usually somewhat careful when it comes to colored typography, in this case it seemed to be a good choice since the site background and the design are both toned down enough for colored text to make a good contrast.

Something which has really added to the design here is the post recommendations widget which I was posting about a few days ago. And another thing which I put in here is a custom cursor, which I got from the free cursor site, which I posted about before here.

This one too started out from the picture window template, in this case the first one on the left. I just wanted to try something very simple and minimal to show the images. So, I changed the radius values and the background image URL's from the HTML editor, played around with fonts, type sizes, colors etc and that was pretty much it, outside of adding a border to the images. For which again, I used the CSS box on the Advanced Template Designer to put in this bit of code:

.post-body img {
padding: 12px;
background-color: #151515;
border: 1px solid $(image.border.color;
}

Download template and header visuals from here >>>

.................................................................................................................................

blogspot template modification - istanbul catz and dogs

http://istanbulcatz.blogspot.com/

A Flickr contact of mine named István Tóth takes the most wonderful Istanbul cat and dog photos. With his consent, I have now started a blog for them. Partly to provide tutorial material for the easy peasy page, but mainly because it is so much fun to do it! (great content = easy design, remember? ;-)

For this one I used the picture window template, the one in the middle with the red header. What I was looking for was something like the rounded rectangle background that goes underneath everything, including the header. Nice unification of design elements, that. The radiuses of the rectangle's corners were smaller than what I have here, so I looked for the word "radius" inside the HTML code and changed the values. Also, I replaced all of the background png files with my own stuff by doing a ctrl+F in the HTML editor for "png". Then as usual, I went to the Advanced Template Designer and changed the fonts, colors, etc from there.

Another thing which I used here is the code which Furkan found on Southern Speakers a few days ago, which allows you to have separate boxes for things you post on the same day.

There is one thing with this blog, which is that it is bi-lingual. Which means that in the posts I would like to somehow distinguish between Turkish and English. So, the English stuff gets some added code inside the HTML tab of the post editor. Nothing major - only one small line:

<span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: 17px; line-height: 1.8em;">english text</span>

The widgets got a custom treatment: They got a special shape, became wider, got a background color, etc. All of which I did from the CSS tab on the Advanced section of the Template Designer. And here is the code which I used for that, which you will need to apply to all the new widgets that you create:

#Gadget ID{
margin-top:20px;
margin-right:-15px;
margin-left:-5px;
padding: 15px;
background:#222222;
font-family:Arial;
font-style: normal;
font-size:13px;
text-align:left;
color: #888888;
border-radius: 20px;
}

I also added a border to the post images, again with the same CSS tab. And the code for that is this one, obviously you can change padding and color values as needed:

.post-body img {
  padding: 6px;
  background-color: #975858;
  border: 1px solid $(image.border.color;

There is a custom cursor on this as well. Those who would rather not have this will need to go into the code and remove the line which says
<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-7/cur671.cur), progress;}</style> 
and which comes just before
<b:skin><![CDATA[/*

And finally the header - where I tried something new: I placed the cat image (which is actually a part of the header) on the upper right hand corner in such a way that the header takes a curve around the post column. This was positioned as a separate image gadget, whose location I played around with using the CSS tab on the advanced designer. You can use your own image to replace what I have on the site. Create an image with a transparent background, save as a 24 bit png file and upload into the picture gadget.

The code for the placement of this is below, and please note how the margin values are huge big negative ones. This allows me to position the transparent png image above the header text, as well as the post, as a layer. Great! And I will certainly be experimenting with this feature a whole lot more:

#Image1{
margin-top:-100px;
margin-left:-44px;
}

And as for the header text, this was made with a layer style, however turned out to be way too strong in terms of color in the end. So, after I was sure of where everything was supposed to go, I merged the layers and colorized/desaturated the whole thing with the HSL palette and then saved this as a 24 bit PNG file with transparency.

Download template and photoshop file for the header here >>>

.................................................................................................................................

playing around with free vectors and photoshop layer modes

The original vector file is here >>>
And here's what happened to it:

Read all about it (and also see other versions) here >>>

Download the photoshop file from here >>>

.................................................................................................................................

how to replace a blogspot widget title with an image

From your dashboard, go to design and into Edit Html. Make sure that you have ticked the Expand Widget Templates checkbox on the top right. Now you have to find the widget ID of the widget title you wish to edit. To find the ID of the gadget you wish to modify, please read this previous post here.

For example, the widget id for my widget is Label1, you will find something similar to this code below:

<b:widget id='Label1' locked='false' title='Topics' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if> 

<--------------lots of data here that you don't need--------------------->
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Replace the data:title tag ( <data:title/> ) with the code below:

<img src="YOUR_TITLE_IMAGE_URL" alt="YOUR_GADGET_TITLE"/>

.................................................................................................................................

additional photoshop lens flare tips

If you are working with a dark, more or less solid image field, the duplicate layer > apply flare > layer mask trick seems to be the easiest way to go. However, what happens if you want to use the flare on a photograph with a lot of different tonal values? There is another way to do this and I figured I should talk about that one as well, in case some of you want to try it out: 

Create a new layer on top of your image, fill it with 50% gray, or lighter or darker. Apply the lens flare onto the middle of the gray layer. Then in the layer palette change the layer mode from normal to hard light, screen or exclusion - whichever works, this will depend upon the values of the underlying image - as will the value of the gray of the flare layer. Move around, see what happens around the edges (they may be visible), and if needed use curves or levels or brightness/contrast (or indeed, yet once again a good old layer mask) on the gray layer to blend everything together.

So, the whole thing involves a bit of experimenting, undo's and redo's, I'm afraid. But essentially that is how it works folks.

Open this photoshop file here >>> to get a clearer idea.

.................................................................................................................................

design: using photoshop plugins for website backgrounds and effects

geek.folk goes elegant ;-). This is to show you how to use photoshop plugins and filters to achieve effects on your background and header.

I didn't change much from the previous layout and even the glass buttons are still here, except that I applied a dark layer style to them this time.

On the background I used a plugin named Sinedots II, freely downloadable, courtesy of a very generous gentleman named Philipp Spoeth, who has been making this wonder available (PC only - ouch!) right here >>> for a very long time. Just place it in your plugins folder and the rest is fairly self-explanatory, although there are a few tutorials on it available on the download page as well. In this case I just applied the plugin onto the full canvas and then used a layer mask to delete the top and the bottom. Moved it up to where I wanted it to be, and that was that. In any case, this is such a beautiful filter that it would be kind of hard to go wrong with it no matter how you use it...

On the header, where I switched the font to Bauer Bodoni this time, I used the standard photoshop lens flare filter which is under Filters > Render. Now, here is the trick with that: It is actually quite difficult to get this to sit exactly where you want it to sit. What I do is, I create two layers in the same color, and then put the lens flare dead center in the middle of the top layer. Apply a gradient on a layer mask from all 4 sides  (Tip:  make sure you have the gradient colors going from solid black to transparent white, otherwise you will keep painting over what you are doing  )  then move, rotate, resize the flare to exactly where you would like it to be - which in my case is behind the header text so that I get a nice highlight there to offset the dark typography.

(Note: If I were to actually make such a site, I would place the flare on the background, together with the sinedots effect, so that the content slides over it as the viewer scrolls downward).

And you can see everything that I did in the photoshop file which you can download from here >>>.

.................................................................................................................................

playing with blogspot widgets (gadgets)

As we have talked in the class last week, it is possible to separately edit every widget, give them different backgrounds, alignments, borders, colors, fonts etc. Here is how you do it:

The "widget id" is the only thing you need to edit the widget, but first you need to find it of course. To find the ID of the gadget you wish to modify, please read this previous post here.

Now go into the HTML editor, into the CSS part and find the section entitled "Widgets", then scroll down to the end of the section, just above the part where "Posts" section starts. In other words search for this line:
* /Posts
----------------------------------------------- */
And then all you have to do is; add the code given below straight above this line. The word Label1 in the topmost line, which is highlighted in black, is what you replace with the ID that you have found in the way described in the above linked post.

#Label1{
margin-top:20px
padding-left: 5px;
background:#ddddd;
font-family:arial, sans-serif;
font-size:11px;
text-align:left;
color: #db4c46;
};

The styles I have used are just for example, you can use as many or as few as you wish.

.................................................................................................................................

backgrounds: one size fits all

Here is what to do if you want to have a background image that will automatically re-size itself according to the browser windows size (thus also for different screen resolutions).

First off be sure to get a nice large image around 16:9 ratio size having preferably 1900 px width, reduce its size (not in pixels, as in kbs) so it is not larger than 300-450 kbs(even this is too large but it will do).

Then upload it to someplace where you can have a direct link to it.

Finally go into "Edit HTML" from the design tab. Find "body {" in the css section. (just searching that quote without the quotes will get you there if you can't see it). It will most likely look something like this:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}
Now, replace this part;
background: $(body.background);
with this;
background: url(http://www.yoururl.com/your_image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
You should have something like this as the final result;
body {
  font: $(body.font);
  color: $(body.text.color);
  background: url(http://www.yoururl.com/your_image.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

This will work in most of the latest versions of known browsers.

.................................................................................................................................

design tutorial: clean body text in your posts

I have made some deliberately unaligned body text and taken several snapshots which I combined for a tutorial. Looks really ugly folks! :-P:

To get to the tutorial, please click on the image and read the annotations.

.................................................................................................................................

being "resource-ful": site layout with ready made visual components

Read all about it here ;-)

Get the photoshop file here:
http://www.citrinitas.com/easy-peasy/geek-folk.zip

.................................................................................................................................

design tutorial: aligning a header

Alignment (and also deliberate non-alignment) is one of the foremost principles of good graphic design since alignment is how one of the fundamental Gestalt principles, continuity works. In the previous post we were looking at visual continuity and alignment is very much a part of that as well.

HTML web design is done in two places: One of them is an image editor and the other one is an HTML editor. And we need to be able to switch back and forth between them and also be able to carry values from one to the other. Meaning that we often need to make things work together although they are located in different places while we are still working on them. So, we need to be able to visualize how things will look, even at a point where we cannot yet see them together as a whole system.

In terms of alignment the good news is that on an HTML website most things are aligned by default since the underlying structure is based upon a table, very much like an excel sheet, in fact. (Only exceptions are the elements that are made out of images which you import into the cells - such as the header!).

When you design a website you will usually start out in an image editor and then adjust the alignment of the table cells in the HTML editor according to what you initially did in the image editor. However, you can also work in reverse and start out with the HTML editor and go back to the image editor from there. And the really good news is that the template editor at blogspot makes it exceptionally easy to do so.

So, go to the template editor and temporarily put a black (or white - depending upon your template colors) image on the background. All black or white - a tiny square which you tile. Then go to the blog title gadget in Design and delete everything. We want the top, the header area to be completely blank, in other words. Now take a snapshot of the site and then open it in the image editor.

Place guides at the edges of the gadget lines (or whatever it is that you have on your site that needs to be taken into account for alignment purposes), the post lines, the text columns. Anything that you see that you think will be important when aligning things. Now start putting in the design elements of your header, always keeping an eye on the guides.

Below I am showing you a few examples, both good and bad. In all of them you will see the text both with the guides and without them to help make things even clearer:

The first one is made up of two long sentences for title and sub title, where the top one is aligned to the text of the left hand gadget column and the lines of the right hand column. And then additionally the blue letter 'P' is also aligned to the post column. The sub title aligns to the lines of the right hand gadget column but also to the text of the post column. I have used the text column for the left hand side since this is a much stronger element than the thin lines. On the right however it is better to align to the lines since the text column there is ragged on the right hand side and doesn't give you much to go by.

In the second one I am keeping the title as it is but I am now making a little paragraph out of the sub title which I am aligning to the post column as well.

In the third one I am taking the sub title and aligning it to the vertical stroke of the 'D' of the word design. So, in this case I am no longer looking at the template but at the relationships within the header itself. Except - I still have an eye on the template guides since I would not want for the sub title to get placed without a good relationship to the guides either. In this case this would be all about getting not too close to them! The trick with alignment is that it is perfectly OK to be unaligned provided that you are really and truly unaligned! The death sentence comes when you are close but not exact. When your placement is "ambiguous" in other words. As the following example will show you:

Here the trouble is that the placement of the sub title is completely arbitrary, of course.

However sometimes things can go wrong even with the best of intentions. In this one I did not place the sub title arbitrarily, I actually aligned it to the stem of the letter 'Y' in the word 'Easy'. Problem is that I was not paying attention to the guides of the template and so I ended up being way too close to the post guides, which is the much stronger element.

 (Tip:  Always align things to the strongest element between two that are closely situated, never the weaker one!  ) 

In the final example I am showing you the sub title placed in such a way that it is no longer close to any of the guides or the vertical strokes of the letters. And this works too since I am making an unambiguous statement here. It is when you get caught in the middle that things will go to hell... :-)

And finally - once you are done, crop your image to the exact size, which will be your outer guides and upload as header image.

Even with all of this hard work, you may still end up not getting it completely right. In that case help is also at hand within blogspot: Copy paste the following code into the CSS box inside the Advanced tab of the Template Editor and play with the value highlighted in black:

#header img {
margin-left: 0px;
}

 (Also remember:  If you want floating elements and not a box, close the eye of the background and all unwanted layers before you save as a 24 bit png.  ) 

.................................................................................................................................

design: creating visual continuity

Time for a design tutorial now! ;-)

We shall be doing this by examining the structure and visual continuity of a professionally designed website template called 'boomerang 3D' from http://www.dreamtemplate.com/

HTML websites have a big advantage in terms of visual continuity since the structure of a site (header / menu / content) inherently provide for this. (Read more on website structure here).

When we design something we are actually creating a system. Not something that is good looking in its separate components but something that works together as a whole. So, when we are putting together visual elements we should not be making random decisions but always be thinking about whether the elements that we are deciding upon will work with everything else that we put next to them. There may be nice things that we see or think of, but if they do not serve the structure of the whole page we simply bookmark them for possible usage later, in some new project, but leave them alone for now since they will not work with the whole system.

In graphic design this system is made up of type, images, shapes and colors. And the usage all of these 4 components should be consistent. As an example, if you are using rounded rectangle shapes in the header of your page there should be rounded rectangles elsewhere as well - maybe buttons, or post backgrounds. Your typography should consist of a small selection of fonts that work well together and your type should always align in the same way. Your images should reflect a common color scheme (like they could all be black & white, or all color, or all colorized) and also how you crop an image may be quite important: If you sometimes crop images like squares and at other times like vertical rectangles and then sometimes as horizontal rectangles, it may well end up becoming visually inconsistent.

Now let us look at 'boomerang 3D' a bit more closely:

The obvious place to start out with any graphic design work is typography: In terms of graphical hierarchy type is always the number 1 element since it actually conveys the "spoken" information, which is of course the most important thing. Here the visual continuity in which type has been used is obvious - one font only, everything aligned flush left. Always a title above the images, with a sub-title to follow and then the body text below the image. And even when there is no image (such as on the 'contact us' page at the bottom), the same principle has been applied: Again title, closely followed by a subtitle, then an empty space - and then the actual body text. 

However although type is very important, one of the first things that strikes me when I look at this template is the way in which how all of the images have been cropped to form long narrow horizontal rectangles. This usage is possibly the most important continuous visual element and it adds hugely to the effectiveness of this site.

But here is the really clever thing which was done here: These narrow images are actually a sub-system, or a mini version of the larger system into which they are embedded. If you look carefully you will see that the whole layout consists of long, narrow, horizontal rectangles, starting from the green band in the header at the top, down to the long and narrow menu at the bottom. Even the form on the "contact us" page has long narrow entry fields instead of the usual chunky ones. And then there are long bands of darker gray that break up the layout horizontally as well. And almost nowhere do we see a strong vertical break - except in one place, the "about us" page where the left column is set wide enough and there is also sufficient space between the two columns for this to become quite unobtrusive.

One seeming inconsistency might be the fact that the green blur is much broader on the homepage than on the rest of the site. This has been done so that the homepage differentiates itself from the rest, of course. However, in the end there is no real inconsistency anyway since the relationship that is lost in the height of the shape is more than made up through a color which is powerful enough to pull this off.

And speaking of color - fairly self evident: They use one strong color together with lots of grays and always full color images.

Very clever! Very effective! Very elegant!

.................................................................................................................................

online tutorials

Although I will of course try and show you as much as I know, you should not be limited to what I have to say but look at other sites for tips and tutorials also. There are quite a few good ones around, and here is a small selection:

Tripwire magazine's 160+ Webdesign Tutorials focuses on creating visual elements. There are a number of photoshop based tutorials which take you through the phases of creating things like buttons, dividers, menus etc. The page also takes you to even more photoshop tutorials on other sites. All very nicely explained, mostly with screenshots. Only glitsch is that you really do need to know some design fundamentals before you would know how/where to implement what they show you. However, in the upcoming weeks design basics is precisely what our class will focus upon and after that you will be able to get a lot of mileage out of these.

WebDesign Tutorials actually gives you much more than web design tutorials, it is a comprehensive site with tutorials covering a huge range of subjects from Maya 3D to Adobe InDesign, all of it going by name of software and mostly using videos to convey the content. Their HTML/CSS web tutorials can be found under the software name Dreamweaver. All in all, a really cool tutorial site!

quackit and W3Schools Online both work along the same principle, a try-it-yourself editor. W3 does give you a direct link for it on the home page, whereas on quackit the sub pages will take you there. As an example the CSS properties will lead you to the editor when you click on any of the properties. And on W3Schools things work very much the same way. Both are very user friendly and helpful domains which I use also.

Design Your Own Web is the tutorial site for a free HTML/CSS editor called Nvu, which you can download from their site as well.

2CreateAWebSite and How-to-Build-Websites both cover a whole range of topics for beginners, including tips on how to increase site traffic, basic structure, coding etc. Both quite useful.

.................................................................................................................................

lynda.com

lynda.com is one of the best (if not in fact the very best) software tutorial domains online. Lynda has been around for a very long time, is probably one of the pioneers of online software training. I learnt a lot of things hanging around Lynda many years ago. Today her site looks better than ever, with video tutorials covering every imaginable subject from 3D software to musical production to CSS. Although you can watch some of the videos for free, nowadays there is a monthly paid membership plan which gives you access to all of the content. Money well spent I would say.

So, this is one place that I would advise all of you to bookmark and take advantage of - not necessarily for this class maybe, but for software education in general. Especially the designers amongst you! And yes, even if it means that you pay a little for her services! She really is absolutely wonderful.

homework: template mods

OK people - question: When I was checking your homework in class last week, the ones that I saw had done absolutely nothing to their blogs. I am amazed! How could you possibly have resisted? Something that is so easy and so much fun? And that is in fact a righteous introduction to web design? Which is the class that you are taking?

I am putting my money where my mouth is and setting you an example now:
http://easypeasydesign1.blogspot.com/2011/03/modifying-template.html

Please go to the above link and look at the examples that I am showing you which have all been made  using a blogspot template, by simply changing the background images, making simple header images and replacing the default header with them, and then going to the template editor and choosing different layouts, widths and changing values from the advanced tab. No coding, no nothing! Except in very simple cases, such as adding a background image to a single post, which I was talking about in the entry just before this one. There are cases where some advanced CSS editing will be needed to tweak these into a perfect state but (with Selim's help) we will get to all of that when and if needed.

This is your homework now! grrr... I want to see some action on your blogs! And I will be even happier if you keep experimenting and take different screenshots and put them into posts. And furthermore, I would like you to keep on doing this - not only this one time, this week, but always! This is how you will get a sense of web design - not by sitting around and waiting for a miracle to happen, you know? And ooops - sorry, the miracle has actually already happened: You have a fully editable template, courtesy of blogspot, for free! And if that isn't a miracle, I don't know what is!

Here are a few good tips before you start to play around - so that you actually have elements to play around with:

 1) Add gadgets  - a nice text box, even two maybe. Links (find some stuff to link up!). Make different link boxes, for different categories.... 

 And please delete the default gadgets:  Absolutely no point in having a follower box on a brand new blog where you have no followers yet - or so few that it is kind of better to not show them at all, you know? Same for 'About Me'. This one is almost impossible to make look nice and aligned. So, get rid of it, for God's sakes! Make an 'About Me' page and put a nice big photo of yourself and some nice text. Easy peasy... And also 'Archives'. Again, too soon, you have only been around for 5 minutes - what archive?

 2) Labels  (which you can rename as 'Topics' or whatever you like: Now these will only happen once you start putting them at the bottom of the label box of a post. So, create a 'dummy post' (you can call it 'for labels' or something) and put a lot of labels in it. This will give you the list which you can then use as a gadget box. Similarly, add pages and use a page gadget. (The page menu on the top looks pretty awful in its default state and you cannot change it unless you re-code it, so for now I would stay away from that and go with a side gadget instead). You don't need to write anything in them yet, simply give them a name and write 'under construction'. 

And, again, absolutely no kidding guyz - this is now your homework! ;-) 

.................................................................................................................................

tutorial: making a big background image and/or seamless tiling

Note:  I found out since I wrote this post that pixlr (a free online editor) also has layer masks. Which means  that you can do the exact same thing that I am describing below over there as well. True, the mask works a bit differently, but it will take you no time at all to figure it all out. 

Photoshop tutorial only I'm afraid... :-\. I really tried to find a way of doing this which does not involve buying software but couldn't. The only good news is that photoshop elements, the vastly cheaper 'lite' version of photoshop, lets you use layer masks also it seems...

OK, so you found an image but it is smaller than 1920x1200. Here is what you do (and please click on the images to see all the instructions nice and large):

Open the image in photoshop. Double click on the image icon that you see on the layer palette. This will turn the background into a layer.

Next step: From the top menu, go to Image > Canvas Size. Make sure you place the little anchor square on the top left and then change the canvas size values to 1920 and 1200. Once you have done this you will see that the image is now sitting on the top left and you have a transparent background to the bottom and to the right. These transparent areas are what you need to fill.

Once you have the canvas size in place, drag the layer onto the little page icon at the bottom of the Layer palette and duplicate it. Next, go to the top menu Edit > Transform > Flip Horizontal. Then, holding down the shift key (very important this!) drag the top layer to the right. Photoshop will give you a tiny 'stop' when you hit the document border and this is exactly where you stop if you want an image is perfectly symmetrical and can also be tiled.

Next, you go back to the top menu and go to Layer > Add Layer Mask > Reveal All and add a layer mask. (You will see the layer mask icon appear next to the image icon on the layer palette after you have done this). Then you go to the gradient tool in the tool box. Make sure from the tool options palette that you have the linear gradient, going from black to transparent. Then, again holding down the shift key, give the layer a few soft horizontal strokes, until everything is nicely blended.

Remove the layer mask by going back to the top menu, Layer > Remove Layer Mask > Apply.

Merge the two layers into one by using the layer palette (tiny arrow on the top right will take you there). However, do not Flatten Image, but Merge Visible!

Then duplicate the merged layer (again) and this time flip it vertically by going (again) to Edit > Transform > Flip Vertical. Move the layer down, until you get the tiny 'stop'. Repeat all steps above with the layer mask, except that this time you stroke vertically, still holding down the shift key.

And there you have it. This is now exactly the right size and is also tile-able, since it is symmetrical as well. All you need to do now is to save it in a web format. File > Save for Web > Jpeg or whatever and you are done! 

 (Tip:  If you upload a background image into blogspot via the template editor, it has to be below 300KB. So, check this as you are saving from photoshop.  ) 

................................................................................................................................