Archive for Tips and Tricks

08 Jun 2017

Image Masking in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Web Design

Masking has many different meanings, but is commonly used when describing something that is disguised or concealed. When used in EverWeb, masking is used to hide, or obscure, part of an image.

Masking is useful as you can display just the part of the image you want, without having to crop, or edit, the image itself. Masking keeps the original image intact so it can be used again in your Project. Having one image that you can ‘repurpose’ keeps your Project file size down as you don’t have to have multiple images of roughly the same image in your Project.

Masking and Unmasking Images
EverWeb’s Masking feature is accessed either from the Toolbar or from the Format-> Mask menu. If you have an image selected that has already been masked, the Toolbar button will be called ‘Unmask’. Additionally, the Format menu makes the ‘Unmask’ option available. If you prefer, you can use the Shift+Cmd+M keyboard shortcut to quickly unmask a selected masked object (Note that there is no equivalent shortcut key for Mask.)

Where and When Masking Can Be Applied
Masking is only available for images. You can’t mask other objects such as shapes, text, buttons etc. You can use masking in the Blog Editor Preview window if the image has been drag and dropped into the the Blog Post Preview Window. You can’t use masking if you have have drag and dropped images into the Blog Post Editor Window.

Applying the Masking
To mask an image, drag and drop the image you want on to the Editor Window if you have not done so already, either from its original source, or from the Assets List. All images in your Project should be optimized as best as possible before bringing them in to EverWeb. The image file size should be such that it doesn’t adversely slow page loading times and the file name itself should describe the image itself as this is better for your SEO.

Once the image is on the page, size and position it as desired. You can apply Shape Options to the image e.g. stroke and picture frame borders as these effects will generally be maintained when masking the image. However, it’s always advisable ti check the image once you have masked it to see if you get the effect you wanted. To apply the mask, select the image and click on the ‘Mask’ button in the Toolbar or using the Format-> Mask menu option.

The Editor Window will now have a grey semi-transparant ‘mask’ over it except for a square ‘window’ area in the center that you can see through on to part of the image underneath. This ‘unmasked’ area has a dashed line around it.

Moving and Resizing the Selected Image
When you apply the mask, the underlying image still retains its grab handles. This means that you can still manipulate the image as usual e.g. you can resize and reposition the image, apply Shape Options etc. To move the underlying image, click and hold the mouse button down whilst dragging the image to where you want it. Make sure that you don’t click inside the unmasked area itself or outside of the image’s grab handles.

Moving the Unmasked Area
To move the unmasked area over the top of the masked image, click and hold the centre of the unmasked area and drag and drop it to the desired location. When you have dropped the unmasked area in to place you will see its grab handles again so you can resize the area if you want.

Resizing The Unmasked Area
If you want to resize the unmasked area but don’t see any grab handles around it, click once inside the unmasked area. The grab handles will appear. Resize the unmasked area to reveal as much, or as little, of the image as you want.

Finishing The Masking
When you have finished positioning and sizing the mask, click on an area outside the image. The semi-transparent grey mask will disappear. The only part of the image you’ll see is the area you masked, the rest of the image will not be visible.

Masking The Same Image More Than Once
You may want to mask different parts of the same image. Once you have brought the image in to EverWeb, it is available in the Assets List so to reuse the image a second time, just drag and drop it from the Assets List on to your page. You do not need to drag and drop it again from the original source location.

Removing The Masking
Whilst there’s no visible indicator to show if an image has already been masked, you can easily find out by selecting the image and looking at the Mask button in the Toolbar. If it shows ‘Unmask’ then the selected image is currently masked. To remove the mask simply click on the ‘Unmask’ button. The whole image becomes visible again.

What Happens If The Mask Is Wrong?
If you have not masked the image how you wanted it, just reapply the mask. Additionally, it’s best not to use ‘Undo’ or ‘Redo’ commands as it may lead to unexpected results.

Masking is a handy feature, saving time, effort and Project file space! It’s worthwhile becoming familiar with how it works.

As always, if you have a question about this blog, feel free to comment in the Comments Section below!

11 May 2017

Easily Move & Resize Objects in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Web Design

If you use EverWeb version 2.1 or higher, you may not have discovered a couple of new, really useful features for selecting, moving and resizing objects in the Editor Window. These new features save you time and effort, as manipulating objects will not affect other objects on the page you’re working on. So you can work more quickly, more efficiently and with fewer mistakes.

Here’s a walkthrough of these super new features!

  1. Moving objects that are partially,or completely, covered by other objects
  2. When designing web pages, you may find that you have objects such as shapes or images that overlap, or cover, most of another object. That’s probably because your design requires this, or that doing so solves a particular page design issue. Whatever the reason, there may be times where you want to change your design which requires you to move an object out from underneath a pile of others. Like playing ‘Jack Straws’ you want to take one object out without disturbing the rest.

    Before EverWeb version 2.1, the tricky part would be keeping the object you wanted to move selected. Once you selected the object, it would deselect when clicked on to move it. The only way round this was to select and move the objects on top of it out of the way first then put them back later. That takes time and is frustrating and can lead to your page design becoming unnecessarily disrupted.

    With EverWeb 2.1 or higher, things are a lot better. First select the object that you want to move. The best way to do this is to click on the overlapping area of an object that covers the one you want selected. When you do this the object on top is selected. Now right (secondary) click to bring up the menu of options. At the bottom of the list is ‘Pick Layer’. When you mouse over this menu option you will see all of the objects at the location that you clicked on. Choose the object that you want to select i.e. the one that is under the overlapping object.

    You should see the object beneath the overlapping object is now selected. Next hold down the Command+Option Keys and drag the selected object out from under the rest. That’s all there is to it!

  3. Moving objects up or down the page without disrupting the page layout
  4. The second keyboard short cut enables you to move objects down (or up) your page without the whole page layout needing to be reorganised e.g. you may want to insert an Image Slider or YouTube Video widget in to the middle of your page. To create the space for the widget, you will need to move some of the page content down en masse. You could select all of the objects then move them but this often leads to some objects being left behind. To solve this problem just use the shortcut instead.

    First select an object that’s at the place where you want to open up some space. The object should be one that you want moved down the page. When selecting the object, hold down the Cmd+Shift keys at the same time. With these keys held down, drag the object down the page. As you do this, all objects underneath it will also be dragged down the page in synch. Release the mouse and keyboard keys to finish.

    Note that it’s the selected object and those below it that get moved down. If you have other objects on the same (horizontal) level as the selected object, they will not move down.

    This is also a great option if you have too much space and need to drag page contents up the page en masse and in synch!

  5. Resizing an object without disrupting the page layout
  6. There may be times when you want to resize an object and want all of the objects below it to move down, or up, the page as you resize it. For example, you have a full width rectangle containing text. You want to add more text but need to size the rectangle so it is large enough to contain the extra text. In this instance select the rectangle, press the Cmd+Shift keys (i.e. the same keys as in the last example) and resize the rectangle using one of its grab handles. You’ll notice that all content below the rectangle moves down in synch.

Moving and resizing objects around your page becomes just became incredibly easy and effective using these simple keyboard shortcuts!

03 May 2017

Finding the Distance Between Objects in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials

The latest release of EverWeb, version 2.2, adds a simple, but great, feature that makes it easy for you to find the distance between two or more objects on a web page just by using a keyboard shortcut. Finding how far objects are apart from each other can help you achieve complete accuracy when placing objects in your page design. Using the new ‘distance to objects’ feature does this with a quick, easy visual reference right in the Editor window.

When designing your web pages you probably use the Arrange-> Distribute menu options to evenly space objects, such as groups of images, shapes, text boxes, social media buttons etc., either horizontally or vertically. That’s fine, but there may be times where you have a different scenario that means this approach will not work, or is more time consuming to achieve e.g. on your page you have a text box, or Heading Tags widget, that is used for a paragraph title. Underneath this is text box containing some text content relating to the paragraph title. Beneath this are two more title/paragraph content sections.

Finding the distance between objects

As you can see here, the distance between the end of the first paragraph and second title is less than for the end of the second paragraph and the third title.

In the above screenshot, you can see that the Heading Tags widgets and Text Boxes have just been copied and pasted in to the page, so the distance between the end of the first paragraph and the second title is different from the distance between the end of the second paragraph and the third title. To make sure that the distance between the end of the paragraphs and the next title is always the same, is where the new distance between objects feature comes in to its own. It’s easier and quicker to check the distances with a shortcut rather than by using the Metrics Inspector.

Finding the Distance Between Objects

  1. First select the source object. This is the object that you want to know how far from other objects it is.
  2. Next hold the Alt (Option) key down on your keyboard.
  3. Mouse over to other ‘target’ objects on the page.
  4. You will see horizontal and/or vertical lines displayed between the source and target objects. The distance between the source and target objects is displayed in pixels.
  5. To finish, release the Alt (option) key.

The screenshot below shows the source paragraph selected with the mouse hovering over the target object.

The distance between objects feature in action.

An Extra Feature!
With the distance between object lines displayed, release the Alt (Option) key and take your hand off the mouse or trackpad. You’ll notice that the distance is still shown on screen. Now if you use the arrow keys on your keyboard, you can move the selected object and see the distance change as you do so. This is really handy when you just need to nudge a shape a few pixels. Remember though that this only works using the keys on your keyboard.

Remember as well that when you select an object then press and hold down the Alt (Option) key, you can mouse over anywhere in the Editor Window. Also, be smart when using this feature, for example, if you have three paragraphs and you want to know the distance between the each paragraph, select the second (middle) paragraph and mouse over the first and third paragraphs so you can quickly see the distance between the second and first, and second and third paragraphs.

Next time…

The new ‘distance between objects’ feature comes hot on the heels of a couple of other recently introduced keyboard shortcuts. Our next blog will take you through moving objects easily around your page whilst retaining the page content layout.

If you have any questions or comments, please let us know in the Comments below!

13 Apr 2017

Creating Animation Effects in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Web Design, Widgets

The new animation effects in EverWeb version 2.2 are great for bringing your web pages to life. The effects can be used to highlight areas of your web page that you want your visitors to focus on – essentially creating ‘Calls To Action’. EverWeb’s animation effects can also be used to ‘tell a story’ whereby you trigger effects in sequence to produce a flow of action for your visitor to follow.

Creating an Animation Effect
Animation effects are added to objects. You can animate text boxes, shapes, images and most widgets. The RSS Feed, Image Gallery and blog widgets used for blog posts, blog main and archive cannot be animated.

To animate an object in Everweb

  1. First select the object you want, then go to the Shape Options Tab in the Inspector Window.
  2. Note that animations can be applied to more than one object at a time and even to grouped objects
  3. Once you have selected your object(s), tick the box in the ‘Animation’ section of the Shape Options Tab to activate the animation options.
  4. From the first drop down menu, select the type of animation you want. At the bottom of the Animation section is a Preview window so you can see what the effect will look like when you select it.
  5. The last option in the first drop down menu list is for ‘Other.’ Use this option for an additional list of animation effects that are displayed in the second drop down menu.
  6. Once you have chosen the effect you want from the first drop down menu, use the second drop down menu to further customize the effect you have chosen. If you have selected ‘Other’ from the first drop down menu, you will only see a list of other animation effects instead of a list of customization options.
  7. After selecting your choices from the drop down menus, set the animation ‘Duration’ using the slider, by entering a number in the field entry box or by using the up/down arrows. The number shown corresponds to seconds and milliseconds. When selecting duration, the longer the time you enter, the slower the effect takes to complete.
  8. The ‘Delay’ option should be set if you do not want the animation to start immediately as the page loads or when the object scrolls on screen.This option is useful if you have a number of effects on a page and you want to ‘stagger’ them (e.g. if you are ‘storyboarding’.)
  9. The last option is ‘Replay’ which animates the object the number of times you specify.

Animation Effects in Practice
When using animation effects, use Preview to view how the effect(s) will look as effects do not animate when you are in the page design itself. It’s recommended to use the File-> Preview menu (or the Preview button) to view your animations before publishing so you can see how the end result will look. This is important especially if you have a number of animations that run one after the other. It’s also important to see if the animation is appropriate to the page and that its playback speed is correct. Use the Duration, Replay and Delay options to tweak your animation (even by milliseconds!) to get the right effect.

Animation Example: Fade Out Effect
One of the animations that EverWeb includes is a Fade effect. This is a fade IN effect. If you want a fade OUT effect instead, try the following:

  1. Create a blank page with a white background.
  2. Add a Text Box (from the Toolbar) and enter some text in it. Style the text as you want.
  3. Next, add a rectangle shape, again from the Toolbar.
  4. Move and size the rectangle so that it covers the text of the Text Box.
  5. With the rectangle shape still selected, go to the Shape Options tab.
  6. Set the ‘Color Fill’ of the rectangle to be White, the same color as the page background.
  7. Tick the box next to ‘Animation’ so you can access the ‘Animation’ options.
  8. Set the first drop down menu option to ‘Fade’.
  9. Set the second drop down menu option to ‘In Place’ which is the usual default option.
  10. Set a Duration of 1.5 which will give a fairly fast fade speed to the rectangle.
  11. Set a Delay e.g. 3.0 seconds.
  12. Leave Repeat set at 1.
  13. Preview!

What you will see in the Preview is that the text appears, but gradually fades away as the rectangle shape fades in!

This is only one example of how animation effects can be used in EverWeb. To get the most out of them I would recommend thinking of what you want to achieve then play with the effects, duration, delay and repeat options until you get the desired effect!

if you have an effect that you have created why not share it with us, or if you want to create an effect but don’t know how, let us know in the comments below!

06 Apr 2017

Setting Up Your EverWeb Project

No Comments EverWeb, Software, Tips and Tricks, Web Design

If you’re new to EverWeb, you’re probably keen to start building your website straight away. However, it’s worth taking a breath before jumping in so you can set up your EverWeb environment properly before getting down to work on your website. Start by launching EverWeb and creating a new website project, or if you have already started your project, double click on it’s name in the Projects Window to open it.

Log In To Your EverWeb Account
Start by checking that you are logged in to your EverWeb Account using the EverWeb-> Preferences menu. The first tab is ‘Account’. Enter your account details if it’s not already pre-filled, or if you have not done so already, create an account. Logging in to your EverWeb account is important as it’s how EverWeb determines whether you have a purchased or demo version of the product. The only difference between purchased and demo is the ability to publish your website is disabled for the demo version.

Auto Save and Automatic Backup
Once logged in to your EverWeb account I recommend that you immediately set Autosave and Automatic Backup on. These features are also in the EverWeb-> Preferences menu on the ‘Backup’ tab. Autosave and Backup are invaluable tools that can save you lots of time, effort and frustration if you ever have problems with a Project file and need to ‘rollback’.

‘Autosave’ saves your work on the fly and ‘Backup’ creates a back up copy of your Project file in the location you choose on a daily, weekly or monthly basis. You keep from one to 50 backups at any one time. This is useful if, for example, you’ve made changes to your website that you want to reverse out. You may need to go back a couple of backup copies to reverse out all the changes you don’t want.

When you use ‘Backup’ remember that if you delete your Project file, the backups are also deleted.

It’s also a good idea to backup your computer regularly using tools such as Apple’s Time Machine or a third party backup solution. In this way you have less risk of losing any valuable work.

Name Your Website
When setting up your Project file you’ll want to name it! It’s often a question on the EverWeb Discussion Forum, but easy to answer when you know how! By default, all new websites you create are called ‘NEW WEBSITE’. Double click on this text in the Web Page List that runs down the left side of the Project Window. Enter the name you want as the website Project and press Enter to finish.

Set Default Styles
When you start a new website Project you’ll hopefully know what fonts and color palette your website will be using. Set these choices up as defaults for the Project using the Format-> Default Styles menu to access the list of styling attributes that you can change. Click on the ‘Save’ button when finished. Note that ‘Default Styles’ are not applied retrospectively. If, for example, you have changed the ‘Body Text Font’ default, this change is only effective when creating new Text Boxes. For any existing Text Boxes, you will need to change the font manually.

Publishing Settings
There will come a time when you’ll want to publish your website! It’s worth setting up your Site Publishing Settings at the start of your project so when you are finished, or want to test, everything is already in place.

Access the Site Publishing Settings either by the File-> Edit Publishing Settings menu or by double clicking on your website name in the Web Page List. There are three ‘Publish To’ options on the drop down menu. Select ‘EverWeb’ if you have an EverWeb+Hosting plan and ‘FTP Server’ if you have your own hosting provider. Fill in the details as required. If you are using FTP Server and are not sure about the details to fill in, your host provider should be able to help. You can also checkout this video on Publishing in EverWeb. This video walk through is a couple of years old so the EverWeb UI may look a bit different to your version of EverWeb, but the principles remain the same.

The third Publish To option is ‘Folder’ which is useful for testing your website locally before publishing to the Internet.

Email. 404 Page Not Found and Favicon Setup
The Site Publishing Settings is also where you can add email addresses to your website if you have an EverWeb+Hosting plan. For help, click on the ‘?’ to the right of the ‘Email Addresses’ heading. If you have your own host provider use your host provider’s cPanel to setup your email addresses.

At the end of the Head/Footer Code section, is a section where you can select an image to use as a Favicon for your website.Checkout our article on Favicons for more information!

In the ‘Advanced Options’ section of the Site Publishing Section you can also set up a link to a ‘404 Page Not Found’ to capture instances where there may be broken links in your website. It’s a great safety net and we’ll feature this more in an upcoming blog.

Other EverWeb Preferences
The other settings that you will probably want set are the General Preferences in the EverWeb-> Preferences menu. Here you can set the guides that you see when moving objects around the page and whether you want to see the Hyperlink Indicator when you set up Hyperlinks in your web pages.

Spell checking is a great option to set up when you create your website so you don’t get misspellings on your pages! Use the Edit-> Spelling menu and tick the option you want to use. I usually recommend ‘Check Spelling While Typing’ is set on.

Finally, the Window menu can be used to set up whether the Layout is displayed or not and whether the Toolbar and Inspector Window are displayed or.

There may seem a lot that can be set up here, but with just a few minutes work, you’ll have the website project environment you want and you’ll be more efficient in process!

If you have a question about this post, please drop us a line in the Comments section below. Thanks!