タグ

Tipsに関するWebDesignScrachのブックマーク (215)

  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • MdN Design|総合情報サイト

    Photoshop、Fireworks、Dreamwaver、etc. WEBの作業が楽になるテクニック総まとめ 第2回 「あの作業をもっと早くしたい!!」と思っても、改善できずに制作を続けている場合もあるだろう。そこで、Web制作が楽になる操作テクニックをまとめて紹介!! ふだんから使用しているさまざまなソフトウエアを使いこなし手間どる作業をスムーズに行おう。

    MdN Design|総合情報サイト
  • Photoshop関連まとめ - かちびと.net

    Photoshop関連のまとめです。 ブラシやパターン、シェイプ チュートリアルを書いている ブログ、プラグイン、アクション などなどのまとめ、というか 個人的なリンク集です。シェア したいと思ってエントリします。 おそらく抜けてる有益サイトもありそうなので参考程度になさってください。海外サイトが殆どにどうしてもなってしまいますが、殆どは図解入りなので、英語が読めなくてもある程度分かるかと思います。バージョン、ライセンスに関しては表記し切れませんので個々でお確かめ下さい。 配布サイトはフリーをメインにしています。あと、カテゴリ分けはしていますが、結構適当です。 配布サイト ブラシ・シェイプ・パターン ブラシや、カスタムシェイプ、パターンの配布サイト WeGraphics / フリーブラシカテゴリ。11セットほど配布 Brushesdownload / ブラシ配布専門のサイト Gfxfeve

  • 47 CSS Tips & Tricks To Take Your Site To The Next Level

    CSS is a wonderful language for presenting web pages. It’s not too difficult to learn, though like most things, it does have a learning curve. Where many people seem to get tripped up is in specific solutions to specific problems. Fortunately there’s a good chance that someone before you has already had the same problem and even better has found a solution. Here are 47 of those solutions. 47 CSS T

    47 CSS Tips & Tricks To Take Your Site To The Next Level
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

  • Unique Blog Posts and WordPress Tips - Web Designer Wall

    Today I would like to talk about blogs that have a unique design for each post. They break the traditional blog layout by designing a different theme for each post based on the topic. Designing a different layout for each topic requires a lot of time and creativity. So, we should appreciate these blogazines who spend their extra time to make your reading more pleasurable. If you would like to join

    Unique Blog Posts and WordPress Tips - Web Designer Wall
  • CSS3ボタンテクニック集「20 CSS3 Tutorials and Techiques for Creating Buttons」

    TOP  >  WebDesign  >  CSS3ボタンテクニック集「20 CSS3 Tutorials and Techiques for Creating Buttons」 WEBデザインの次世代規格として注目を集めているCSS3。徐々に技術系のWEBサイトでも取り上げられて、WEBデザイン業界内では話がでる機会も増えてきたと思いますが、今日紹介するのはCSS3を使ってボタンを作るテクニック集「20 CSS3 Tutorials and Techiques for Creating Buttons」を紹介したいと思います。 Pretty CSS3 Buttons グラーデーション、オーバラップ、ドロップシャドウなどなど、いままで画像でしか表現が困難だったボタン表現が多数集められています。今日はその中からいくつか気になったテクニックを紹介したいと思います。 詳しくは以下 ■Cool O

    CSS3ボタンテクニック集「20 CSS3 Tutorials and Techiques for Creating Buttons」
  • ユーザーにクリックされやすいボタンデザインの5つのポイント

    ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。 Web Design Trends: Call To Action Buttons 先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。 以下は、各ポイントを意訳したものです。 はじめに サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。 ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。 行動を呼びかけるボタン(Call to Action Button)はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。

  • ウェブデザインでこれは気をつけたいの35のポイント

    ウェブサイトやブログの作成・運営で、避けておきたい35個のミスをnetjellyから紹介します。 List of Web Design Mistakes You Should Avoid 下記は、各リストを意訳したものです。 ※訳者注: 一部過激なものは表現を少し和らげています。 はじめに ウェブサイトやブログを開発・作成する際に、避けた方がよいミスをリストアップしました。 1. 作るだけでは終わりではない ウェブサイトは開発・作成だけでは終わりではなく、公開・運営する必要があります。そして、オンラインやオフラインでウェブサイトの告知に手間や時間をかけることはいっそう必要になります。もし、あなた自身があなたのサイトについて時間をかけないなら、他の誰もそれはしないでしょう。 2. 広告をコンテンツに混ぜない 広告をコンテンツに混ぜると、短期的にはクリック数を増やすかもしれません。しかし、ユー

    ウェブデザインでこれは気をつけたいの35のポイント
  • iPhone の「設定」をゼロから見直して、自分に合うように最適化する。

    AppBankです。 先日、iPhoneにちょっとした不具合が見つかりました(内容は秘密)。バックアップからの復元では直らず、工場出荷後の状態で復元すると不具合が直りました。iPhoneの挙動もすこぶる早くなるというおまけもついてきましたのでよしとします。 ということで、バックアップ状態に戻せないので、iPhoneをまっさらの状態から設定し直しました。幸い必要だったデータは連絡先データと写真のみでしたのでなんとかできそうです。 最近 iPhone を手に入れた方が当に多いと聞きます。 現在、私がどのような iPhone の設定をしているかメモ代わりにご紹介したいと思います。自分でも知らなかった設定がわんさかありましたので、みなさんも一度目を通してみてくださいね。 参考記事: iPhoneの使い方や設定方法のまとめ 追記: コメントがありましたのでアップルに確認しました。「バッテリーの残り

  • ドロップシャドウとグラデーションの使用を的確にするためのチュートリアル

    なんとなく目立たせるためにドロップシャドウを適用したり、ちょっとさみしいのでグラデーションを加えたりしていませんか? Web designer Depotからドロップシャドウとグラデーションをウェブデザインで的確に使用するためのチュートリアルを紹介します。 Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors 下記は、各ポイントを意訳したものです。 ドロップシャドウとグラデーションの役割 ドロップシャドウとグラデーションの使用の注意点 使用は、より繊細に よくある間違いと解決方法 おわりに ドロップシャドウとグラデーションの役割 ドロップシャドウとグラデーションは、スペースに錯覚を生じさせるための基的なテクニックです。 Mac OS Xのドックを例にとると、輝いたテーブルの上に各メニューのアイコンが浮き上がっ

  • 数行のコードでサクッとWordPressの管理画面ロゴを変える方法 - かちびと.net

    Web制作を受注した際などに WordPressを使っていると 管理画面のロゴが気になる 方もいらっしゃるのでは無いかと 思います。お客さんの指定した ロゴを使えば喜んでもらえそう。 その管理画面のロゴをサクッと変える方法です。プラグインは使わず、数行のコードとロゴ画像を追加するだけ。 ログインフォームは過去記事をご覧下さい。 方法は至って簡単。以下のコードを利用中のテーマ内のfunctions.phpに加えます。 <?php add_action('admin_head', 'my_custom_logo'); function my_custom_logo() { echo ' <style type="text/css"> #header-logo { background-image: url('.get_bloginfo('template_directory').'/image

  • 基本的だけど大切なタイポグラフィのシンプルな14のルール

    ウェブデザインをはじめ、印刷にも役立つ基的だけど大切なタイポグラフィのルールをfred designから紹介します。 Simple rules for good typography もしくは、Typophile 下記は、その意訳です。 はじめに ここにウェブや印刷のためのタイポグラフィに役立つ基的なルールがあります。もちろん、このルールは基であり、そしてルールは破られることを意図されているものです。 しかしながら、もしあなたが一般的にきちんとしていて美しくみえる何かを制作するためには良いルールです。 1. たくさんのフォントを使わない ウェブサイトなどのドキュメントに一貫性は非常に重要な要素です。一貫性は統一と一つのアイデンティティーをもたらします。 この一貫性を守るためには、一つのドキュメントに対して3つ以上の異なるフォントを使用しないことです。 2. ヒエラルキー ページ内の階

  • Photoshopのパフォーマンス改善のための6つの方法:phpspot開発日誌

    Photoshoptimizeというサイトにパフォーマンス改善のためのTIPSが載っていました。 古いPhotoshopだと場所がちょっと違いますが、簡単にメモしてみました。 パフォーマンスは上がるかもしれませんが、利便性は下がってしまう可能性があるので注意してください。 「編集」→「環境設定」→「パフォーマンス」で「キャッシュレベル」を 1 にする 「編集」→「環境設定」→「パフォーマンス」で「ヒストリー数」を少なめにする レイヤーパネルの、「パレットオプション」で、サムネイルサイズを小さくor無しにする 「編集」→「環境設定」→「ファイル管理」で「プレビュー画像」の部分を「保存しない」に設定 「編集」→「環境設定」→「テキスト」で「フォントプレビューのサイズ」のチェックを外す 「編集」→「環境設定」→「一般」で「クリップボードへ転送」のチェックを外す 普段何気に使っているPhotosh

  • あなたが知らないかもしれないPhotoshopの使い方10 – creamu

    Photoshopをもっと使いこなしたい。そんなあなたにおすすめなのが、『10 Photoshop Interface Features you Didn’t Know Existed』。あなたが知らないかもしれないPhotoshopの使い方です。 なかなかいい感じのが揃っていますよ。 背景色をグレー以外の色に変更する グレーがぼんやりしているなら、ウィンドウの背景色を黒に変えてみよう。右クリックで可能だ。他の色も選べる 描画色と背景色を簡単に変更する スポイトツールで、altを押しながら色を選択すると、背景色を変更できる シェイプや選択範囲の位置を変更する シェイプや選択範囲を描いている途中で、位置を変更したい場合、スペースバーを押しながら描いたり選択範囲を作成することで移動できる 選択範囲を復活させる 選択範囲を失ってしまった場合、「Ctrl + Shift + D」でもう一度選択範囲

  • The 60+ Best Ecommerce Websites - Top Ecommerce Website Designs

    Home » Articles » 25+ Best Ecommerce Website Designs for Inspiration (2024) 25+ Best Ecommerce Website Designs for Inspiration (2024) The list of top 50 ecommerce website designs in 2024 If you subscribe to a service from a link on this page, Reeves and Sons Limited may earn a commission. See our ethics statement. For any business that wants to sell online, having a well-designed website is vitall

    The 60+ Best Ecommerce Websites - Top Ecommerce Website Designs
  • ちょっと手を加えてウェブデザインをグレードアップする6つのポイント

    既存のウェブサイトのデザインにちょっと手を加えて「Good」から「Great」にする6つのポイントをMyInkBlogから紹介します。 6 Ways To Take Your Webdesign From Good To Great 下記は各ポイントと実例をピックアップした意訳です。 元記事には実例などが他にも豊富に掲載されています。 1. はじめに 1. グラデーション 2. ホワイトスペース 3. グリッド 4. タイポグラフィ 5. ナビゲーション 6. フッタ はじめに ウェブデザインの「Good」と「Great」の差は小さなものです。平均的な人は素晴らしいデザインを構成する明白な相違点を説明することが可能ではないかもしれません。しかし、好きなデザインを見つけることは可能です。いくつかの素晴らしいサイトを分析することで、その相違点を補う小さなディテールをみつけることができるでしょう

  • IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌

    IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px;  で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて

  • Tips - Web Design Ledger

    Tips InspirationLogo DesignTipsUncategorizedWeb Design The Basics of Coffee Branding & Design – Coffee Design Ideas Brewed to Perfection Web Design LedgerSeptember 23, 2020 TipsTypography A Designer’s Guide to Kerning, Tracking, and Letter-Spacing in 2020 | L e t ‘ s D o T h i s Web Design LedgerSeptember 7, 2020 TipsTools Diving Into The Stock Market With Marketstack Web Design LedgerSeptember 2,

  • Pure CSSな吹き出し

    Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble

    Pure CSSな吹き出し