Warning: include(nectar/meta/meta-config.php): failed to open stream: No such file or directory in /home/fwpolice/public_html/wp-content/themes/salient/functions.php on line 2326

Warning: include(nectar/meta/meta-config.php): failed to open stream: No such file or directory in /home/fwpolice/public_html/wp-content/themes/salient/functions.php on line 2326

Warning: include(): Failed opening 'nectar/meta/meta-config.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/fwpolice/public_html/wp-content/themes/salient/functions.php on line 2326

Warning: Cannot modify header information - headers already sent by (output started at /home/fwpolice/public_html/wp-includes/user.php:1) in /home/fwpolice/public_html/wp-includes/feed-rss2.php on line 8
FWPolice http://fwpolice.com Serving the Community Tue, 10 Mar 2015 13:56:09 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.10 Technoid http://fwpolice.com/tutorials/fireworks-tut/technoid/ http://fwpolice.com/tutorials/fireworks-tut/technoid/#comments Tue, 10 Mar 2015 13:53:22 +0000 http://fwpolice.com/?p=771 In this tutorial I will teach you how to create the Technoid template header/navbar using Adobe Fireworks. Keep in mind that you can also follow this tutorial to replicate this design on Adobe Photoshop as well (but functions and function names will differ). This template does not follow a standard grid system. In fact, this does not follow any grid system at all. The objective of this tutorial is to teach you how to freehand a template without any grid-locks/systems.


The main focus on this template is the font used in the logo. I feel that the font is what brings the entire template together. All fonts used on this template are listed below.

Logo >  Font: Technoid  >  Download: http://www.dafont.com/technoid.font
Navigation >  Font: Trebuchet MS  >  Microsoft
Body >  Font: Arial  >  Microsoft

The Final Product

Let’s take a quick look at our final product. All the work we put into this design will be to create this  final product (or something close to it). Note that in this tutorial I will give you several options that may give your layout a different look (slightly different).


IMG1 – The final design without text-shadow. Click image for larger preview.


IMG2 – The final design with text-shadow. Click image for larger preview.

Letterpress Effect

In this design you have the option of taking advantage of text-shadow or, as it’s often referred, letterpress technique. What this effect does is it gives the viewer an impression that the text is embossed (or beveled depending on how you look at it) into the background. The use of this effect has taken the web design world in a rush and is one of my favorite effects. I am not going to talk about this in this tutorial as we already talked about it in detail in the Basics of Text Shadows and Smashing Magazine has a in-depth discussion on this topic.

General Rule of Shadows: A shadow, as talked about in our previous tutorials, are dependent on your light source. If your light source is on the top left, then the shadow your texts (and all other objects) casts will be to the bottom right, if to the top the the shadow has to be on the bottom and vice-versa.

For this template, we are using a light source from the TOP-center. This means that all shadows we cast will be directly down or in numbers 270 degrees.

When coding you can also apply the text shadow effect in CSS and thus cut-down the load time of your site. This is achieved by adding the following line to your text class:

text-shadow: 0 1px #FFFFFF;

The above code will add a 100% solid shadow to your text. But if you want to add some transparency, then you would use RGBA instead of the hex color code.

text-shadow: 0 1px rgba(255,255,255,0.9);

The three 255 numbers are the red, green and blue (RGB) numbers for white. The 0.9 is the alpha number or the amount of transparency we want in our color. If we set the alpha number to 1, it would produce a 100% solid color.

How to Make Technoid

Enough with the intro, lets start on this tutorial shall we?

Step 1: Open up Adobe Fireworks on your computer. Create a new documents by going to File > New or by pressing CTRL + N. When the new document dialog box opens, input the information below and press “OK”:

Step 2: Let’s create a new layer called “Header.” This header layer will contain our logo and search box. You can also include a inner layer for the navigation; however, for the sake of this tutorial, let’s make the navigation a layer of its own.

Step 3: We’re going to start this step off with creating the logo. The logo is quite simple. Let’s click on the Text icon from our tools panel and click anywhere on the screen to start writing. You can type any name you want, but for the sake of this template, I’ll put the name “Technoid Inc.”

On the properties panel select the following settings:

Font: Technoid
Font Style: Leave this blank
Font Size: 50
Font Color: #7F1F0C
Blend Mode: Normal
Leading: 120
X-Distance: 114
Y-Distance: 69
Anti-Aliasing Level: Smooth Anti-Alias

Now we need to add the beveled effect. To do this simply Create a new filter by pressing the + icon in the properties panel. From the drop menu select Shadow and Glow > Inner Shadow. Now insert the following settings.

Distance: 2
Color: #4E1407
Opacity: 65%
Softness: 2
Angle: 270

Step 4: The search bar is created using shapes and playing with the font-properties settings. Let’s start of by creating a new rectangle with the following settings:

Width: 250
Height: 30
X-Distance: 830
Y-Distance: 79
Fill Color: #E7E7E7
Border Color: #CCCCCC
Stroke Category: 1-Pixel Soft
Roundness: 50%

Now duplicate the box. Right click on this layer and go to Arrange >> Send Backward (or simply hit CTRL + Down arrow). Move this down 1px and to the right 1px and change it’s border color to #FFFFFF. This will give it the beveled effect that you can also add to your texts.

Step 5: For the search text, select the text icon from the tools panel and click anywhere on the canvas. Type the word “SEARCH” in capitals with the following settings:

Font: Trebuchet MS
Font Style: Regular
Font Size: 16
Font Color: #999999
AV Kerning: 200
Align: Right
Leading: 120
X-Distance: 1000
Y-Distance: 84

If you like, you can apply the text-shadow effect to the text as well.

Step 6: Now create a new top layer called “Navigation.” Click the rectangle tool and create a rectangle with the following properties:

Width: 1000
Height: 50
X: 100
Y: 136
Fill Option: Linear
Fill Color 1: #EBEBEB
Fill Color 2: #D5D5D5
Edge: Anti-Alias
Border width: 1
Border color: #CACACA
Border type: 1-Pixel Solft
Roundness: 25%

Step 7: Create a similar rectangle with the following properties:

Width: 998
Height: 48
X: 101
Y: 137
Fill Color: none
Border width: 1
Border color: #FFFFFF
Border type: 1-Pixel Solft
Roundness: 25%

You can also accomplish something similar to this step by using the Inner Glow filter effect but it will not have the same outcome as for some strange reason Adobe Firefox will change your glow distance to 2 instead of the 1 you enter.

Step 7: Enter your navigation content. I have a few setup in the final preview above which you are more than welcomed to use. I used Trebuchet MS for the font, with #757575 for the regular link. I also added a letter spacing (AV) of 100. For the font hover, I used #7F1F0C for the font color. You can also add text-shadow effect described above.

Step 8: The link dividers are quite difficult to make. We’re going to start off by making 2 lines with the height of 46 and width of 1 (or 2 if you like). Place these two lines next to each other and group them. Yes it is important that you group them. Next go to Commands >> Creative >> Auto Vector Mask. Select the top right most option (circle with two manipulation hands) and hit apply. Once you do that, you will now have a nice fading effect from both top and bottom and a little form the sides (not too visible). You will also see green adjustment points. Using these green adjustment make your work box larger to remove any side items from being removed. That’s it you have your dividers.

Step 9: Below this box I used something called a shadow line. To create a shadow line, we must:

  1. First create an eclipse that is 800px wide and 20px high,
  2. Change the “Edge” in properties panel to Feather with an amount of 10,
  3. Flatten our shape by Right Click >> Flatten Selection (or CTRL + ALT + SHIFT + Z),
  4. Our shapes name should now change to Bitmap and we now have the ability to erase portions of it,
  5. And now from the tools menu select the Polygon Lasso tool and cut off 60-80% from the top of the shape (depending on how much shadow you want to cast). You can also use the punch

Position the shadow line at X: 189 and Y: 185 behind the navigation bar. Got the lazy-bug? Don’t worry we’ll help you out. Click here to get the shadow image.

http://fwpolice.com/tutorials/fireworks-tut/technoid/feed/ 0
Fluster Template http://fwpolice.com/coded/fluster/ http://fwpolice.com/coded/fluster/#comments Tue, 03 Mar 2015 15:27:29 +0000 http://fwpolice.com/?p=3738 Fluster is a single-page multi-purpose template designed to provide you with simple, elegant and up-to-date modern standard website. Fluster is built on a customized version of Bootstrap 3. It brings you all of Bootstraps features and more.

Layout Options

Fluster is designed to provide you with a easy to use, elegant website design. Here is a list of all the key features:

  • Bootstrap 3.0
  • Responsive layout
  • Easy to customize
  • Sky Mega Menu
  • Filter Thumbnail portfolio
  • Font-Awesome Icons Collection
  • 404 Error Page
  • Coming soon page


You can view the documentation for this template at http://kb.fwpolice.com/templates/fluster/

Demo Images

When viewing the theme demo you will see several photographic images used. These photos serve as example images only and are not included with your purchase. The photos used in the demos are purely for demonstration purposes, and are used to give you a functional preview of what the theme will look like once content has been added. You are responsible for adding your own thumbnail images. The photos used in our demos are licensed from multiple sources and are copyrighted by those respective parties. These photos should not be saved, copied or redistributed in any way.

http://fwpolice.com/coded/fluster/feed/ 4
Diamond Header http://fwpolice.com/tutorials/fireworks-tut/diamond-header/ http://fwpolice.com/tutorials/fireworks-tut/diamond-header/#comments Wed, 25 Feb 2015 20:21:54 +0000 http://fwpolice.com/?p=3719 Today we are going to take a look at a simple diamond header you can use in your design. The steps to create this in Fireworks and other software are very simple; and now with CSS3, coding is too. Today we will teach you how to create this in both Fireworks and using CSS. We are using the beautiful Lato font in the demos but you can use any font you like.

The Design

Using shapes with Fireworks is very easy. In this tutorial we will take advantage of the scale tool. Let’s get started:

  1. Setup your canvas. In this case we are using 910 x 350 px.
  2. Grab your favorite image and and adjust to your liking. We grabbed one from Unsplash.com.
  3. Click away from your canvas and you should now see the ability to change the canvas size. We are going to click “Canvas Size…” and press “OK” in the dialog. This will resize the background image so that we are no longer dealing with a large image or a massive file size.
  4. Click on the rectangle tool and draw out a rectangle that is 950 x 600 px long. Change color to F5B33C, and set the opacity to 85%.
  5. Click on the scale tool and rotate the rectangle 40 or 45 degrees. Hold SHIFT to get more accurate rotation. You can also use the Numeric Transform tool to rotate (Modify > Transform > Numeric Transform).
  6. Adjust the rectangle to your liking or mimic our adjustment in the preview.
  7. Using the text tool, we are going to add our text.
    1. Text 1: “It’s quick & easy to”
      • Font-weight: medium
      • Color: #FFFFFF
    2. Text 2: “Setup a New Font Today”
      • Font-weight: Regular
      • Color: #444444
    3. Text 3: “The Google Fonts API will generate the necessary browser-specific CSS to use the fonts.”
      • Font-weight: Light
      • Color: #444444
  8. Next using the rectangle tool, we will be drawing out our button. Create a rectangle with a height of 40 px. You can adjust this to your liking. Change the color of the rectangle to #444444.
  9. Add text above your button and adjust it to your liking. #FFFFFF font color is used with medium font-weight.

There you have it. An attractive header you can use for your next project mockup. Now let’s get to the coding portion.

The Code

CSS3 provides us lots of new options that we did not have before. For this coding portion, we are going to take advantage of few of these functions that will make, what was once difficult, a breeze. Let’s get started.

  1. First let’s setup the HTML. It’s fairly straight forward. We have a main container class where we will add the background image and a container to hold together the text.
    <div class="header">
         <div class="message">
              <h4>It’s quick &amp; easy to</h4>
              <h1>Setup a New Font Today</h1>
              <p>The Google Fonts API will generate the necessary browser-specific CSS to use the fonts</p>
              <a href="#" class="btn">Get Started</a>
  2. This is where it gets exciting. Using CSS, we are first going to define the .header class. Here are we setting this container with relative position and we are going to hide all the overflow. We are also going to add our background image and padding that will also affect the positioning of our inner text.
    .header {
    position: relative;
    overflow: hidden;
    padding: 100px 0 100px 40px;
    background: url("https://unsplash.imgix.net/uploads/1413386993023a925afb4/4e769802?fit=crop&fm=jpg&h=700&q=75&w=1050") no-repeat 50% 0px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
  3. Next we are going to add the diamond background. To achieve this, we will take advantage of the :after psudo element. We are going to absolute position this element and position it relative to the parent container. We will also be using CSS to rotate the container and add some opacity as well.
    .header:after {
    content: "";
    position: absolute;
    top: 5%;
    left: -20%;
    width: 80%;
    height: 240%;
    background: #f5b33c;
    -webkit-transform: rotate(-40deg);
    -moz-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
    opacity: 0.85;
    filter: alpha(opacity=85);
  4. Now we tackle the text inside. You can adjust this to your liking. To save time, we will be keeping it simple in this tutorial.
    .message {
    float: left;
    text-align: left;
    position: relative;
    z-index: 2;
    color: #271c3e;
    width: 35.04274%;
    .message h4 {
    color: white;
    .message p {
    font-size: 16px;
    color: #271c3e;
    margin-bottom: 1.5em;
  5. Next we will style the button.
    .btn {
    background: #444;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 15px;
    letter-spacing: 1px;
  6. Lastly, you can add some responsive code using media queries. You can take a look at the CodePen below for the final code.

See the Pen Heading Shape by FWPolice (@fwpolice) on CodePen.

http://fwpolice.com/tutorials/fireworks-tut/diamond-header/feed/ 2
FWPolice Version 4.0 http://fwpolice.com/blog/fwpolice-version-4-0/ http://fwpolice.com/blog/fwpolice-version-4-0/#comments Sat, 14 Feb 2015 16:32:20 +0000 http://adobefireworks.org/?p=3697 Today we are happy to release version 4 of FWPolice. Over the years we have dedicated our time and effort in sharing resources for the wonderful Adobe Fireworks software. Last year Adobe has shocked us and the world by stopping the development of our favorite interface editor. Eventually several designers moved over from Fireworks to other tools such as Sketch, Illustrator and Gravit. But that doesn’t mean Fireworks is dead. In fact, there are developers such as Linus Lim (Phoenix Project) and Michel Bozgounov (Smashing Magazine) who work hard in continued advancement and use of Fireworks without Adobe. And we are going to continue to provide the community with amazing resources that Fireworks makes easy to create. But it doesn’t mean that’s all that we’re doing.

Starting this version, we are going to open our site to other software and coding resources. That means, eventually, we will be adding free graphics for Photoshop, Illustrator, InDesign, Sketch and Revit; along with high quality HTML/CSS/PHP code bits (and even FREE fully coded templates). We already have line of few resources and tutorials that are ready for release within the next few weeks and we hope that our community will be helping us share more resources they have in the past.

We have made quite a bit of changes since the last version. From a new UI to a new WordPress framework, we have taken our old site and re-built it with our new initiative in mind. We hope to provide you with faster platform and a friendlier community.

FWPolice team has also changed. We have lost a few of the old members, but also welcomed a few wonderful ones too. Their talents range from Fireworks to Photoshop to Front-end and Backend development. With this team and this release of FWPolice, we can only wait and see what the future holds.

We don’t want to bore you with the little details. So take a look through the new site and tell us what you think. We hope to release a few resources in the coming weeks so stay tuned! And don’t forget to tell your friends and family.

http://fwpolice.com/blog/fwpolice-version-4-0/feed/ 1
FWPolice V 3.1 http://fwpolice.com/blog/fwpolice-v-3-1/ http://fwpolice.com/blog/fwpolice-v-3-1/#comments Sun, 08 Sep 2013 18:02:10 +0000 http://fwpolice.com/?p=3211 Today we have begun work on a series of updates to our website. This set of updates will take place for the next few weeks to help improve the user interface and experience of our visitors. Unlike our previous updates, we chose to go with a progressive update method to allow our visitors feedback as we go ahead and consistently improve FWPolice.com. Read below for notes on our updates.

Version 3.1.1

  • Improvement to the header
    • New header framework
    • New background style
    • Logo has been updated
    • Navigation has been updated (fixed the hover bug)
  • Improvement to footer
    • New background style
    • Switched to 3 column system
    • Switched to ThemeBeans Twitter feed plugin

Please share your feedbacks on portions of our site we can improve on.

http://fwpolice.com/blog/fwpolice-v-3-1/feed/ 0
Basic Contact Form http://fwpolice.com/tutorials/coding/basic-contact-form/ http://fwpolice.com/tutorials/coding/basic-contact-form/#comments Fri, 09 Aug 2013 20:17:41 +0000 http://fwpolice.com/?p=3057 For any website having a decent contact form is very important. With hundreds of structured contact forms out there, we barely get a chance to really make the form the way we want. As a designer or a developer, having that freedom is very important because we want to make masterpieces that define who we are and leave traces of ourselves. To help you with that, here is an idiots guide (I’m not calling you an idiot, just describing how simple this tutorial is) to creating a simple php contact form.

Getting Started

Before we even begin, we need to first decide what we want in the contact form. A general contact form has an input field for the senders name, e-mail, website, subject and a text area. Some even have drop-down options for subject field or even to select the priority level of the message you are sending. Once you decide what you want, we can get started.

The PHP processing file

This is a very important file. This php file will be the mastermind in sending/submitting the forms. Let’s call this file process.php. Many would call this the mail.php but why really? The main purpose of this file is to process the submitted information right? So why not name it properly. But if you really like, you can call it whatever you wish.

Now let’s start with the must have for any php file <?php and ?>. In this we will enter the information for all form fields we will have

//Collecting Basic Information
$name = $_POST['name'];
$email = $_POST['email'];
$website= $_POST['website'];
$subject= $_POST['subject'];
$message= $_POST['message'];

//The Form Content
$formcontent = "From: $name n E-Mail: $email n Web-Site: $website n Subject: $subject n Message: $message";

//Who is this going to
$recipient = "you@domain.com";

//Mail Subject
$mailheader = "A Message From $name rn";
mail($recipient,$subject,$formcontent,$mailheader) or die ("Error Processing Mail!");

//Message Sent Notice
echo "Thank you for contacting me. Your Message has been submitted successfully";

The content is quite self explanatory but for those that do not understand here’s a brief explanation. At first what we did was get the data from the input field (in this case the posted data). Like I mentioned before, you can always have dropdown options. Dropdowns, luckily, are processed the same way as any input field:

$dropdown = $_POST['dropdown'];

You can also have radio buttons and check buttons for “I agree to the terms and conditions” fields. Next we took that data and compiled it in a format that we would like to see when we receive the email. Next we decided who the recipient is. So please do replace you@domain.com with your correct email. Next we went ahead and assigned a custom message header respectively named $mailheader. We always want a message header that is friendly, so why not make it our self right? For those who have more than website in which they have a contact form, I would recommend you put the web-site’s name at the beginning instead of “A Message From.” It makes it a lot easier to keep track of where the message is coming from. The $mailis the main process that handles sending the information. Now for the grand finale, the thank you message. When a guest doesn’t know that their message has been submitted, they will 87% of the time re-submit the form (87 is a number from the top of my head that I think more than likely fits this case). You can always use javascirpt re-direct or place a small link to take the visitor back to the previous page.

The Form

Here is the part where you have actual freedom to customize. Thanks to the invention of CSS and (I hate to admit it) Tables, we have been able to customize the look and feel of forms for years. Now primarily using CSS, forms come in many styles, colors and even shapes. Yes I said it shapes. You can check out the styles by simply searching our best friend: Google. I’m not going to waste your time explaining how you can customize your fields, so instead I’ll link you to HTMLForums. Here is a basic look at non-styled form for our simple contact form.

<form action="process.php" method="POST">
<label for="name">Your Name:</label>

<input id="name" title="Type you name" type="text" name="name" />

<label for="email">Your E-Mail:</label>

<input id="email" title="Type in you website" type="text" name="email" />

<label for="website">Your Website:</label>

<input id="website" title="Type in you website" type="text" name="website" />

<label for="subject">Your Website:</label>

<input id="subject" title="Type in you website" type="text" name="subject" />

<label for="dropdown">DropDown</label>
<select name="dropdown"> <option value="Support">Support Department</option></select>
<select name="dropdown"><option value="HTML">HTML Help</option></select>
<select name="dropdown"><option value="Beer">Buy Me Beer</option></select>

<label for="message">Your Message</label>

<textarea name="message" rows="6" cols="25"></textarea>

<input type="submit" value="Send" /><input type="reset" value="Clear" />


Template Contact Form

There are a number of you that requested a php processor file for the contact form. Here is a simple contact form that you can easily integrate to with the Catharsis theme.


//Retrieve form data. 
//GET - user submitted data using AJAX
//POST - in case user does not support javascript, we'll use POST instead
$name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
$website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];
$message= ($_GET['message']) ?$_GET['message'] : $_POST['message'];

//flag to indicate which method it uses. If POST set it to 1
if ($_POST) $post=1;

//Simple server side validation for POST data, of course, you should validate the email
if (!$name) $errors[count($errors)] = 'Please enter your name.';
if (!$email) $errors[count($errors)] = 'Please enter your email.'; 
if (!$message) $errors[count($errors)] = 'Please enter your comment.'; 

//if the errors array is empty, send the mail
if (!$errors) {

	$to = 'sampleperson@gmail.com';	 // <--------- change your email here
	$from = $name . ' <' . $email . '>';

	//subject and the html message
	$subject = 'Message from ' . $name;	
	$message = '
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	<html xmlns="http://www.w3.org/1999/xhtml">
		<tr><td>Name</td><td>' . $name . '</td></tr>
		<tr><td>Email</td><td>' . $email . '</td></tr>
		<tr><td>Message</td><td>' . nl2br($comment) . '</td></tr>

	//send the mail
	$result = sendmail($to, $subject, $message, $from);

	//if POST was used, display the message straight away
	if ($_POST) {
		if ($result) echo 'Thank you! I have received your message.';
		else echo 'Sorry, unexpected error. Please try again later';

	//else if GET was used, return the boolean value so that 
	//ajax script can react accordingly
	//1 means success, 0 means failed
	} else {
		echo $result;	

//if the errors array has values
} else {
	//display the errors message
	for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
	echo '<a href="contact.html">Back</a>';

//Simple mail function with HTML header
function sendmail($to, $subject, $message, $from) {
	$headers = "MIME-Version: 1.0" . "\r\n";
	$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
	$headers .= 'From: ' . $from . "\r\n";

	$result = mail($to,$subject,$message,$headers);

	if ($result) return 1;
	else return 0;


Call this template comment.php or processor.php

Next open up the contact page. Find

<form action="#" method="post" name="contact_form">

Change this to:

<form action="#"  method="post" action="contact.php" name="contact_form">

Note that the contact.php must match the name and path of the php processor file. Also make sure that all fields are properly named as in the processor file.

http://fwpolice.com/tutorials/coding/basic-contact-form/feed/ 1
Sticker Icons http://fwpolice.com/fireworks/vectors/sticker-icons/ http://fwpolice.com/fireworks/vectors/sticker-icons/#comments Sat, 25 May 2013 16:27:36 +0000 http://fwpolice.com/?p=3189 A great feature of Adobe Fireworks is the ability of being able to create complex shapes with ease. With most graphics software, you can either do basic shapes, and need to open a separate program to do high quality complex shapes. But Fireworks eased that burden by bringing such feature to a all-in-one web mockup tool. Here is a set of three icons created using Fireworks path tool. Using shadows and additional layer, we are able to convert a standard icon to have a hovering sticker/coaster effect.

http://fwpolice.com/fireworks/vectors/sticker-icons/feed/ 1
Farewell Fireworks http://fwpolice.com/blog/farewell-fireworks/ http://fwpolice.com/blog/farewell-fireworks/#comments Mon, 06 May 2013 21:46:15 +0000 http://fwpolice.com/?p=3178 It’s a very sad day for the Adobe Fireworks community. As today Adobe has announced that it will no longer be creating a new version of the software. Here is a copy of the announcement in case any of you missed it:

Today at the MAX conference we announced the latest generation of our creative tools now known as CC including Photoshop CC, Dreamweaver CC, Flash Professional CC, Edge Animate CC, and many others. As you may have noticed this announcement did not include updates to Fireworks CS6.

Over the last couple of years, there has been an increasing amount of overlap in the functionality between Fireworks and both existing and new programs like Photoshop, Illustrator, and Edge Reflow. At the same time we have shifted to focus our engineering teams on building smaller, more modular, tools and services for specific tasks in web design. Due to this overlap and as well as our change in our product development focus, we have decided not to update Fireworks to CC and instead will focus on developing new tools to meet our customers needs.

While we are not planning further feature development for Fireworks, we will continue to sell Fireworks CS6 as well as make it available as part of the Creative Cloud. We will provide security updates as necessary and may provide bug fixes. We plan to update Fireworks to support the next major releases of both Mac OS X and Windows. As more specific details on the next version of Windows and Mac OS X are made available, we may adjust these plans.

We understand that Fireworks has one of the most passionate communities on the web, and that this change will be difficult to accept. Our goal in refocusing our development efforts is to build a new-generation of task focused tools that enable our customers to create great web content.

My major question to Adobe is, will you make this an Open Source software, so that we the community can continue to create updates?

Just because Adobe quit, doesn’t mean we wont be around.

We will continue to provide tutorials and tweeting about cool things you can do with Fireworks. In fact, we might even expand our horizons with more Codes and teach you how to go beyond the mock-up.


Are you willing to call quits on Fireworks just because Adobe has? Share your feedback below.


Update May 6, 2013

There is a petition to make Adobe Fireworks open source. You can sign the petition by clicking the button below.

Button Text


http://fwpolice.com/blog/farewell-fireworks/feed/ 15
Simply.Me Personal Portfolio http://fwpolice.com/premium/simply-me-personal-portfolio/ http://fwpolice.com/premium/simply-me-personal-portfolio/#comments Sun, 28 Apr 2013 16:50:48 +0000 http://fwpolice.com/?p=3162 Introduction

Simply.Me is a single-page style personal template designed to provide the user with a simple, elegant and up-to modern standard personal website. Built on Twitter Bootstrap, Simply.Me comes with all the framework’s features customized for this specific template.

Key Features

Simply.Me is designed to provide you with a personal porfolio website. Here is a list of all the key features:

• Bootstrap
• Responsive layout
• Resume Template (http://demo.fwpolice.com/simplyme/resume.html)
• Easy to customize
• WordPress Ready
• Large collection of background patterns
• Flex Slider
• Customized Bootstrap Carousel slider
• Adaptive Thumbnail portfolio
• Font-Awesome Icons Collection
• Animate.css Animations
• Social Sprites Icons

File Support

If you require any support, please post in the comment section or look in the “Thank You.pdf” file included in the archive.

Demo Images

This template uses the beautiful FontAwesome font and Animate.CSS. The font comes with its own terms that states:

“The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0. A mention of Font Awesome – http://fortawesome.github.com/Font-Awesome in human-readable source code is considered acceptable attribution (most common on the web). If human readable source code is not available to the end user, a mention in an ‘About’ or ‘Credits’ screen is considered acceptable (most common in desktop or mobile software).”

File Update

Version 1.0 – 04/13/2013
• Initial release

http://fwpolice.com/premium/simply-me-personal-portfolio/feed/ 1
Simply 404 http://fwpolice.com/coded/simply-404/ http://fwpolice.com/coded/simply-404/#comments Sun, 28 Apr 2013 00:55:55 +0000 http://fwpolice.com/?p=3147 Simply 404 is a very simple, yet elegant 404 error page. The entire design is constructed of HTML5 and CSS and contains no images. It is designed to be light weight and easy to integrate into any projects.

. : : Key Features : : .

  • Coded in CSS3 & HTML only
  • Contains no images
  • Responsive design
  • Easy to customize
  • CSS transitions
  • Extended license available!
http://fwpolice.com/coded/simply-404/feed/ 1